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
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.
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.
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.
Task Flow
The defined task flow starts at the moment an user creates an account until the moment the cart is ready for checkout.
Evaluators
We applied all 10 heuristics of usability when evaluating Gocery app to improve the overall app user experience.
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.
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
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.
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
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.
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
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
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
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
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
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.