UX/UI Case Study: Recipe App
A quick design challenge to design a recipe for a mobile application
The Brief
While I have a certification in UX Design, I wanted to challenge myself and learn UI design as well. One of the best ways to learn is to do and I started to take on weekly Design Challenges. At first, I was scared at still tackled them as UX Design, thinking about user flows and content more than anything else. But slowly each week, I gained confidence with my visual design skills.
While in my last case study I used the website Designercize for a prompt, I decided to go back to Daily UI for this one. The biggest difference between the two platforms’ prompts are the level of detail. Designercize tells you the audience, the category of the product and the exact screen/flow to design. So yes, you might have to design a user profile for a dating app targeting marine biologists. And on the opposite hand, Daily UI is so vague. They want you to use your imagination and create your own scenarios. This prompt is from their daily email #040. The prompt exactly? “Recipe.” Yup, that’s it.
Since I was focusing on my UI skills, I had to make a lot of UX assumptions for this challenge. I quickly looked at how other apps/websites and picked out elements I thought would be useful.
Quick Info
- Cover image, obviously. Because humans eat with their eyes first.
- Keyword Tags. Displays type of recipe and any dietary needs. Makes it easier for users to sort & filter to find a recipe that works for them.
- Ratings. Users value ratings and reviews. Allowing users to rate recipes will help them keep track of which ones they enjoyed while also helping them select a high-quality recipe from others’ ratings.
- Difficulty Level. Users all have different skills and time restrictions. Showing users a general skill level, time commitment and amount of ingredients will further help them in the decision making process.
Adjust Servings
- Increase/Decrease Amount. Instead of the users having to exit the app to use the calculator to adjust the recipe, a plus and minus button will adjust the servings.
- Responsive Ingredient List. When changes are made to the servings, the bold amounts on the ingredient list will reflect the new amounts.
Directions
To help users keep track of where they left off in a recipe, I included three different states on the directions:
- Completed. Tapping on the line item will mark the step as complete. It will grey out and be checked off.
- Current. After completing a step, the next item will be highlighted. Allowing users to scroll around or exit the app and easily recognize where they left off.
- Next Steps. Before tapping any steps, all steps in the recipe appear in this state. It’s a simple numbered list so users can prepare for the recipe.
Future Considerations
Accessibility
I did not test out accessibility of this design. Upon second look, I do believe my contrast with the light grey text will need to be adjusted along with font size. I also need to look into how screen readers could possibly work with the interactive directions.
The back button on the top-left and the favorite button on the top-right get lost above the image. I need to look at solutions to make them more accessible on top of a range of images.
Interactions/User Research
This app does rely on new interactions to function at its full capacity. Would users know to adjust the servings before creating their shopping list? How would users know to tap a step once they’ve completed it? I would love to run a usability test to see how well it is received.
This design has not been tested on users so I would love to hear your feedback!
