ChefMate - Food Recipe Mobile App

For my Visual Design project, I created a recipe management mobile app with 15+ high-fidelity screens, incorporating user research and validating the designs through user feedback in just 1.5 months.

INSPIRATION

Saving recipes on different platforms you like is simple, but finding the perfect one when you're ready to cook and then successfully preparing it can be extremely difficult.

With the increase in recipe sharing across various sources, such as YouTube, Instagram, websites, or homemade recipes passed down through generations, recipe management has become a significant challenge.

Furthermore, another challenge is that you might not have the necessary ingredients when you find a saved recipe just before you start cooking. Additionally, managing ingredients, quantities, and following recipes while cooking on different platforms can be difficult. This often leads to preparing the same old recipes instead of exploring something new.

There is a need for a consolidated space for storing recipes that also assists you while cooking by providing consistent steps and ingredient quantities.

KEY CHALLENGES

Even though this was a visual design project, before starting the design, I wanted to first validate my assumptions. A wide variety of individuals can benefit from a recipe app. I chose to concentrate on a specific user group that I could easily interview, namely graduate students. Even within this group, I've observed significant diversity in cooking habits, methods, culinary preferences, and the degree of culinary expertise. Recognizing this diversity guides my design decisions, ensuring that the app is not overly tailored to just cooking enthusiasts while remaining inclusive of users with varying skill levels.

USER RESEARCH

I conducted 5 short conversational interviews during which I asked questions such as, 'How do you decide which recipe to cook?' 'What are the most common sources for finding recipes?' and 'What obstacles do you face while cooking?'

As the interviews progressed, I aimed to gain a deeper understanding of their process, from finding a recipe to cooking, their challenges, what went well, and what improvements they wished to make.

Through this research, I discovered that besides my initial idea, there were numerous challenges and issues users encountered while cooking. I aimed to address some of these problems by identifying common patterns in the data and generating ideas for new features and opportunities based on the insights.

MOODBOARD

I conducted research across various recipe apps to draw inspiration from the features and visual design elements used in existing recipe applications. The findings from this research provided me with a clear understanding of the flow of recipe apps, which in turn helped me create my low-fidelity designs and establish a visual language for my project.

SKETCHES & LOW-FIDELITY

In our class feedback sessions, I got to confirm my ideas and hear what others thought about the recipe app I was creating. My peers suggested additional features like 3D motion animation, AR glasses compatibility, and smart fridge integration. However, due to time and effort constraints, I had to prioritize.

I wanted to create a user-friendly app for personal smartphones, so I chose to focus on designing for mobile and smartwatches, as designing for other devices would have been too time-consuming and limited the features I could include.

COLORS & TYPOGRAPHY

I wanted the app to feel cozy and familiar, so I used a handwritten font for the logo and headings to give it a personal cookbook vibe. For the main text and subheadings, I went with the Lato font because it's warm and easy to read.

When it came to colors, I looked at food pictures online and saw that yellow, red and green were popular choices. I picked yellow for its warmth and happiness, and red for its energy and excitement. I didn't go with green because it might have given the app a different, more health-focused feel, and I wanted it to be cozy and inviting

FINAL DESIGN

These final designs went through several iterations based on feedback and validation from users. After presenting in class, I received design feedback from both my professor and peers. They suggested visual design improvements like fixing color contrast, using consistent animations for GIFs and icons, and addressing spacing issues.

I also went back to my users that I had interviewed in the beginning to gather their feedback and thoughts on my designs. Some of the feedback I received involved:

"The ingredient list feels too long; I'd like it split by recipe steps."
"I'd love to see alternatives to the listed ingredients."
"I wish I could easily check how much time a recipe takes and how difficult it is."
"Initially, I found it a bit confusing to select from the three options when adding a new recipe. It took a bit of trial and error, but once I got the hang of it, it was clear."
"I really liked the feature that lets me add recipes from different platforms and create my own lists on the app. The cook mode feature was super useful."

Welcome Screen

A welcoming warm screen featuring colorful vegetables and a smooth loading animation not only looks appealing but also engages users, making them happy to use the app.

The logo and name create a friendly, welcoming atmosphere, so users feel like they have a cooking buddy by their side.

Cookbook Screen

This is the one place for all your saved recipes screen! The experience is made better with neatly organized saved recipes in customizable lists and categories created by the user. You can also use filters to search for recipes by ingredients, cook time, cuisine, and more. It's easy to browse through these lists to find all the recipes you need.

Recipe Screen

At first, a quick video or picture along with a description of the recipe is presented to the user. Essential details like prep time, cook time and difficulty provide crucial information, ensuring users are well-informed about the recipe. Users can even document their changes in the recipe by editing it.

There is also a seamless presentation of ingredients and steps. The app also offers alternative ingredient choices and links to additional information on the web, providing users with more options and knowledge.

Recipe Screen

Cooking while following a recipe can be tricky because your device's screen may turn off, and tapping or scrolling with messy hands is a hassle. Constantly switching between ingredients and instructions can be distracting.

To make things easier, I introduced a new feature called Cook-mode. In this mode, the recipe is presented step by step in a large, easy-to-read font. It can also be read aloud and controlled using your voice. Users can simply say commands like, "Next step," "Read the instructions," "List the ingredients," "Go to the next step," and more. This feature streamlines the cooking process, making it more convenient and less distracting.‍

Cook-mode on smart watch

Following a recipe on a mobile device can be distracting, as it requires switching between the physical kitchen and the digital screen. Cook-mode on a smartwatch streamlines this interaction, allowing users to interact with the screen on their wrist while continuing their cooking tasks without interruption.

Importing Recipes

Users have the flexibility to import recipes through various methods, including saving a URL from the web, scanning handwritten recipes, or creating a new one from scratch. When saving a recipe, users are prompted to decide whether they want to receive updates on the app related to that recipe and if they'd like to share it with others.

This versatile approach enables users to collect recipes from any source, document their own creations, or preserve cherished family recipes for sharing and future reference.

Recipe Feed Screen

Users can access and centralize recipe content from various sources in one app, making it simple to save and organize their favorite recipes, including those from different chefs and social media channels.

'Ask Chef' Screen

In this feature, users can request AI-generated recipe suggestions by providing prompts. The AI offers recipes based on ingredients, fridge inventory, and many more options according on user input making it easy to find recipes especially for beginners.

Profile Screen

Users can use the app to store their fridge item inventory, create shopping lists, and save their favorite content.

FINAL THOUGHTS & LEARNINGS

I really enjoyed designing this mobile app! Creating a utility app made me aware of a lot of constraints and factors that come into play. During my feedback sessions, I was made aware of my color accessibility choices, the need for affordances for uncommon icon buttons and ease of readability and interactions when using the app. ‍

Also, talking to users helped me with some preliminary user research and stay unbiased providing me a better idea of what the general need from the app could be.

Top Learnings

Make design decisions for font, color, space and form
Prototyping and subtle animations
Effectively use media - photos, videos and gifs
Design for a watch interface
Build a component library using auto-layout and variants