Caio
UX designer

Gocery

A heuristic evaluation and redesign proposal focused on usability improvements for an application that helps users to order groceries online

Role: UX Designer

Team: 2 UX Designers

Timeline: 3 Days

Deliverables: Heuristic Evaluation + Redesign

Tools: Figma, Google Docs, Slack

Gocery

The Project


During the UX Design bootcamp program at BrainStation, I conducted an heuristic evaluation and redesign challenge with my colleague Anastasia Egorova.

We were UX Designers from Emerge technology, a growing strategy, design, and technology consultancy based out of New York.

Gocery, a major Toronto based company has approached Emerge Technology and we performed an usability assessment of their app.

The Design Challenge

The project goal was to conduct a heuristic evaluation of a digital app following a set of usability principles by Nielsen Norman Group.

This activity helped us identify usability problems in a user interface design and make recommendations to improve the user experience by:

• Conducting a heuristic evaluation.
• Determining the severity of usability problems.
• Redesigning the task flow solving the usability problems found.

Gocery

App Context


Gocery is a same-day grocery delivery app that operates throughout the Greater Toronto Area, available for Android and iOS.

The global pandemic has affected everyone's lives. People are learning to do many things without physical presence. It has boosted the grocery delivery industry by offering us a wide range of apps. Now it is more critical than ever for Gocery to maintain the human-centered approach to stay competitive and attractive to new clients.

Gocery

Project Constraints


Branding

Emerge Technology committed to keep the existing brand identity, unless it violates a usability principle.

Time
The project was to be completed within three business days.

Gocery

Task Flow


The defined task flow starts at the moment an user creates an account until the moment the cart is ready for checkout.

Gocery

Evaluators


We applied all 10 heuristics of usability when evaluating Gocery app to improve the overall app user experience. 

Gocery

Severity Ratings


After selecting the evaluators, we applied the Severity Ratings concept. It was used to prioritize resources in order to allocate sufficient efforts to the most serious usability problems.

Gocery

1. Visibility of system status

When customers click “Add to cart”, it shows a system message that the item has been added to the cart keeping the users informed about the action being performed.

Problem
System message appears up top, it can be hard for users to see it and it disappears very quickly. Also, there’s no way users can tell which items have already been added to cart.

Redesign

  • Added an animation that shows an item being moved to cart

  • Added an overlay for selecting product quantity

  • Added a quantity indicator element

Gocery

2. Match between system and the real world

Gocery uses the terms and words like “log in”, “earn points”, “cart”, “add to cart”, “orders”, “go to checkout” that are used in the real world and familiar to users.

Problem
No problems were identified. The app has been doing a great job using the real world expression to communicate.

Redesign
No suggestions were made.

Gocery

3. User control and freedom

Gocery user clicks on the icons to “add to cart” and “remove”, to add as many items as they need.

Problem
The user has no option to remove a product from the cart at once. To remove an item, the user has to click on the “minus” button multiple times.

Redesign

  • Added a Remove button

  • Added the option to insert the quantity manually

  • Added a message that shows an amount needed to get free delivery

  • Added a brand logo to show users which store they are ordering from

Gocery

4. Consistency and standards

Gocery uses the same typography, colors and buttons across all the pages.

Problem
No problems were identified. Gocery team has been doing a good job keeping the consistency and standards across the app.

Redesign
No suggestions were made.

Gocery

5. Error prevention

When users are typing in wrong account information (first name, last name) Gocery doesn’t show an error message that prompts the users to fix it right away which sets users up for failure.

Problem
Error message appears at the bottom only after the user clicks on the Create Account button.

Redesign

  • Added functionality that changes field color when clicked

  • Added functionality that validates every field

  • Added functionality that corrects misspelled email

Gocery

6. Recognition rather than recall

When users are typing on the search box, there are no suggestions or history of previous searches.

Problem
Gocery app fails to provide search suggestions as users type an item name and also fails to display the search history.

Redesign

  • Added a predefined list of Popular Searches to help users quickly find a product

  • Added product suggestions based on previous searches

Gocery

7. Flexibility and efficiency of use

When users are grocery shopping there is no way to filter or sort items to compare products.

Problem
Gocery fails to make available filters and sorting features for users that may want a more flexible and quick shopping experience.

Redesign

  • Added a scrollable section with filters and sorting

  • Added a total number of items matching the search

Gocery

8. Aesthetic and minimalist design

The app has a clean and simple look with appropriate use of white space and consistent design which makes it easy for users to find important things.

Problem
A small detail found was that the dark header doesn’t quite align with the rest of the light and minimalist visual design.

Redesign

  • Redesigned the header applying the brand color palette and the general design

  • Added new photos to better fit the app overall design and aesthetic

Gocery

9. Help users recognize, diagnose, and recover from errors

When users search an item that is not available, Gocery app does not provide suggestions.

Problem
Gocery fails to provide suggestions when an item is not found. It is a good opportunity to help users recover from error and improve the user experience.

Redesign

  • Added a bright illustration to make the page less dull

  • Added a fun and engaging message that guides users to recovery

  • Added product recommendations from the same category

Gocery

10. Help and documentation

When users need assistance or have questions, Gocery does not provide FAQ or a way to contact customer support.  

Problem
Gocery app fails to offer help when users need assistance, which is essential to provide a positive customer experience.

Redesign

  • Added a Contact Us section

  • Added an Online Chat

  • Added a Call option

View the final redesign proposal here

Key Learnings

Good Design always pays off
Gocery is an excellent app, rated over four stars on IOS and Android versions.
Just in three days we were able to suggest quick fixes to make the app even better through the heuristic evaluation. I am convinced that after implementing these changes, Gocery will increase conversion, company profitability and most importantly, the overall user experience.

Design with a purpose
During this project, I realized that every usability principle is extremely important  to  enhance the overall user experience.