Yummly Web-App Design

Overview

When Yummly came to us, they had an incredible algorithm for diving deep into a wealth of aggregated recipe content. If you needed to find the best gluten-free low-carb vegan chocolate chip cookies, Yummly had you covered. If you were lactose intolerant and never wanted to see a recipe with dairy in it, you could set it up and be on your way. However, if you were not a power-user & just looking for what to make for dinner, you were out of luck.

Role:
UX Lead
Date:
2012
Agency:
Cuban Council
Client:
Yummly

The Challenge

Yummly’s initial design was barely more than a proof of concept that included a minimal homepage that borrowed heavily from Google Search & a robust (overwhelming) set of search filters. Our goal was to take their incredible technology and layer on a simple, visual interface to humanize the content.

The Solution

Working from the ground up to create a web-application that was simple, yet powerful. We began with user research, which informed our decisions, and began to create an experience that would work for multiple user mindsets. Page designs were simple, yet flexible, designed to work just as well for low content as ideal cases. User flows (over a traditional sitemap) were focused with the goal of reducing clicks and increasing engagement.

//a.storyblok.com/f/64126/2007x2694/5f0b151ec9/yummly-solution.jpg
//a.storyblok.com/f/64126/1625x1191/2a38123b6a/yummly-feature-homepage.png
Feature:

Homepage Concepting

The homepage was the initial touch-point for both first-time & returning users. It had to set up what Yummly is, but it also had to get users into the content. We had to create a page that could work hard. Sketches of several different approaches were made – “Recommendation Engine” grouped liked concepts in a Netflix style (kale & garlic side-dishes), “Friend Feed” populated the homepage with content liked by users you follow (or power users for those new to the experience), “Food Trend” was an approach that put a weekly focus on an in-season ingredient (rhubarb) or a specific event (Fourth of July BBQ).

Feature:

Designing for Mindsets

We did not design against personas, rather, we designed against different user mindsets. With mindsets we acknowledged that users do not perform a task one specific way and may even change their approach several times in a single session.

  • Search for the Best: “I want to make the best chocolate chip cookies”
  • Looking for Inspiration: “I just want to see lots of great photos to inspire dishes I make in the future”
  • What can I Make from my Fridge: “I have chicken & mushrooms that I need to use tonight, what should I make”
  • Taste Profile Builder: “I love that Yummly learns what I like & tailors recipes for my needs showing me recipes that I want to actually make”
  • Recipe Box: “I use Yummly to store all of my recipes, it makes it so easy to come back to & find what I am looking for”

//a.storyblok.com/f/64126/915x742/2fd0c3056a/yummly-feature-mindsets.png
//a.storyblok.com/f/64126/952x896/eec9fed1aa/yummly-feature-yumbutton.png
Feature:

The Yum Button

Each recipe on the previous site had no less than 5 interaction points - A “Save” button, an “I’m Interested” button, a rating, Facebook “like” & email. These buttons were vague with no clear distinction (should I click save, like, or, I’m interested?) and once interacted with, there was no easy way to find again.

Our solution was to combine as many features as possible into one branded experience. Clicking “Yum” would save the recipe to your profile, it would signal to others that you are interested in the recipe, it would populate on the Facebook social graph & increment the yum counter on the recipe.

Feature:

Onboarding

Yummly is a powerful application & becomes more powerful the more you interacted with the platform. To help facilitate we created a light-touch onboarding that began to populate your preferences upon registration.

Understanding that onboarding doesn’t end after the first session, micro interactions were designed to increase engagement, time on site and enjoyment

//a.storyblok.com/f/64126/1393x1100/fbc6ac2eb5/yummly-feature-onboarding.png

Final Design

//a.storyblok.com/f/64126/1200x2840/7e8fa6d6ef/yummly-final.png

Not designed by Sean Curran

My Role

I was the sole UX designer. I worked closely with our design team and the leadership team at Yummly. Working with the Yummly team was very collaborative, often including sketches that took over walls that became more and more refined as the project moved forward.