Recipe Results UX Case Study

Project

For a recent job application, I was asked how I might redesign Google’s recipe search results. The following was completed in one day.

Role UX designer and researcher
User research and interviews, competitive analysis, persona generation, wireframing, visual design comps, and presentation design.

Tools Pen & Paper, Illustrator, Google Slides

Problem  Do you ever google a recipe and become overwhelmed by the number of results? Do you typically look for photos and tire of clicking on text link after link to find the ratings, reviews, and ingredients? You’re not alone! Google search results can be too numerous, text-driven with small images, and hard to navigate.

Solution  Redesign Google’s food recipe search results page in order to create a more delightful, simple, and useful user experience.


Process

Initial Content EvaluationProblem

User Research

12 interviews conducted

  • All female
  • Ages ranging from 24 to 65+
  • 4 mothers|
  • 3 are college students
  • 1 is retired
  • 4 work full-time
  • All are computer savvy and have busy lives, preferring not to spend a lot of time searching for a recipe

Interview insights

3research


Primary Persona

4persona


Online Research

Research: Existing Content Evaluation5research


Competitive Analysis

  • Competitive search engine results were mostly image-driven, featured ratings, and highlighted several larger previews along the top.
  • Yahoo leads with an image, simplified text, ratings, reviews
  • Duckduckgo features an image only grid option that includes simplified text, ratings, ingredient previews
  •  Bing has a great comparison tool feature where

6research

7research

Additionally, I took a look at recipe search results on the most popular food recipe websites, based on stats: All led with images, ratings, number of reviews, some included time required, servings, calories, or recommendations.


Design

Product Design Process

Kristen wants her recipe searches to be easy, show images and ratings, likes comparing recipes for ingredients and reviews.

Based on Kristen’s preferences, here are the resulting UI features:

  • Search results should include:
    • Images
    • Ratings/Reviews
    • Easy > Difficult
    • Time to cook
    • # of Ingredients
  • Hover microinteractions shows a preview of each page so Kristen doesn’t need to click through several pages to preview
  • Comparison feature allows Kristen to quickly compare the photos, ratings, ingredients, and other key points

Initial Sketches

8sketches


High Fidelity Wireframes

9wireframes10wire2


Responsive Mobile View

11mobile

 


Prototype2solution


Monetization Opportunities

Monetization Opportunity #1

Google Adwords and Advertisements can still be utilized in this new layout in order that the results page is still profitable for Google.

13monetizationopps1

Monetization Opportunity #2

Google Adwords and Advertisements can still be utilized in this new layout in order that the results page is still profitable for Google

13monetizationopps2


Summary

Results? I got the job!