Revamping the e-commerce experience for a grocery retailer

OBJECTIVES

The main goal of the re-design was combining the two websites into a single platform.

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' 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.

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.

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.

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:

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.

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.

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.