UX Recipe Search Results Redesign

Role

UX Designer: User research and interviews, competitive analysis, persona generation, wireframing, visual design comps, and presentation design.

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.

Initial Content EvaluationProblem

Solution

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

Process

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 insights3research

Primary Persona Based on the User Research4persona

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


Competitive Analysis6research.png

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 Process

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 Sketches8sketches

High Fidelity Wireframes9wireframes10wire2

Responsive Mobile View11mobile

 

Quick Prototype2solution

This slideshow requires JavaScript.

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.

Monetization Opportunity #113monetizationopps1

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.

Monetization Opportunity #213monetizationopps2