Revamping the
e-commerce experience for a grocery retailer

2020-2021
User Experience, User Interface Design
Brand: Eataly
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.
TIMELINE
1 year
ROLE
UX/UI Designer
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
TRANSACTIONAL EMAILS
Transactional e-mailsTransactional e-mailsTransactional e-mails