Eataly Responsive Website Redesign

Please note this was a concept project undertaken as part of the UX Design course at General Assembly and is not affiliated with Eataly.

Overview

I was tasked with a responsive redesign of Eataly's website. I was part of a team for the research phase but executed design independently.

Background

Eataly, a purveyor of Italian cuisine, is a foodie destination in major cities across the globe. Eataly offers a unique shopping and dining experience at each location.

Scope

Website Redesign

Team

Madeleine Bustamante
Joyce Zhang

MY Role

Researcher
UX/UI Designer

Research

contextual inquiries

User
Interviews

Heuristic
Analysis

Usability
Testing

Card
Sorting

Competitive Analysis

Contextual Inquiries & User Interviews

The first step we took was to gain a deeper understanding of the Eataly experience and customer values. As a group, we visited Eataly stores to observe and converse with customers about their in-store and online experiences. Next, we interviewed frequent visitors of Eataly.

Here's what we learned:

FOODIES

Food is a spiritual and cultural experience for Eataly clientele; a means of connecting with others.

UNIQUE & QUALITY

Consumers perceive Eataly to be a purveyor of rare, premium products. They tend to love dining out and creating new dishes at home.

authentic

Italians & non-Italians alike go to Eataly for real Italian fare.  

D.I.Y.

For Eataly lovers, the experience does not stop after the meal. People visit Eataly to eat at the restaurants, then often want to recreate the same dishes at home.

PREFER IN-STORE

In-store customers rarely order from Eataly online. When they previously attempted to use the website, they did not consider it a positive experience, especially when trying to seek out specific products.

Usability Testing & Heuristic Analysis

In order to assess the functionality of Eataly's current website, we performed usability testing and completed a heuristic analysis across key areas of the site. The results concluded:

clutter

Busy Layout with overwhelming amount of options. The important information users need is often presented secondary, often masked by large images, unnecessary spacing, and repetitive promotions.

navigation

Eataly has complex, confusing global and service navigation. It holds 10 options in the global and 10 options in the service navigation.

Findability

Users have difficulty finding what they are looking for, particularly locating specific products, brands, recipes, restaurants and reservations. 

searchability

Semi-functional searchability, where the majority of searches were not producing any results.

It was clear that the delightful and beautiful in-person experience was not translating to Eataly online.

existing site: home page

Existing site: finding recipe & shopping ingredients

existing site: shopping product

Competitive & Comparative Analysis

We performed analysis with brands in the similar high-end Grocerant (grocery + restaurant) sector, such as Whole Foods, Le District, and Dean & Deluca, and with those offering high-end speciality kitchen retail, such as Williams-Sonoma. These businesses offered a much simpler approach in layout and navigation with accurate product searchability.

On desktop, Whole Foods offers a shoppable Recipe section, where users can add ingredients from each recipe to their cart. This got us thinking, if Eataly customers want to recreate Italian dishes at home, then why was that experience so difficult to execute on Eataly's website? Eataly was missing out on a natural opportunity to increase sales while improving the ease of trying new Italian dishes at home for their customers.

Personas

Based on our research, I developed two personas - Maggie, our primary persona, and Chelsea, the secondary.

MAGGIE

Designer

“My whole life revolves around food, whether it be dining out or cooking at home for family and friends.”

Bio

Maggie is a New Yorker, who works in fashion. She has a busy life, but always makes time for socializing with friends in her free time.

BEHAVIORS & HABITS

She loves going out to eat, as much as she enjoys entertaining and hosting dinner parties at her apartment. Maggie enjoys exploring and learning about foods from different cultures, especially Italian. She thrives off tasting new dishes and trying out recipes.

Pain Points

Enjoys the challenge of attempting new recipes and recreating dishes, but gets irritated by the hunt for difficult to find, specialty ingredients

Often lacks the time it takes to plan and shop for the preparation of a gourmet meal

Needs

An simpler way to recreate dishes

An quicker way to shop recipe ingredients, especially those that are hard to find

Chelsea

Advertising

“I love New York, but every now and then I miss the tastes from home”

Bio

