Eataly E-Commerce & Responsive Design

Bronte Liu
Aug 27, 2017 · 6 min read

Overview

Eataly is the largest Italian marketplace in the world, comprising different kind of restaurants, food and beverage counters, bakery, retail items, and a cooking school. Eataly is a global brand with stores all over the world. While the physical stores are valuable to the company, its e-commerce site plays an extremely important role to the business as well. Therefore, it is necessary to constantly improve the shopping experience for both its desktop and mobile website customers.


My Role

My role is to rethink and redesign the current Eataly website in hope of providing a smooth and simplified shopping experience while maintaining the identity of the company.


Existing Eataly Website Home Page

Research Methods

A series of research was conducted.

1.Competitive and Comparative Analysis

At first, I conduct a competitive and comparative analysis. It is to compare the features of Eataly to other similar competitors including both physical store and online website.

Competitive Matrix Chart
Comparative Matrix Chart

Based on the above study, it is important to understand what valuable features that other store have and potentially can incorporate to Eataly.

2. Card Sort: 100 Eataly Products

100 Eataly Products

In this research, I provided 100 Eataly products and asked participants to arrange these items in OPEN CARD SORT exercise to come up with their own categories for the products.

Open Card Sort Exercise

I then continued to ask participants to perform CLOSED CARD SORT exercise to further understand the given categories and their sub-categories sorting.

Closed Card Sort Exercise

3.Task Flow

The next study is to investigate web and mobile task flow. I have used a similar competitor Dean & Deluca to analyze. It appears that the steps from home page to order confirmation page took many steps to complete.

Dean & Duluca Web and Mobile Task Flow Study

Then I looked at the current Eataly Website. It took less steps to complete a purchase than Dean & Duluca.

Eataly Web and Mobile Task Flow Study

Based on the card sort exercise and task flow stud, I know that it is important to have clear categories and sub-categories for users to navigate as well as to complete their purchase.

4. Contextual Inquiries & Fields Studies Insights

I went to visit the store Eataly in Flatiron district, observed and interviewed different people there.

Eataly Store in Flatiron District

Key Findings for Eataly customers:

  • value quality and is willing to pay more for it
  • trust the quality of products at Eataly
  • appreciate Italian culture and enjoy Italian cuisine
  • come for their gift needs
  • like to travel the world
  • are experimental cooks

Persona

I have two persona to focus on based on the CONTEXTUAL INQUIRIES & FIELDS STUDIES INSIGHTS. I need to understand their needs to design a website for them. I specially focus on the persona of Chester and Maggie.

Persona: Chester & Maggie (Primary), Chelsea (Secondary)

Needs From Online Store

  • access to variety of food ingredients from different countries
  • quick access to a range of options
  • be reassured of a products authenticity
  • recipe suggestion
  • a feeling of relationship with the brand

Pain Points

  • lack of sufficient product descriptions
  • difficult navigation
  • expensive shipping charges
  • complex return process
  • difficulty finding specialty items

Site Map

I started to study and created the site map of the existing Eataly website with OmniGraffle.

I found that there are too many categories and sub-categories in the current site and with the needs of the persona in mind, I want to narrow down the grouping. So it will be easier for users to navigate.

Revised Site Map

Revised Eataly Site Map

Design Studio

The next step I did sketch to use low-fidelity wireframes to understand the site (desktop and mobile) and also come up with the revised desktop and mobile pages using wireframes.

Wireframe Sketches

1.Low-Fidelity Wireframes

Besides reducing the categories and sub-categories, I also placed “SHIPPING & RETURN” at a more clear location.


In the product page, I have added features of product rating, customer reviews, writing review, and suggested recipes. Users can not only share through Facebook, twitter, and email, but also with Instagram now.

2.High-Fidelity Wireframes

I then used Sketch to do a high-fidelity wireframe and InVision to do a clickable prototype.

High-Fidelity Wireframe


Usability Testing

I asked 4 people to conduct usability testing on the prototype.

Usability Testing

Key findings from usability testing:

  • show how search bar can be functioned (2 user pointed out)
  • Eataly Prime membership is such a great idea (3 users pointed out)
  • It is hard to notice the Shopping Bag after adding the item (1 users pointed out)
  • This website is easy to navigate (4 users pointed out)
  • The categories are clear (2 users pointed out)

Next Steps

After the feedbacks from the users, I want to incorporate their ideas and comments to the next iteration. The overall website layout has still too much information; therefore, this is another task I will focus on, to create a more simple and easy to view website. Eataly Prime Membership I proposed seems to be an attractive feature so that member can enjoy special promotion and free shipping. I hope to add New Arrived Product to attract more new customers to help the e-commerce business.

Bronte Liu

….

)

Bronte Liu

Written by

Bronte Liu

….

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade