Services

Ux/Ui Design, Research

Industry

Food and beverage

Timeline

June 2021 - August 2021

Location

England

Context and mission

Foodan is a food organization that is focused on healthy living. Foodan aims to build cooking app for young adults and professionals to have a convenient and accessible solution to them learn how to cook. Foodan recognizes that young adults and busy professionals often have limited time, varying skill levels, and specific dietary preferences.

Foodan aims to address these needs by providing a platform that offers personalized recipes, clear instructions, and interactive features to make the cooking experience enjoyable and achievable for this target audience.

Challenges

The lack of cooking knowledge and limited time for young adults and professionals to prepare meals at home, is the challenge we're facing now. It is imperative for the Foodan team to provide convenient resources, step-by-step recipes, and personalized features to simplify cooking and make it achievable within busy schedules.

Solution

A cooking app that offers step-by-step recipes, instructional content, and personalized features to empower young adults and professionals with cooking knowledge is the solution to the challenge. The app provides convenient resources and simplifies the cooking process, making it achievable within busy schedules and helping users prepare meals at home with ease.

Role

Ux designer designing an app for Foodan from conception to delivery

Outcome

After the launch of Foodan, there was an increase in cooking skills and knowledge among users, improved confidence in the kitchen, greater engagement with homemade meals, and a positive impact on their overall cooking habits and lifestyle choices.

Design Process

Design process image

User Persona

One of the people i spoke to during my user research is Cash. Cash is a web developer who needs exciting healthy recipes and estimated quantity of food to prepare so they can avoid food binge. Cash represents 65% of Foodan's target users.

The key pain points

1
Limited time

Busy schedules and time constraints make it challenging to allocate time for planning, shopping, and preparing meals from scratch

2
Lack of cooking knowledge

Limited experience or knowledge when it comes to cooking techniques, recipe selection, and ingredient combinations

3
Recipe Inspiration

Coming up with new and creative meal ideas can be difficult, leading to repetition and boredom in meal choices.

Information Architecture

Our prioritization of features for implementation was informed by a thorough analysis of user experience and the identification of pain points. By gaining insights into the user experience, we successfully identified the features that hold the highest value for users. This methodology empowered us to develop a product that effectively caters to user needs and elevates the overall user experience.

Wireframing and Prototyping

After receiving approval for the architecture and user flow, I proceeded to design low-fidelity screens in Figma, incorporating essential features like recipe categorization, recipe ratings and reviews, cooking time and easy navigation. This ensured a consistent and user-friendly experience throughout the app.

Taking stakeholder feedback and seeking inspiration, I embarked on the task of putting together all product functionalities into a unified user experience. This involved meticulously connecting and integrating all features to create a seamless and intuitive user journey, resulting in a user-friendly and purpose-driven final product.

Design: First iteration

Based on the insights from the usability studies, i applied changes like clear ratings of recipe before user clicks on the item.
Dashboard mockup

Design: Second iteration

Additional design changes included adding an option to share saved grocery list with contacts.
Dashboard mockup

Sticker Sheet

With the objective of maintaining consistency and easing the transition for the development team, I developed a modular UI kit consisting of reusable components and their various states. This comprehensive kit encompassed elements like cards, list items, controls, and more.

The modular approach provided flexibility during the design phase, enabling the rearrangement and combination of components while preserving design consistency and recognizable UI patterns for the user. This method streamlined development efforts and guaranteed an intuitive and user-friendly final product.

Mockup

Foodan's visual style underwent multiple rounds of revisions and redesigns. After the third iteration, a final design emerged that successfully fulfilled the requirements and expectations of all stakeholders. It effectively captured the desired characteristics of the initial design brief.

The final design aligned perfectly with stakeholder requests, thereby received approval for implementation.