Header-2

Project Overview

I worked with Raquel Marin and Wedad Massoudi as a team to evaluate the Costco app using Jakob Nielsen's 10 usability heuristics. We then redesigned the iOS app by introducing consistency and simplicity to streamline the online shopping experience for users.

ROLE UX Designer, UI Designer
PROJECT LENGTH 2 weeks
TOOLS Figma

BACK STORY

We were tasked with evaluating any app of our choice, so we resorted to the app store and looked for well-known apps that had poor ratings. Costco stood out to us because of its surprisingly low rating.

Rating

An overall user rating of 2.4 on the app store drove us to investigate where areas of improvement might lie. We found that users were frustrated by the lack of a seamless experience.

Review-2
Review-3
Review-1

Problem

Although Costco is a known brand, we discovered that purchasing a product can be difficult for users who are not tech-savvy. We examined the "buying a product" task flow in the app using Jakob Nielsen's Heuristics, concentrating on shortcomings that cause the user to abandon it.

CURRENT USER JOURNEY

Users encounter around 10 screens when they want to buy a product. We divided those screens into different categories to show the full user’s journey.

Just to find a specific product, users need to navigate through 5 screens.

Search-Flow

After finding that specific product, users need to scroll through the product details before they can locate the 'add to cart' button – this makes the process unnecessarily long.

Cart-Flow

Then we used this severity scale to rate usability issues in the above user flow from 0, least severe, to 4, most severe.

Severity-Scale-large

Analysis

We found many heuristic violations in this flow, but in this section, I will walk you through the screens that we found to have the most severe violations.

HOMEPAGE

We found 4 violations on this screen.  

Home_Page_Violations_ALL

Now let's break it down one heuristic violation at a time.

There is no clear indicator that users are in their session, leading to a more extended checkout transaction.

HEURISTIC VIOLATION
Visibility of system status

SEVERITY RATING
2

OUR RECOMMENDATION
Addressing the user by their first name on the home screen when logged in will inform them about their status.

Home_Page_Violation_1
Home_Page_Violation_2

We had to reenter our postal code every time we used the app, even if we were logged in. This can be frustrating to users, especially if the product selection changes after the user updates their postal code.

HEURISTIC VIOLATION
Recognition rather than recall

SEVERITY RATING
2

OUR RECOMMENDATION
The app automatically remembers the user’s postal code when logged in, which will make the experience more seamless.

The banner on the home screen has many elements and busy graphics that can be distracting for users looking to buy a specific product. 

HEURISTIC VIOLATION
Aesthetic and minimalist design

SEVERITY RATING
3

OUR RECOMMENDATION
Minimal but impactful imagery in addition to an increase in white space around the various components of the banner area is a more effective way to communicate with users, which will result in higher engagement.

Home_Page_Violation_3
Home_Page_Violation_4

This wasn't clear right away, we had to investigate a bit to fully understand that what looks like a navigation bar is actually part of the carousel – a title or caption for each image. Users should be able to easily identify the various elements on the screen and not confuse their functionality with that of other common elements they've grown accustomed to.

HEURISTIC VIOLATION
Consistency and standards

SEVERITY RATING
3

OUR RECOMMENDATION
Replacing this bar with pagination and embedding the titles in the images themselves.

PRODUCT LIST PAGE

We found 2 violations on this screen.

Search-Results_Page_Violations-ALL

Then we evaluated each violation.

Search-Results_Page_Violation-1

After finding the desired product, users have become accustomed to seeing an icon or a button that allows them to add the item to their cart. However, we found an "add to the wishlist" icon instead, which makes the process of buying a product longer.

HEURISTIC VIOLATION
Consistency and standards

SEVERITY RATING
2

OUR RECOMMENDATION
Replacing the wishlist icon with a cart icon will create a faster shopping experience and will meet the users' expectations.

We found that users are confused by this terminology. Even after logging in as Costco members, there was some "member only" items that couldn't be added to their cart. 

HEURISTIC VIOLATION
Error prevention

SEVERITY RATING
2

OUR RECOMMENDATION
Adding a message to clarify why users cannot see full details of the product or add to their cart.

Search-Results_Page_Violation_2

Redesign

Our goal in the redesign was to fix the components and elements that violated the heuristics instead of a complete overhaul of the entire screen.

HOMEPAGE

HEURISTIC VIOLATIONS
• Visibility of system status
• Recognition rather than recall
• Aesthetic and minimalist design
• Consistency and standards

AVERAGE SEVERITY RATING
2.5

OUR RECOMMENDATION
Address user by name when logged in, automatically remember postal code, clean up carousel graphics, remove carousel titles

ACTIONS TAKEN
• Displayed user's name when logged in
• Added pagination

• Included a prominent 'Shop by Department' button
• Made typography and buttons consistent
• Decluttered the header

PRODUCT LIST PAGE

HEURISTIC VIOLATIONS
• Consistency and standards
• Error prevention

AVERAGE SEVERITY RATING
2

OUR RECOMMENDATION
Replace wishlist icon with cart icon, explain the conditions of 'Member-only' items.

ACTIONS TAKEN
• Added cart icon
• Made the price and rating of each product more prominent
• Included an information button next to the 'Member-Only' label
• Redesigned components to ensure consistency throughout

Key Learnings

 

During this project, we learned that:

• heuristic evaluations are effective at helping us detect and avoid usability problems.
• to be efficient with time, we should prioritize the changes we're recommending by identifying what would bring high user value.
• user reviews on the app store can reveal existing problems and areas of opportunity.

Selected Works

TerraUX Design - Case Study

Patients FirstUX Design - Case Study

CostcoHeuristic Evaluation