COLAB31 - Web App

Recipe-Z

We believe the journey to discovering great recipes should be seamless and distinct, making cooking easier for everyone.

Problem Space

Food enthusiasts often struggle to find the right recipes that match their preferences, dietary restrictions, and available ingredients. Current recipe platforms are cluttered, difficult to navigate, and lack personalised recommendations, leading to a frustrating and time-consuming search experience. This not only discourages culinary exploration but also affects the daily meal planning of many users.

Problem Background

Food enthusiasts frequently encounter difficulties when searching for recipes that align with their specific preferences, dietary needs, and available ingredients. While the internet is saturated with recipe platforms, many of these platforms suffer from cluttered interfaces and poor navigation, making it challenging for users to find what they’re looking for. The absence of personalised recommendations forces users to wade through countless irrelevant recipes, turning what should be an enjoyable experience into a frustrating and time-consuming task.

This problem goes beyond mere inconvenience. It impacts users' willingness to explore new dishes and experiment with different cuisines, ultimately hindering their culinary creativity and enjoyment. Moreover, the lack of an efficient recipe discovery process can make daily meal planning more stressful, particularly for those with strict dietary restrictions or busy schedules.

In an era where personalised and streamlined digital experiences are increasingly expected, the shortcomings of existing recipe platforms reveal a significant gap in the market. By addressing these pain points—offering intuitive navigation, advanced filtering options, and tailored recipe suggestions—we can vastly improve the user experience. This, in turn, will encourage more culinary exploration, simplify meal planning, and make cooking a more enjoyable and rewarding activity for food enthusiasts.

Research Insights & User Pain Points

  • “Using family connections and LinkedIn groups, we have identified a few different categories of prospective users and did over 3 user interviews and received 20+ user survey inputs that have uncovered the following 2 major ones.
  • *An overwhelming amount of irrelevant recipe search results on the web. - around 40% of users
  • *The users struggle to find exactly what they need and where to find, leading to decision fatigue. - around 35% of users

Solution Explanation

To effectively address our target users' pain points and achieve our product's goal of delivering an intuitive UX and better display of results, we developed a web application featuring advanced search filters to refine recipe results. The interface is clean and user-friendly, with added 'Save' and 'Share' options for improved functionality and convenience.

*Enhances the overall cooking experience with a clear, user-friendly interface.

Lofi & Hifi Mockups

Final design link 

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that they loved the UI design and appreciated the ability to save recipes and create albums. Although there was some initial confusion about the purpose of 'My Cookbooks,' they found the advanced filter search and the flexibility in adding recipe instructions very useful.

 They suggested adjusting the alignments for better clarity, which would make these features even easier to use. Based on this feedback, I iterated the design to address these issues. Overall, we achieved one of our goals by creating an interface that is both functional and user-friendly.

Implementation Details

Where is it hosted? 
  • Backend: Render
  • Frontend: Vercel
What is your tech stack? 
  • Backend: Django, MongoEngine (MongoDB), Python, GridFS for media storage, Spoonacular API
  • Frontend: React, JavaScript, SCSS for styling

High level journey of a request

We chose this journey for our project because we believed that not only did this feel most comfortable as a route, it also gave us an opportunity to learn more. The application has two major CRUD functions with recipes and users. You can create an account, add recipes to it, update the profile and much more. With recipes, users can create recipes, edit them, retrieve from the database and even delete the user’s created recipes.

  1. User sends a request to the Django backend.
  2. Request is processed, either querying the database or calling the Spoonacular API.
  3. Data is transformed and returned to the frontend.

Technical challenges

What was the hardest part of development? 

Our biggest struggle has been hosting our front and backends on their respective servers and connecting them.

Integrating GridFS for media, handling complex searches, API integration, and resolving CSS issues after deployment.

Does your app have any scaling issues?

Having to halt production for specific pages until connecting the backend.

No significant scaling issues identified; future growth may require optimizing database queries and caching.

What are some key takeaways?
  • That starting with our backend and front end integrated is better practice for the future.
  • Using the backend with multiple people has been harder than expected.
  • Importance of clear API documentation, efficient API integration, and proactive debugging during deployment.

Future Steps

  1. The next steps involve maintaining post-launch support to promptly address any immediate user concerns. We will continue user testing, prioritise feedback, and gather data to identify improvement areas, ensuring we meet our users' needs.
  2. Also to continue developing the “Recipe Save” and “Recipe Share” features to be implemented.

Learnings

Product Manager Learnings:

Sita Devi Penmetsa

My experience with Co.Lab was both enriching and hands-on, offering valuable insights as I pursue my goal of becoming a Product Manager.  Discovering and driving the product vision. Importance of understanding and digging deeper into the problem space before we come up with any solution assumptions. Learned how to communicate with my team to prioritise the work and make smart tradeoffs. A great learning curve around the user research process.

Designer Learnings:

Puii Jaiwijitr

During my time as a product designer with Co.Lab, I had the opportunity to work on an end-to-end project within a collaborative, cross-functional team environment. I learned,

  • Collaboration and Communication: I actively participated in team meetings, where we discussed project goals, timelines, and challenges. I communicated design decisions and user insights to the team, ensuring that our designs aligned with both user needs and technical feasibility.
  • Design Process: I led the design effort by creating wireframes, and developing high-fidelity prototypes. I utilized tools like Figma and FigJam to create and iterate on designs based on team feedback and usability testing.
  • Challenges and Problem-Solving: I took the initiative to introduce design systems to maintain consistency across the product, which helps the development process and improved our overall efficiency.

Developer Learnings:

Caleb McMillan

My experience with Co.Lab has shown me all sides of my future as a developer. I understand that every team is going to have their great days and some not so productive ones. With that being said, we can use those bad days as inspiration to be better for the next. The biggest take away that I have from this experience is that even when you feel like the project is going nowhere and you’re struggling to get going. As long as you and your team believe in each other and can communicate together, you can prevail!  I can say I feel much more comfortable taking on a role in a job in the near future.

Developers Learnings:

Winter Krimmert

&

Mastered Django & MongoEngine integration for non-relational data models. Gained experience in API integration, caching, and advanced search/filtering. Learned to handle media files with GridFS and deploy effectively on Render. Enhanced collaboration with frontend engineers, focusing on clear API documentation. Improved troubleshooting and debugging skills, resolving deployment and CSS issues.

Full Team Learning

  • Empathising with users
  • Aligning on goals
  • Cross-functional collaboration
  • Addressing issues and continuous improvement