Desktop HD Copy 49.png

Recipe design

 
 
 

The Challenge

How might we create a recipes detail and/or search page that help people share recipes?

Each recipe has a title, multiple photos, a description, a shopping list, a how-to section, share options, a rating, multiple reviews and user uploaded photos. Optimize the design to help people share recipes. Instead of doing user research, make smart assumptions and weigh tradeoffs about what business goals and user goals to optimize for.

Duration  |  1 week          Tools used  |  Sketch. Principle. Illustrator.

 

Contents 

  • Overview of the final designs 
  • Process
  • Final designs
    1. Recipe details page
    2. Overlay to encourage sharing
    3. Search pages
  • Potential improvements
  • Recap 
 
 
 
 

Overview of the final designs

1. Recipe detail page

 
Desktop HD'.png
 
 

2. Overlay to encourage sharing

 
 
 

3. Search pages

Desktop HD Copy 6.png
 
 

 
 

Process

 

Analyze the necessary design elements and goals.

I started by listing out the necessary elements of the design. By doing that, I started to see the relationships among them and then categorized them into groups. On the other hand, since the most important goal of the design is to encourage users to share recipes, I asked questions to understand users’ motivations to share recipes and brainstormed way to achieve this goal.

 
 
 
 
 
 

Ask questions to image users' motivations to share recipes:

  • Why would people share recipes?
    • The food looks amazing.
    • They want the other person to cook it.
    • They want to send a copy to themselves for the future.
  • Who are these people who share and who would they share with?
    • Share with partner/family members/friends to ask if he/she like it.
    • Share with roommate to see if they have the ingredients at home.
  • How would they share it?  
    • Messager, iMessage, Email, Social media...
  • What would they share?
    • A link? A photo? A description? A review?
  • When would they share?
    • On recipe details page? On search page?  
 
 
 
 

Sketch and brainstorm on a high-level.

 
 
 

Low to mid fidelity wireframes to explore different options.

 

 
 
 
 
 

Make the designs pixel perfect:

 
Desktop HD Copy 13.png
 

 
 

Final designs 

1. Recipe details page

 
 
 

Explanations on the design decisions:

 
 
 

2. Overlay to encourage sharing recipes.

Since one main goal of the project is to help users share recipes, I brainstormed ways for more users to share. One effective way would be for those who share, they can receive some rewards. The rewards would drive users to take the action. However, if there are limited resources, there will be no rewards. I realized that I can not depend on other resources to come in to solve the problem. 

Therefore, I turned to the pure design approach. The big red "share" button stays in the bottom of the page as a call to action. At the same time, we can have an overlay that points to the button, so users are forced to see the button and encouraged to take action.

Good for business goal. The overlay highlights the "Share" button and prompt users to take action.  

Delight users. Users can find the overlay annoying and break their flow. To make the interruption the least painful, the overlay can have delightful illustrations. 

 
 

Process:

 
 
Desktop HD Copy 12.png
 
 
 
 

3. Search page has 2 different views to satisfy different user needs.

Detail view: Often times people decide what to eat based on how the food looks. Pictures are important and users like to see them. Therefore, in the detail view, pictures are highlighted. Users can swipe to see multiple photos as they browse through the list. 

List view: For users who just want to find a recipe quickly, the list view allows them to glance through all the options. 

 
 
 

Swipe to see multiple food photos

Switch between detail & list views

 
 
 

Explanations on the decision decisions:

Desktop HD Copy 5.png
 

 
 

Potential improvements

User research can make the design decisions more accurate.  

Since the project was a short design exercise, I made my design decisions based on my personal experience and preferences. For example, I made the assumption that users are most interested in food photos, and would like to see Ingredients before How to and Reviews. User research will be helpful and in fact, necessary to prove or disapprove these assumptions. 

 

If this were a real product, user uploaded photos might not look as good. The decision to highlight photos need to be thought through. 

Quality of user uploaded photos is unpredictable. To highlight user uploaded photos is risky for a real product. If the photos don’t look good, highlighting photos can work against the original intention to attract users. Therefore, for a real product, the solution need to be altered based on the actual situations.

 
 

 
 

Recap

Desktop HD Copy 14.jpg
 
 

More works