top of page
Design A Recipe App

30 Day UI Challenge

I took on this project as I stumbled into the "30 Day UI" app. The practice is to design a food or drink recipe and help users to assemble their favorite meal step by step. 

I researched and tested out a few other recipe apps to help me contract the user flow. My findings are that users tend to look at the recipes based on how appealing the images are and how much time it consumes to cook a meal. Therefore, I decided to showcase a large view of each recipe and relatively indicate the cooking time. Here are three possible outcomes:

  • Do not fall in love with the visual –> Next recipe

  • Love the food image but the cooking time is too long – > Next recipe

  • Absolutely love the visual and think the cooking time is reasonable –> Open recipe

  • Do not love the visual but curious about the details (do not care about cooking time) –> Open recipe 

  • Think the cooking time is too long but is interested in the visual and curious about the details –> Open recipe 

Ingredient Checklist

Once users open the specific recipe, a detailed ingredient list will show up from the bottom of their phone screen. It allows users to check off ingredients they already own and grocery shop for the ones that they need. 

Following the ingredient checklist, users can simply swipe left to view the step by step instruction. Once a step is checked off, it will automatically scroll up the next steps and help users to prepare for their cooking.

Recipe App UI Design

Like What You See?

bottom of page