Eataly's website

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, for booking classes or events and buying non-perishable food.


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


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


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


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


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.


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


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


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 screensCategory page screens


Product detail page screensProduct detail page screens


Cart screensCart screensCart screens


Registration and log-in screensRegistration and log-in screens


Checkout screensCheckout screens


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 screens


Transactional e-mailsTransactional e-mailsTransactional e-mails