A Recipe App
UI / UX / interaction Design
Problem Statement
Cracking the Recipe to Reading Recipes
Finding and following recipes online is often a frustrating experience due to:
Intrusive ads and excessive SEO-driven content.
Inconsistent designs across different websites.
Users must scroll extensively to access the actual recipe.
Accessibility features are frequently overlooked on recipe websites.
Navigating recipes while cooking is challenging, especially with messy hands (e.g., covered in cake batter).
This led me to ask the question
How might we make it easier to read online recipes while cooking?
Photo by Anna Shvets
Ideation, Goals & Design tenets
Setting the Table: Design Goals and Principles
A unified, distraction-free platform for discovering and reading recipes,
Prioritizes:
Usability.
Consistency.
Inclusivity.
Designed to enhance the cooking experience for all users.
User research and competitive analysis
The User's Palette
Before jumping into Figma to start designing, I gathered insights from real home-cooks who use online recipes often and user reviews of competitor apps & websites in order to tailor my solution accordingly.
Insight #1
Only necessary content should be displayed
"I don't want to slog through the blog just to get to the directions"
Result:
The recipe reader should only display ingredients, directions and nothing else. This would also help with keeping the system lean enough to not require any subscription fees.
Insight #2
Ubiquitous design
Using one's phone or laptop in the kitchen with cake batter on your hands is almost always a disaster
Result:
The app would need to fit in well with a kitchen environment where ones hands are occupied. This can be addressed by adding voice commands and audio features.
Insight #3
Features need to be easy to use and intuitive
"I would prefer not having to open a new page to get to the recipe I want"
Result:
The app would need to have a simple flow. Minimizing the number of clicks/taps to get through the recipe would need to be a key part of the design.
System map
Crafting a Flavorful Flow
With simplicity in mind, I had to outline the shortest path a user would take to start cooking. Since we know that any online recipe follows the basic 3 steps: Browse for a recipe, find one, start cooking. My app would need to enhance and ease that experience without complicating it.
Lo-fi Design & Prototyping
Bringing it all together
With the goals, features and processes mapped I moved into the next phase of actually building the app starting with some rough sketches making sure to add notes about the extra features the app would need to have in order to enhance the cooking experience.
After this I took all of sketched screens into Figma to bring them to life in low-fidelity form. In each iteration, the app's functionality was streamlined to the point where assumptions could be tested and allow time to implement testing insights.
An example of the low-fidelity's evolution can be seen in the design of the steps for the user to create a recipe. Originally I thought that creating it like a form would make it a simple one step process, but breaking it up into easily digestible steps (like in the case of Google's sign-in flow) proved a better option.
User testing - I - Early feedback
Taste Testing the Prototype
Two people were tested from the home-chef's perspective and from the perspective of a recipe creator. Participants were able to find what they needed easily.
There was one main adjustment needed:
Change #1 - Home-Chef
Adding a secondary way to get to help & support
Users were concerned that the help and report feature should be also available on each recipe instead of only on the overall app level.
Solution
I added in a 3 dot menu on every recipe page that the user can click to report a problem while on the exact screen of the problem instead of only needing to use the top nav to access it.
Old design - using nav bar to access help & support
New design - 3 dot menu on every page of a recipe
Establishing a styleguide & components
Baking the Basics
Hi Fidelity Designs
Spicing it up!
Interaction Design & key features
The Garnish of Design: Key Features
"I need to watch this boiling pot"
Audio and playback speed
A user needing to keep their focus on the cooking at hand can have the recipe play aloud using the play button that is on screen at all times.
They can also increase or decrease the playback speed according to their ability of absorbing information.
"Wait, read from that word again"
Tap the word or say "Read from.." to read from a particular word
Just like you would tap the seeker of a video to go back to a particular part, you can tap the exact word that you want the app to read from and it will do so.
"Smearing cake batter across my screen"
Voice commands
Once a recipe is opened, the app will listen for a voice command to read out the recipe or even a particular step in the recipe thereby promoting accessibility and inclusivity.
Note:
Since this is a recording feature, to help with privacy concerns, there is a note always displayed at the bottom of any recipe letting the user know when the app is listening. The feature can also be disabled any time in settings.
"This screen hurts my eyes"
Reading light modes
A site or app to read recipes is after all a reading app and should thus have the features of one. Inspired by the design of Google Play books, I incorporated a light adjusting control that is always on the recipe page that you are on so you can change it anytime.
"Straining over this tiny text"
Font style, size & line height adjuster
A user standing over a stove would want the recipe text to be a readable size without needing to bend down at the phone several times. To help with this, I added in a font style and size adjuster so that users can read the recipe in the font size and style of their choice.
"Just washed up but my hands aren't dry"
Tapping vs swiping
User research found that people prefer using single touch points like tapping or clicking when their hands are occupied i.e. slightly messy from cooking.
"How did I get here again?"
Always know where you are in the app
By making the bottom nav icon enlarge when you enter a section in the app, it tells the user exactly where they are.
User Testing - ii
Taste Testing the Design
Four people were tested from the home-chef's perspective and from the perspective of a recipe creator. Participants found the visual audio adjust-abilities very helpful.
There was one main adjustment needed:
Change #2 - Home-chef
The nav bar takes up too much real-estate
Adding a full screen mode while reading recipes mitigated this issue.
Conclusion
From Prep to Plate: Insights from the Design Process
This recipe app design project was a rewarding journey that tackled the everyday frustrations of home cooks, focusing on usability, accessibility, and consistency. I was proud of myself as I designed 106 screens, over the course of just 15 days, demonstrating efficiency and dedication to delivering a cohesive and distraction-free user experience. From in-depth user research to detailed component creation, every decision was guided by the goal of simplifying the process of finding and following recipes. This project is not only a testament to thoughtful design but also to the power of determination and focus in addressing real-world challenges.
Thanks for viewing!