Eataly's website
re-design

2020-2021
User Experience, User Interface Design
Preview of Eataly's new website on desktop and mobile.
Eataly is an international marketplace, selling high-quality Italian food online and in over 40 stores worldwide. Its online presence before the redesign comprised of two separate websites: Eataly Today, for purchasing fresh groceries, and Eataly.net, for booking classes or events and buying non-perishable food.

OBJECTIVES

The main goal of the re-design was combining the two websites into a single platform.
A breakdown of the project objectivesA breakdown of the project objectives

DEFINITION OF PAIN POINTS

Building upon existing research, I was able to narrow down the main pain points for online customers and stakeholders, which served as a foundation for the following phases of the project.
A breakdown of the pain points from the users' perspectiveA breakdown of the pain points from the users' perspective

USER INTERVIEWS AND SURVEYS

Through live user interviews and questionnaires, I gathered qualitative and quantitative information about potential customers, their shopping habits and their familiarity with the brand. This sample of users also participated in following tests.
Results from user interviewsResults from user interviews

USER PERSONAS

I used the data collected in previous stages to define User Personas, which allowed me to split our target audience into macro areas according to personality, behaviour and needs.
Examples of personasExamples of personas

CARD SORTING AND SITEMAP

In order to build a more user-friendly site architecture, I asked a sample of potential users to classify existing and desired categories of products into macro groups and name them. 
The information gathered through the card sorting exercise was useful to improve the existing categorisation. This allowed the creation of a draft sitemap, that later evolved into the definitive one with the support of internal and external SEO analysts.
Sitemap

USER FLOWS

Due to the complexity of the portal and the quantity of possible interactions, I defined multiple user flows corresponding to the core areas of the website (i.e. zipcode selection, checkout, adding products to the cart, log-in and registration…). You can see an example below about the checkout process:
Example of user flow

WIREFRAMES

In order to define the structure of the webpages before committing to a definitive UI, I created wireframe versions of them, both for mobile and for desktop. For some pages, Eataly already had some wireframes and UIs created by an external agency. For the sake of this presentation, I will only include the wireframes and UIs that I either designed personally or re-designed according to business needs and/or to improve the UX.
Examples of wireframesExamples of wireframes

UI KIT

The creation of a User Interface kit according to the Atomic Design principles was useful not only to create a coherent design system throughout the website, but also to speed up the design process.
Design system breakdown

CATEGORY PAGE

Category page screensCategory page screens

PRODUCT DETAIL PAGE

Product detail page screensProduct detail page screens

CART

Cart screensCart screensCart screens

REGISTRATION & LOG-IN

Registration and log-in screensRegistration and log-in screens

CHECKOUT

Checkout screensCheckout screens

USABILITY TESTING

In order to test the usability and accessibility of the new design, a remote usability test was run on a sample of 12 potential users. The main objective was to identify recurring problems related to the execution of specific tasks.

Considering the website had not been developed yet, the test was executed thanks to a prototype created in Adobe XD. The test focused on three main sections of the website: the product category page, the cart and the checkout. 
Usability testing resultsUsability testing results

ACCOUNT AREA

Account screens

SEARCH AND RESULTS PAGE

Search screensSearch screens

TRANSACTIONAL EMAILS

Transactional e-mailsTransactional e-mailsTransactional e-mails
📚 CURRENTLY READING...
Uncanny Valley
Anna Wiener
🍿 CURRENTLY WATCHING...
The Handmaid's Tale
Hulu
🎧 CURRENTLY LISTENING TO...
The Bonny
Gerry Cinnamon

DON't be shy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
© Copyright 2022 Serena Ripoli
Behance
Linkedin