Epicurious

A Student Project Inspired by a Personal Passion

I've always loved cooking and baking. So when I had the chance to pick a topic for a solo project at General Assembly, I was drawn to the idea of building a feature for a recipe website or app. While I know many cooks rely on digital recipes, I also expected that some still preferred to use physical cookbooks (even if only to avoid spilling stock on their screen). I saw an opportunity to differentiate digital recipes from their print counterparts by creating a more interactive and engaging experience.

Why Epicurious?

Epicurious, a digitally-native food media brand, has a dedicated user base of home cooks. While the brand is new, the site also contains classic content from Gourmet magazine. This mix of innovation and tradition made the brand a perfect fit for this project.

Design Process

User Interviews

Contextual Inquiry

Empathy Mapping

Sketching

Information Design

Iconography

Rapid Prototyping

User Testing

Step 1: Observing a Common Kitchen Conundrum

Images from home cooks

Research Goals

I wanted to better understand the cooking process, and the problems that cooks face when following recipes. There were four key topics I wanted to explore: the cooking process; motivations for recipe usage; saving and organizing recipes; and how users adapted or changed recipes.

Interviews and Contextual Inquiry

The research process included 7 user interviews, over the phone or in person. Users were defined as anyone who uses digital recipes. Four interviewees were Epicurious users. My interviews included aspects of contextual inquiry: One interviewee made a pumpkin cheesecake as we chatted; another showed me her favorite, well-worn cookbook.

Pain Point Identification

“I’m running over to the grocery store. I misread the directions and need some frozen whipped topping”

-An interviewee, while preparing dessert for a dinner party

The quote above showcases a scenario that home cooks told me they commonly encountered: In the middle of making a recipe, they would realize they were missing an ingredient. This was a problem I was excited to solve.

Step 2: Understanding the Context of Cooking

Data Distillation

Before diving into solution design, I wanted to ensure I had a complete appreciation of my user. Using empathy and affinity mapping, I found three key users insights.

Insight #1: Cooking is a Hassle

Real Talk: "Being lazy drives a lot

of my decisions."

Though the users enjoyed cooking, they still found cooking stressful. They looked for fast and easy recipes, and tried to make as few grocery store trips as possible.

Insight #2: Confidence is Key

Real Talk: "I feel more secure when

following a recipe."

Users desire a sense of pride in their cooking, particularly when they’re cooking for people they care about. They view cooking as a way to show their love or dazzle friends.

Insight #3: Technical Concerns

Real Talk: "I use my laptop, even though it’s a risk to my laptop."

Users worried about damaging laptops, tablets and phones with food, but cook with them in the kitchen anyway (laptops were the most popular device).

Persona of a Primary User

Meet Maggie Cole - 36, Louisville, KY

• Likes to cook, but struggles to find the time in her 60+ hour workweek

• Cautiously keeps her laptop open while cooking to use recipe sites such as Epicurious

• Proudly shares her cooking/baking with her husband, friends, families and co-workers

• Considers herself an intermediate level cook and baker; relies on recipes to ensure success

• When she's missing an ingredient, she'll Google substitution options

With Maggie in mind, I realized that a successful ingredient substitution feature must prioritize speed, minimize human-computer interaction, and build a trusted relationship with users.

Step 3: Transforming Insights into Solutions

Maggie's Scenario

She's in the middle of baking Epicurious's Bourbon-Pumpkin Pie for Thanksgiving dinner, when she realizes the recipe calls for sour cream. She doesn't have any sour cream on-hand, and doesn't know what she can successfully replace it with. She has two options: try a Google search to find the right ingredient swap or go to the grocery store.

A Simpler Solution for Maggie

I knew I could solve Maggie's problem by allowing her to access ingredient substitution suggestions directly on Epicurious's recipe pages. After sketching some user flows and testing a couple of paper prototypes, I uncovered an intuitive mircointeraction to help her out.

Step 4: Making a Clear Microinteraction

Prototype, Test, Iterate

I needed to make my swapping microinteraction easy to discover and understand. At the same time, I didn't want to intrude on the recipe content.

I tried multiple designs to balance these competing priorities, prototyping and testing nine different iterations of my starting screen before deciding on a final version, at left. This design includes an equal sign swap buttons next to each ingredient, and a one-line explanation of what the button did.

To see earlier iterations, view the slides.

*My design is consistent with Epicurious's recipe page UI, but I moved the recipe header closer to the ingredient list to give users more context about the screen

When Maggie clicks ,

Epicurious's swap suggestions appear below the ingredient name. She can either compare her swap options, or click to immediately make a swap.

If she clicks next to Greek yogurt,

Greek yogurt will replace sour cream in the recipe, and will appear in bold to highlight that it's a swap. Maggie will also be able to give the swap a rating.

Step 5: Designing a Useful Swap Comparison Chart

Content Strategy

Maggie can view more about the swap suggestions by clicking on "compare swap options." But what types of information about these swaps does Maggie want to see? I relied on my research to brainstorm potential content topics; then I used testing to discover which content was most important to cooks.

Key Content Topics:

How to use the swap
Best used for
User swap rating

Unnecessary Content:

Ingredient overview
Don't use for
Texture notes

Sketchpad

The Spoon Rating System

To help build trust and accountability, I wanted users to be able to rate ingredient swaps for others to see. Epicurious uses a four fork system for recipe ratings; to differentiate swap ratings, I creates a four spoon rating system for swaps.

Sketch App

Result

I eliminated the need for a time-intensive Google search (or grocery store trip) with a microinteraction that only takes 2 to 3 clicks.

Try the InVision prototype.

Interested in more details about this project? Or just want to share favorite pie recipes?

Design and food are some of my favorite things, so send me a note!

Disclaimer: This was a student project for General Assembly, and has no actual affiliation with Epicurious. Any Epicurious assets were used for educational purposes only.