APP REDESIGN

Costco

Evaluating & redesigning the retailer's Android app.
See Full RedesignView Style Guide
Using Jakob Neilsen’s set of heuristics, I evaluated the current Costco Android app and designed screens in Figma showcasing how the user experience can be improved.

ROLE

UX Designer

DURATION

5 Days

TOOLS

Figma,
Adobe Photoshop

TEAM

2 Designers

About the App

The Costco app is an e-commerce app for
membership-only retail warehouse Costco Wholesale.
The flow that I evaluated was the shopping feature.

MAIN FEATURES
  • 01
    Digital Membership
  • 02
    Offers
  • 03
    Shop
  • 04
    Store Information
  • 05
    Photo Centre
Current Android app

10 Heuristics of Usability

Here are the 10 heuristics I followed to evaluate the
usability of the app.

  • 1.
    Visibility of system status
  • 2.
    Match between system and
    the real world
  • 3.
    User control and freedom
  • 4.
    Consistency and standards
  • 5.
    Error prevention
  • 6.
    Recognition rather than recall
  • 7.
    Flexibility and efficiency of use
  • 8.
    Aesthetic and minimalist design
  • 9.
    Help users recognize, diagnose and recover from errors
  • 10.
    Help and documentation

Severity Rating

The frequency, impact & persistency of the problem.

Mapping the User Flow

To do an in-depth analysis of the user experience, I first mapped out the user flow of the app's shopping feature.

The Evaluation

After assessing the flow using the 10 heuristics,
here are the areas with room for improvement.

  1. Visibility of system status

    The app provides consistent notifications and status updates to let the user know where they’re at.

    No usability issue
  2. Match between system & the real world

    When selecting a delivery option, the app has “Ground” selected by default, which can be confusing, as this means little to the user.

    Suggestion: Change “Ground” to “Deliver to door”
  3. User control & freedom

    No easy way to navigate around the app, and no back button to easily return to the previous screen.

    Suggestion: Add bottom navigation bar & return arrow
  4. Consistency & standards

    Buttons and text links are inconsistent across the app and some text on the banners are illegible.

    Suggestion: Make CTAs same colours & size
  5. Error prevention

    Not much has been done to prevent the user from getting errors. The minus sign on the quantity stepper is still clickable even at “1”.

    Suggestion: Grey out button if quantity is 1
  6. Recognition rather than recall

    Search history stays even if user is not signed in and closes the app.

    No usability issue
  7. Flexibility & efficiency of use

    The user has to go through multiple screens from the home page to adding an item.

    Suggestion: Reduce amount of screens to add an item
  8. Aesthetic & minimalist design

    Information on screen can be overwhleming and confusing the for the user. Not super clear on which elements are grouped together.

    Suggestion: De-clutter screens & adjust spacing between elements
  9. Helps user recognize, diagnose & recover

    The app provides an error message when the user enters the wrong information but doesn’t offer a solution.

    Suggestion: Highlight the field that is incorrect
  10. Help & documentation

    There is too much noise on the Delivery Details screen and makes it hard for the user to read.

    Suggestion: Reduce amount of text and add hierarchy

Design Matrix

I then prioritized the suggested improvements based on severity before I started redesigning.

MAIN FEATURES
  • 01
    Add bottom navigation bar & return arrow
  • 02
    Make CTAs same colours & size
  • 03
    De-clutter screens & adjust spacing
    between elements
  • 04
    Reduce amount of text and add hierarchy
  • 05
    Reduce amount of screens to add an item

The Redesign


With a clearer vision of the redesign, I then created wireframes in Figma of what it could look like.

See the full redesign here.

Standards & Consistency

Use indicators instead of arrows

Aesthetic & Minimalist Design

Simplified the screen

User Control & Freedom

Added navigation throughout

Aesthetic & Minimalist Design

Reduce amount of screens to get to the
product viewing

Consistency & Standards

Use similar item cards as on home screen

User Control & Freedom

User can quickly back out

Error Prevention

Greyed out the minus button on the stepper

Match Between System & Real World

Changed the wording

REFLECTION
It’s important to assess effort as much as user value.

Tackling a redesign project was exciting to me, and the moment I started on this project there were so many areas that I wanted to tackle, but didn’t have the time for. Here were my challenges:

I learned to appreciate the evaluation process from this study and it helped give me insight on how to curate a better user experience from an existing product or service.

Next Project
Semble →