Together with my colleague Julieth Fajardo, for this project we decided to evaluate the usability of the website of the Colombian supermarket chain Éxito.
Research, user flows & stories, wireframing, visual design, prototyping
In a three week timeframe we evaluated the usability of the chosen flow in Éxito's website and propose future improvements.
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.
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.
EXITO'S CLUB PRICES
For this task flow we evaluated 9 out 10 of Nielsen Norman Heuristics. We decided to focus on 5 out the 10 evaluators.
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
0 = There is no usability problem
1 = 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
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.
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.
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
You can go through to our Figma prototype
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.