01
Overview
02
Discover
03
Define
04
Develop
05
Deliver

Chef.Me

Optimizing time and making recipe finding seamless.

My Scope

End-to-End
UX Design
UX Research
UI Design
Brand Design
Logo Design
Brand Design

The Team

Product Designer - Me
UX Academy Mentor - Peter Ndirpaya

Tools

Figma, Google Suite, Adobe Illustrator, MilaNote, Procreate

Background

In our fast-paced world, convenience has become a top priority for many. Balancing work, school, exercise, and getting enough sleep often leaves little time for preparing homemade meals. This is reflected in a Texas A&M study, which found that weekly spending on dining out rose from $63.90 to $82.20 since the COVID-19 pandemic. While dining out and ordering in offers a quick solution for a healthy diet, it also raises the risk of heart disease and obesity as these habits become more frequent.
‍
This inspired me to explore why people avoid cooking at home and how I could make it more accessible and appealing. My goal is to offer a convenient alternative to dining out while promoting healthier eating habits.

Design Process

Discover

User Testing

To better understand why users were disinclined to cook at home, I conducted a survey with 7 participants, focusing on the challenges they face. The following are my key insights for the reasearch:
  • 80% of users found it too time-consuming to find and cook a meal to eat.
  • 57% mentioned that the process to finding their desired content should feel “easy”.
  • 20% revealed that they did not cook at home simply because they did not know how.
  • 100% stated that the time spent searching for and consuming their desired learning content impacted their ability to achieve their cooking goals.

Define

How Might We Statements

From my research findings, I was able to create How Might We statements. These statements focused on specific user experience aspects, guiding my design process by identifying key opportunities for improvement.

User and Business Goals

Setting clear user and business goals was essential to align the app's features with user needs and business objectives.

User Goals

  • Optimize Recipe Search
  • Reduce frequency of dining out

Business Goals

  • Maintain User Engagement
  • Grow User Base

User Personas

In order to best empathize with the users' pain points and keep their needs at the forefront of my design process I created this persona. By understanding the motivations, challenges, and goals of my persona, I was able to create a tailored experience.

User Flows and Task Flows

Onboarding Survey

To enhance the user's initial experience, I made an introductory survey mandatory for sign-up. I felt that this would quickly tailor the experience for the user giving a customized welcome into Chef.Me.

Filter for Search

To optimize search time, I created a clear IA for users to navigate and add their preferences. Since searching for recipes was a primary task, I designed it to be accessed on the Nav Bar.

Develop: Ideating the best solution

Chef.Me

Leveraging insights from the discover and define stages of the process, I designed Chef.Me, a mobile app that streamlines the recipe discovery process and empowers users to take control of their kitchen experience. Chef.Me effectively addresses user frustrations with time-consuming searches and complicated processes while aligning with both user needs and business objectives.

Branding

Logo

I aimed to design a logo that captures both the grit and joy of cooking. The bold stroke and red stripe in the chef’s hat symbolize an open, welcoming community eager to share resources and knowledge.

Name

Chef.Me is my best paraphrase of one of Pixar’s Ratatouille’s best lines “Anyone can cook”. Although users vary in their cooking skills, it does not discredit their journey in becoming their own personal chef.

Color Palette

In the realm of cuisine, I envision an ambiance of profoundness and delectable charm and I felt these colors represented that well.

Typeface

Lexend is a no nonsense typeface that I felt made for a great choice for my goals in designing Chef.Me. The typeface has a rounded fun feel but still remains a professional legible choice.

Low-Fidelity Wireframes

I first started with Low-Fidelity Wireframes to gather a foundation for my product, focusing on the overall structure and user flow without getting caught up in visual details, which allowed me to iterate quickly and test different ideas early in the design process.

Mid-Fidelity Wireframes

Once the core layout and interactions were solidified, I transitioned to Mid-Fidelity Wireframes. This step helped me refine the layout further, adding more detail to the design while still maintaining flexibility, enabling me to validate functionality and usability before committing to high-fidelity visuals.

Prototype

After feeling confident in the layout and spacing for Chef.Me, I began creating my first set of High-Fidelity Wireframes. I focused on key features such as a smooth onboarding experience with an onboarding survey and adding a filter to streamline search functionality. My goal was to ensure that the UI guided users effortlessly through these features, helping them get started quickly and find what they need without confusion.

User-Testing

Next, I conducted user testing with 5 participants to gather feedback on my Chef.Me prototype. The users were asked to complete two tasks: onboarding onto Chef.Me and navigating the home page to apply a filter to the search. On a scale of 1-5, with 1 being difficult and 5 being easy, users rated both tasks a 4/5, indicating that the interface was largely intuitive but could benefit from further refinement. Overall my user testing guided me into a 3 key suggestions: 

Social Sign-On

Showing the workflow for folks who wanted to utilize the Social Sign-In Feature during Onboarding.

Calendar Selector

 A calendar selector would enhance the onboarding process by allowing users to conveniently select their dates of birth. This feature would alleviate any potential confusion arising from variations in date number sequences across different countries and ensure a streamlined and user-friendly experience.

Animation Load Points

 I added 2 loading point animations to the onboarding process: one for completing the onboarding process and one for completing the introductory survey.These animations made the onboarding process more enjoyable and gave users a sense of accomplishment.

Search by Ingredient

Instead of traditional recipe searches, this unique feature enables users to find recipes based on the ingredients they already have on hand. This was designed to help users save time and money, and helps them make environmentally-conscious choices by reducing food waste.

Ingredient Checklist

For easy cross referencing for the user, I’ve added a checklist feature so that the user is able to forego a pen or pape when taking note of what ingredients they still need.

Step-by-Step Cooking

To truly streamline the process of cooking a brand new recipe I felt that a Step-by-Step Cooking flow would bring the user confidence when attempting a new recipe. Within the IA of these cards, I’ve made sure to prep the user by mentioning what cookware or prep work they might need to accomplish as well.

Save Tab

To enhance the user experience and provide more control over recipes, I expanded the Save Tab. This allows users to organize their saved recipes into customized collections. Users can create and name collections to organize and categorize their recipes as they see fit, making it easier to find and return to their favorite recipes at any time.

Deliver

High Fidelity Wireframes

The final Chef.Me prototype integrates user feedback and design improvements, with a focus on smooth onboarding, better search filters, and easier navigation. This version addresses the core issues from earlier testing while delivering a cleaner, more user-friendly experience that makes cooking at home simpler and more enjoyable.

Takeaways and Reflection

Overall, this project taught me an immense amount about the design process and how thorough each step must be in order to guide myself in marrying both the project and users’ goals. Overall, I was able to apply a well-rounded design process that allowed me to flex my problem solving skills and my ability to place the user first in my decisions.
back to the top
next project
Contact MeResume
Necole Cayanan © 2024