Chelsea was born in Sicily. She moved to New York after university to launch her career. She now considers herself a New Yorker, but still yearns for the authentic Sicilian food from her childhood.

BEHAVIORS & HABITS

Chelsea frequently seeks out authentic Italian ingredients and restaurants to fulfill her nostalgia. She would never use Ragu or Kraft Parmesan cheese in her kitchen. Chelsea enjoys gifting Italian wines, cheese, and olive oils.

Pain Points

It’s a hassle to find and buy specific Sicilian food products and dishes she craves

Feels she spends too much time traveling to and shopping at specialty stores in order to find rare ingredients and gifts

Needs

An easy way to order Italian ingredients, products, and gifts for quick pickup or delivery

Problem Refined

All of our research concluded that Eataly customers' online experience does not match the highly differentiated experience in-store. Users have difficulty finding products, recipes, restaurants, and effectively navigating throughout the website. I needed to consider how I could create an online experience that supports and complements what makes Eataly’s brick and mortar special.

Design

Information
Architecture

Ideation

Wireframe

Usability Testing

Iteration

Prototype

Prioritization

It was clear there were a long list of areas that should be tackled. The key ones include finding recipes then ordering ingredients, shopping for product, checkout process, finding restaurant detail, making reservations, and gifting. I decided to prioritize finding recipes then ordering ingredients and shopping for product.

Information Architecture

During the research phase, we had performed open and closed card sorting using Optimal Sort, in order to understand how users could most efficiently navigate the site. We had users sort 100 of Eataly's products and services into categories. This gave insight into how users categorize information in a way that makes sense to them, which in turn informed the new site navigation.

In an effort to remedy the repetitive nature of the homepage and simplify the experience, I tapered down the number of service navigation options from 10 to 4. The categories of less priority were transferred to the footer.

I moved the Recipes section, previously found within the homepage content, into the global navigation to increase the findability. In order to reduce the breadth of the global navigation, I tucked every e-commerce item under a Shop category. which allowed me to significantly reduce the category options from 10 to 4. 

Task Scenarios & Ideation

I designed for two tasks flow, while considering the most relevant personas for each. I created tasks backed by stories that I would later test for usability.

It’s Tuesday evening and Maggie decides to make a plan for the upcoming dinner party she's hosting for three friends on Saturday. She remembers having a delicious mushroom risotto dish last time she dined at Eatlay’s Risio E Risotto restaurant in NY Flatiron. She visits Eataly’s website to find the recipe and order the necessary ingredients to recreate the dish.

Chelsea's been dreaming of home and is craving the taste of her mom's homemade Shrimp Scampi. She visits Eataly’s website to find a purchase some linguine.

I started designing for these tasks by ideating and sketching out my ideas on paper. Next, I moved to Sketch for mid-fidelity then hi-fidelity wireframes, while usability testing and iterating on each round.

Experience Map

Maggie's previous experience to locate the Mushroom Risotto recipe was an arduous one, resulting in a rollercoaster of emotions.

Story Map

I drew up a story map of Maggie's journey from discovering the Risotto recipe at Eataly to cooking it at home for her friends.

Task Flow

I redesigned the task flows for product shopping and recipes. Show below, what previously took users 36 screens and 55 actions to find the Mushroom Risotto recipe and add ingredients to cart, was reduced to 5 screens and 6 actions.

PREVIOUS TASK FLOW

REDESIGNED TASK FLOW

Sketches

I started the screen design process by sketching out variations of Maggie and Chelsea's task flows. Below is Chelsea's product purchase flow.

Midfi Flow

Home

I simplified the layout and navigation, as well as gave the UI an updated, less harsh aesthetic. In order to improve search functionality, I would recommend implementation of proper tagging within site.

Recipes

Shop

My new design reduced unnecessary wording in prime real estate, while positioning important elements (product name, price, add to cart buttons) above the fold.

Desktop

Prototype

Final Thoughts

The updated navigation, homepage, recipe section, and product shopping section received positive feedback in user testing. My next steps would be to tackle the cart to order completion flow, along with the Restaurants and Classes & Events sections.

KAREN CHRISTOPH © 2018