Case Study

New Shop by Ingredients Feature for Recipe Followers

 
Project_Logos-17.png
 

Client

Eataly

Timeline

2 weeks

Role

UX Researcher
UX/UI Designer
Market Analyst

Tools

Illustrator / InDesign
Sketch + Craft
inVision
Omnigraffle
 


 
 
ProjectBrief_Icon-09.png
 

Project Brief

 

In this exploratory project, my team and I were challenged with redesigning Eataly’s online experience based on opportunities derived from thorough research analysis of Eataly’s brand, user base and website. 

Eataly has partnered with Foodie Inc (Susana Charm, James White, Tawona Chimimba, Evan Tyerman to conduct full research analysis of their existing website with the goal of site redesign and optimization based on user insights.


 
Problem_Icon-10.png
 

The Problem

 

Through our findings, Eataly’s customer base value quality foods and great customer experience. Their needs seem to be met with the in store experience, however their online experience is not ideal, if they even use the website at all.

Their primary customer base wants to buy quality food items and find unique and inspiring recipes through their trusted culinary source, Eataly, however the website experience is difficult to navigate and search. How might we redesign the main navigation structure of Eataly’s website to provide a better experience for their users?


 
Opportunity_Icon-11.png
 

Opportunity

 

Streamlining Eataly’s “Learn” & “Shop” experiences.

Enhance the experience of Eataly’s Recipe feature and integrate it with their online food shopping experience.

With a better navigation and “Add Recipe Ingredients to Cart” feature, not only will there be better user engagement but potential increase in online food shopping with Eataly’s recipe followers.


 
Deliverables_Icon-12.png
 

Deliverables

 

Research Report | Competitor Analysis, Heuristic Analysis, Competitive Analysis, User Research, Site Map, Inventory List, Task Flow, Next Steps

Specification Documentation | Research Insights, Site Map, Inventory List, Task Flow, User Flows, User Journey, Annotated Wireframes, Usability Testing, Invision Prototype, Next Steps

Client Presentation | Market Overview, Problem Statement, User Personas & Journey, Research Insights, Opportunities, Design Strategy, Usability Test Insights & Metrics, Prototype Demo, Next Steps


 
Discovery_Icon-13.png
 

Discovery Methods

 

Contextual Inquiry
In Store/Online

Screener Survey | 21

Site Usability Tests | 4

Heuristic Evaluation

Competitive Analysis

Card Sorting | 12

Site Mapping

User Journey

User Flow

Feature Prioritization

Mid-Fidelity Wireframes

Paper Prototype

Interactive Prototype

Proto Usability Tests | 8

Iterations | 2

 


 
Solution_Icon-14.png
 

The Solution

 

An overall goal of an Eataly Online Shopper is to look up recipes and purchase to ingredients for it.

With Eataly's enhanced recipe browsing and new Shop by Ingredients feature, their online shoppers would be able to purchase ingredients with ease and potentially gain new customers through their recipe followers.

 

Website_Banners-23.png

Key Features:

  • Reorganized main navigation categories

  • Direct link to recipes

  • Filters on the Magazine page & favoriting

  • New feature integration: Add available ingredient to bag

  • Additional filters for main food categories

  • Related Recipes feature under food item

 
DividerBanner-07.jpg

The Research

 

 

Brand Strategy

Eataly is the largest Italian marketplace (food hall) in the world, comprising a variety of restaurants, food and beverage counters, bakery, retail items, and a cooking school.
 

Eataly’s Value Proposition:

Choice | We offer a diverse selection of quality food and drink.

Accessibility | We are dedicated to offering the best products at the lowest possible price points.

Knowledge | We feel that it’s not just important that we know everything about what we sell and serve but that you also learn about the products we are so passionate about. We share with you the stories of the people and places behind all that we offer.The more you know, the more you enjoy.


Competitive Analysis:

We identified the top businesses that more or less position themselves within Eataly’s market ecosphere.

 

Eataly’s Market Landscape:

 
1_P7iDZn8lSWw19EEuJdBTiw.png
 

Market Positioning:

In the Competitor Matrix below, we have further evaluated Eataly’s market landscape in comparison to it’s direct competitors.

 
1_UiLcrJI2br1pDuDwspJUIw.jpeg
 

User Personas:

In conducting user research, we identified the following user personas of Eataly’s online user base. Maggie is identified as the Primary User and Chelsea as the Secondary User of Eataly’s website.

1_paLBM4iuezByOKlQIDGeSw.jpeg
1_jLZ_zhaJrQjxWu3BYVHhSw.jpeg

Problem Statement

Through our findings, Eataly’s customer base value quality foods and great customer experience. Their needs seem to be met with the in store experience, however their online experience is not ideal, if they even use the website at all.

Maggie wants to buy quality food items and find unique and inspiring recipes through their trusted culinary source, Eataly, however the website experience is difficult to navigate and search. How might we redesign the main navigation structure of Eataly’s website to provide a better experience for their users?


Key Insights:

1_GaJORJRkZ95VX9DKZpiVVQ.jpeg

Competitive & Heuristic Analysis

Key insights from Competitive Analysis of website attributes was that both competitors had easier to find recipe sections, clearer food category organizational structure and better search functionality. In addition, Eataly’s competitors had overall, better buying experience with more product details.

1_wU6X1vzw_F6xGaxac2UVRA.jpeg

User Research

Screener Survey:

We received 21 submissions for our screener survey in recruiting participants for Contextual InquiryUsability testing and Card Sorting.

User Criteria:
• Uses Eataly website and online store
• Uses competitor website and online store

Contextual Inquiry:

Of the participants we observed, we found that in-store shoppers overall enjoy the experience. They normally go to the store to buy what they need but don’t really use the online website. The participant we observed that uses Eataly’s website mostly shopped for gifts and does not use the website often as she find it confusing to navigate or find something specific that she is looking for.

1_aJHpYbzWWcBN0cDEIDGhKA.jpeg

Online Observations
• People go on website for gifts
• User is looking for a specific item
• Trouble filtering recipes
• Trouble finding ingredients for recipes

In Store Observations
• Restaurants were filled with people
• Not that many people in line buying groceries
• Come to store for specific items
• Looking for fresh products
• A lot of tourists
• Busy open market place to eat and explore


Usability Testing of Current Website:

In testing 4 users, we found that Eataly’s website was difficult to navigate in the way that the item categories were named and organized. It was particularly difficult to find recipes as they were hidden under the term “Magazine” and there was no way to filter different types of recipes.

1_-oyzWt9KdatvKjiK_pUUlg.jpeg

We tested with 4 participants. 3 users with Eataly’s website and 1 user with WholeFood’s website, a main competitor.

Key Results:
• Eataly Website: 1 out of 3 users completed all tasks
• Wholefood Website: 1 out of 1 user completed all tasks

Task Scenario:
You are at work and want to look up a few things on your favorite food website

Core Tasks:
1. Find a pasta recipe
2. Buy an ingredient from that recipe
Secondary Tasks:
3. The holidays are coming, you want to start looking up gift options for 3 different people: Your pasta loving boyfriend, Your boss, Your Italian nonna
4. Find a cooking class for you and your friend this weekend at the Flatiron location

Card Sorting:

In conducting card sort testing, we were able to pin point various areas of confusion in the main navigation and areas of discrepancies. This is based on how users highly group different items and how they named different grouped categories. We chose to conduct a Hybrid Card Sort in our 3rd round of user test because of the user feedback we found from our Usability testing, that recipes are hard to find and filter. We wanted to pin point whether users would create a new category or categorize these items under the current categories. Our research team used OptimalSort platform for users to sort 69 item categories.

1_CX-E9JFUQKfY0HEMXuWmtw.jpeg
1_6GHJq5hHVTSr-ur0IzHO8w.jpeg

Key Insights:

1_ITmpJk51jp91OM_mG4x6PQ.jpeg

1_vxxihAuPhrgrc3o27l3BTQ.png

 

Opportunity

Streamlining Eataly’s “Learn” & “Shop” experiences.

Enhance the experience of Eataly’s Recipe feature and integrate it with their online food shopping experience.

With a better navigation and “Add Recipe Ingredients to Cart” feature, not only will there be better user engagement but potential increase in online food shopping with Eataly’s recipe followers.

 
DividerBanner-07.jpg

Prototyping

 

 

Design Strategy & Feature Prioritization

  • Change main navigation categories
  • Change one direct link to recipes
  • Add filters on the Magazine page & favoriting
  • New feature integration: Add available ingredient to bag
  • Additional filters for main food categories
  • Related Recipes feature under food item
Initial Paper Prototype

Initial Paper Prototype


2nd Iteration Mid Fidelity Wireframes

2nd Iteration Mid Fidelity Wireframes


1st Iteration | Mid Fidelity Wireframes
1 out of 4 (25%) users completed all tasks
3 out of 4 (75%) users failed task 3 of adding a ingredient to cart

Key Insights:
• 75% of users missed or did not understand filtering by “Ingredients available for purchase”
• 75% of users did not under the concept of adding ingredients from list to cart due to button selection and with no explanation
• 75% of users found the term “Specialty Foods” a little confusing based on what they needed to purchase


2nd Iteration | Mid Fidelity Wireframes
4 out of 4 (100%) users completed all tasks

Key Insights:
• 75% of users missed the “Special Ingredients Available for Purchase” filter option
• 75% of users didn’t fully or immediately understand what the dash signified or does when clicked


Key Performance Indicators

From 25% to 100% of users were able to complete Task 3 in adding ingredients to their cart after feature design iteration
From current site to final prototype, TCR went from 0 to 100% of users being able to find recipes in the top fold quickly, filter through recipes efficiently as well as identify and purchase available ingredients from Eataly’s site.

User Flow

The new user flow is over 50% in less steps and pages for a user’s experience in task completion!


Website_Banners-23.png

Further Considerations

This was a very research heavy project. Although long and tedious, my team and I found invaluable information in conducting such thorough analysis. Not only did it help me pinpoint major problem areas of the current site experience, it helped me discovery a major opportunity that serves the needs of both users and business goals.

In terms of next steps, I would recommend our client implement the navigational changes and test the new feature integration in beta to build user adoption and measure the success of sales conversions of online purchases through recipe followers. In the next phase of design, based on the last round of user testing, I would research more filter features and consider adding new features such as “Cart Preview Pane” to further enhance engagement of user.