UX/UI Case Study: Recipe App

A quick design challenge to design a recipe for a mobile application

The Brief

Quick Info

  1. Cover image, obviously. Because humans eat with their eyes first.
  2. 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.
  3. 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.
  4. 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

  1. 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.
  2. Responsive Ingredient List. When changes are made to the servings, the bold amounts on the ingredient list will reflect the new amounts.

Directions

  1. Completed. Tapping on the line item will mark the step as complete. It will grey out and be checked off.
  2. 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.
  3. 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

Interactions/User Research

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Phylicia Flynn

Interior Designer transformed into UX/Product Designer. NJ transplant living in the Midwest. Has an affinity for dogs, spicy food and coffee shops. phylicia.co