Exito website redesign

case study

Deliverables: Web responsive design

Roles: Co-Research, UI UX Co-Design

Programs: Figma

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. But the website is BANANAS! I got overload with the multiple different images, promotions, messages ....too much! So when I knew that I have to conduct a heuristic evaluation (Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles, Exito website was the perfect subject! 

The result of the heuristic evaluation helped us out to up our energy into the right place to redesign the website to relive the main pain point user will encounter:

- Overload of information

- Not a define of the information hierarchy

- Clean and more visual friendly website 

redesign

thinking process

When thinking about the redesign of the Exito website, we wanted to make sure still felt like the old one but better, allowing the user to easily find an item.

In this blog, I am going to share the main changes we did to the Exito website based on the heuristic evolution from my last post.

 

Visibility and system status

 

1. We reorganized and redesign the navigation bar items in a way it is easier and to understand so the user knows what to expect after every click.

 

2. We also decided to categorize the way the home page shows discounts in one place, weekly sales and new items in different categories therefore it is easier for the user to browse around and find what they are looking for.

3. We simplify the navigation bar by putting all the different departments in one place and highlight just relevant information on the home page.

 

4. We reorganized all the categories into a department tab where the user can easily look into each department’s item through a tunnel.

This shows a simplified way to put information that it is less overwhelming for users.

 

5. The tunnel shows each clickable department that shows each category with a relevant picture that helps the user easily associate the categories with what they are going to find there.

 

For example: Department>Groceries>Fruits and vegetables

 

6. We made a bigger and more visible the of system status when the user adds an item to their the shopping cart

User control and freedom

 

1. The breadcrumbs are an easy way to go back that gives the user control to navigate through the website

 

2. We designed a simplified navigation bar that allows the user to easily know where they are on the website without the feeling lost at any point.

 

3. Same with the filters we decided to keep the filters on the left so the user feels familiarized with the new design of the website.

 

Consistency and standards

 

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

 

2. We kept the same design to display items

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

Aesthetic and minimalist design

  1. We set one defined style throughout the entire website

  2. Standardized button styles throughout the website

  3. Displayed discounts and sales with the same style improving style hierarchy throughout the site

Help and documentation

 

1. We made the chat bubble more accessible so the user can start the conversation faster without having to input much information to ask simple questions.

 

2. We kept the suggestions button on the side that allows the user to rate their experience on the website.

If you want to check the Figma prototype, please click here!

prototype

UI LIBRARY

After finalizing the redesign of Exito based on the heuristic evaluation, and completing successfully user testing the idea is to define and build an inventory of all the typography, colours, components, and design elements used in the Exito website. A UI Library that helps to have a clear and functional organized collection of all user interface elements, to ensure consistency across a brand and product, helping anchor everybody to the same vision and promote shared understanding.

2020 desigNed and created

by JULIETH FAJARDO