LinkedIn cover - 1.png

OVERVIEW

Together with my colleague Julieth Fajardo, for this project we decided to evaluate the usability of the website of the Colombian supermarket chain Éxito.

MY ROLE

Research, user flows & stories, wireframing, visual design, prototyping

GOAL

In a three week timeframe we evaluated the usability of the chosen flow in Éxito's website and propose future improvements.

YEAR

Spring, 2020

THE PROBLEM

Exito is the largest supermarket chain in Colombia, has multiple locations around the country and South America. The store sells a wide range of food in addition to department store type products ranging from electronics to furniture. We chose this product because the usage of their website increased in the last year. Therefore, the problem with Éxito's website is that they are trying to display the largest number of items to its users in a way that it overlaps all important information, such as new items, sales and weekly price drops.

TASK FLOW

For the evaluation, we decided to focus on the Looking and Purchasing an item task flow, as it's one of the major opportunities people are expecting from the website when using it.

We notice it was hard to understand the sales going, or where to look for items easily by category. This is a major problem important to be fixed and should be given high priority. 

HOME SCREEN

Rectangle-1_edited.png

SEARCH ENGINE

busqueda_edited.png

EXITO'S CLUB PRICES

Rectangle_edited.png

HEURISTIC EVALUATION

For this task flow we evaluated 9 out 10 of Nielsen Norman Heuristics. We decided to focus on 5 out the 10 evaluators.

HEURISTICS

Visibility and system status

Match between system and the real world

User control and freedom

Consistency and standards

Aesthetic and minimalist design

Help and documentation

SEVERITY RATING

0 = There is no usability problem

= Cosmetic problem only; does not require fixing unless extra time is available

2= Minor usability; low priority

3 = Major usability problem; high priority

4= Usability catastrophe; imperative to fix

THE OVERALL USABILITY SCORE 3

REDESIGN

After an overall usability score of 3, meaning the website counted with major usability issues that affected the overall usability in the task of looking and trying to buy an item. We decided to prioritized all the improvements according to the severity of the issue, the amount of effort required to fix it, and the overall impact on the product.

1. For visibility and system status we decided to set a hierarchy between the products, brands and website promotions. This way the website looks more organized and have more white breathable space in between.

Screen Shot 2021-03-11 at 4.42.28 PM.png

Before

After

2. To keep consistency and standards, we kept all the images for sales and weekly deals align to the centre so it is easier for the user to read them and scan the website. We redesign the action buttons to a more elegant and simple design using the brand colours so it goes with the design of the entire website.

Screen Shot 2021-03-11 at 5.50.22 PM.png

Before

After

3. We set one defined style throughout the entire website. For this step we needed to standardized button styles throughout the website. We took into consideration the importance of the store's discount so we focused on displaying discounts and sales with the same style improving style hierarchy throughout the site

Screen Shot 2021-03-11 at 6.33.07 PM.png

Before

After

You can go through to our Figma prototype 

Frame 1.png

Our main goal was to improve the searching and purchasing of a product task flow; however, we tried to implement all the changes seamlessly, adapting the interface to today's user needs.

All the interface elements were collected into a UI Library, which could be potentially used to design the rest of the application.

Thank you!