Victoria Tu
UX Designer

CostcoGrocery • Website Redesign

A redesign of the CostcoGrocery website to modernize the look and feel of the website and improve the online shopping experience.

Image alt tag

Overview

Background

I started this redesign after finishing my class on usability testing with Dr. Anthony Andre at SJSU. I worked in a team of 4 to evaluate Costco's website and conduct usability testing over Zoom to learn more about the user experience (you can read the full report here). After completion of this project, I took the insights we gained on the main usability issues and began this project to redesign the user interface on my own.

Goal

Modernize the look and feel of the website and improve the user's online shopping experience.

Role

UX Designer and Researcher

Design Process
CostcoGrocery • Website Redesign

Personas

Crafting the Personas

Three personas were crafted based off of common CostcoGrocery use cases identified in the usability study project I completed previously. These personas, each of which embodied typical user goals and needs, highlighted potential problem areas that allow for improvement in user experience.

Problem Definition

Locking onto Key Usability Issues

The usability study I conducted with my team allowed us to gain valuable insights of the main frustrations users were experiencing while using the website. The main user pain points included:

  • a cluttered homepage

  • inconsistency between items displayed in results

  • difficulty determining the price of certain items

  • tediousness when requesting live chat support

User Flows

Choreographing the User Experience

I created three user flow diagrams to map out experiences for three common user tasks. These diagrams visually aided in my planning of the redesign, allowing me to better understand what the interface needed to provide the user for a positive usage experience.

CostcoGrocery • Website Redesign

Ideation

Sketches

I started off with some basic sketches to get a better idea of how I wanted to layout the content and information in different screens.

CostcoGrocery • Website Redesign

Wireframe

Low-Fidelity Wireframes

I created a set of low-fidelity wireframes with very minimal use of color in order to focus on the user experience. I wanted to make sure to focus on usable design before incorporating visual design elements into my work.

CostcoGrocery • Website Redesign

Try scrolling :)

Final Screens

High-Fidelity Designs

I used Figma to create high-fidelity designs based off of my wireframes. I targeted 4 areas of user frustration while redesigning the website: visual clutter, inconsistency, lack of information, and form fatigue.

CostcoGrocery • Website Redesign

Redesigned header and navigation

Problem Focus

Visual Clutter

Users reported that the homepage of CostcoGrocery felt like a large ad—filled with visual clutter and lacking organization. The amount of information displayed and delivered to the users was too much too fast. The top row of hyperlinks was also difficult to see as users were more drawn to the main navigation bar. 

To alleviate these frustrations, I began by redesigning a new header and navigation bar. I kept the main categories available, and removed the top row of hyperlinks as users don't notice them and don't know what they are. It did not improve the overall shopping process, so I did not feel that it was necessary to include. Since the background is a pure white, I chose a dark gray (#313131) over pure black for the main text as the greater contrast between pure black and pure white could lead to user eye strain.

CostcoGrocery • Website Redesign

Redesigned CostcoGrocery homepage

I retained Costco's brand colors (#E41F36 and #0061A9) and used the blue as the main accent color within the header. I selected a light gray container to keep the website looking well-lit, mimicking the bright overhead lights in the warehouses. Since the background is a pure white, I chose a dark gray (#313131) over pure black for the main text as the greater contrast between pure black and pure white could lead to user eye strain.

I chose to group what was being displayed into clear cut categories. Ongoing deals and savings are showcased in a banner at the top of the screen, similar to how it is on CostcoGrocery currently. Featured categories can be found right under this banner. These categories can be changed based on seasons, holidays, or other special occasions. 

CostcoGrocery also has a different inventory of items available dependent on the delivery method, which include same-day, two-day, and cold and frozen delivery. I placed these categories on the home page so that users can easily browse and shop for items knowing the time frame they will receive their order by.  

CostcoGrocery • Website Redesign

Product search results page

Problem Focus

Inconsistency

Maintaining consistency amongst search results so that users would be able to easily know what item they were looking at and immediately add it to their cart from the product search results page was something I knew I wanted to provide to users in my redesign.

CostcoGrocery • Website Redesign

Problem Focus

Lack of Information

General item information including pricing, product details, and reviews are included on the product page for both known and unknown users.

CostcoGrocery • Website Redesign

Chat support screen

Problem Focus

Form Fatigue

To simplify the process to connecting to live chat support, I reduced the information requested in the chat form to only the most necessary details. The goal is to get a customer connected to a representative as soon as possible so that they aren't fatigued by the long chat contact form. I included the status of chat support on the right side of the page so that users will easily be able to see when they can reach a representative through chat. 

Reflection

What did I learn from this redesign?

For this project, I wanted to keep the essence of the current Costco website intact. My focus was to improve the experience of the website rather than designing a completely new interface. I tried to keep the elements of the website that worked well for users while simplifying areas that did not add to the user experience. 

I learned to look at design from a different perspective, thinking about what may have influenced the company to make these design decisions. And I realized that one thing we often take for granted when designing for fun or for academic projects, is the privilege of setting constraints aside. When advocating for our design decisions, we can feel as if we have boundless resources, when in reality, it's crucial to remember the very real roles that time and money play in driving design decisions.