Victoria Tu
UX Designer

CostcoGrocery • Website Redesign

A redesigned CostcoGrocery with an improved online shopping experience and refreshed visual design

Image alt tag

Context

In the previous semester, I worked in a team of 4 evaluate the user experience of the CostcoGrocery website through usability testing. After the completion of the project, I spent the summer redesigning the website to solve the main areas of friction that users were experiencing.

Timeline

Summer 2021

Role

UX Designer (and previously 1 of 4 UX Researchers)

Tools

Figma, Notability

CostcoGrocery • Website Redesign

The challenge

How might we decrease road bumps and streamline the online shopping experience for CostcoGrocery?

Through usability testing (n = 6), I gained valuable insights into the primary frustrations that users encountered while navigating the website. The main user pain points included:

  • a cluttered homepage that impeded intuitive navigation

  • inconsistency in the displayed items within search results

  • difficulty determining the price of certain items

  • tediousness when requesting live chat support

The personas

Drawing from the insights gained in my previous usability study project, I crafted three personas representing typical CostcoGrocery users.

These personas were carefully constructed to embody common use cases, capturing the diverse goals and needs of the user base.

The approach

To effectively plan the redesign, I constructed three user flow diagrams, each dedicated to mapping out the experiences of three commonly encountered user tasks.

I used the user flows to inform my design decisions and prioritize elements essential for a positive shopping experience. This methodical approach allowed me to align the interface design with the user's needs and streamline their journey with CostcoGrocery.

CostcoGrocery • Website Redesign

Ideation

To get a clearer vision of content and information layout across various screens, I started off with a few sketches to explore the overall composition and refine my design direction.

CostcoGrocery • Website Redesign

Wireframe

Putting function before form,

I developed a collection of low-fidelity wireframes, intentionally employing minimal color usage to focus on functionality before integrating visual design work.

CostcoGrocery • Website Redesign

Try scrolling :)

Final design

Utilizing Figma, I translated my wireframes into high-fidelity designs, bringing the user experience to life.

I specifically targeted the four pain points uncovered through usability testing. My goal was to create a visually harmonious interface, establish coherence across interactions, provide comprehensive and relevant information, and streamline the form-filling experience.

CostcoGrocery • Website Redesign

Redesigned CostcoGrocery homepage

Problem focus

Visual clutter

Users felt overwhelmed by excessive information and a rapid delivery. The top row of hyperlinks also suffered from visibility issues, as users were naturally drawn to the main navigation bar.

To address these concerns, I decided to remove the top row of hyperlinks. Users frequently overlooked them, and they offered no significant improvement to the shopping experience.

To enhance user navigation and comprehension, a prominent banner showcases ongoing deals and savings, similar to the current layout on CostcoGrocery. Directly beneath, featured categories take center stage, which can be dynamically updated to align with seasons, holidays, or special occasions, ensuring a fresh and relevant browsing experience.

CostcoGrocery • Website Redesign

Product search results page

Problem focus

Inconsistency

I implemented a cohesive layout that prioritized consistency and clarity to help users feel more confident in finding the item they are searching for. Consistent design across the website decreases cognitive load and helps users quickly make informed designs, ultimately facilitating a more efficient and gratifying shopping experience.

CostcoGrocery • Website Redesign

Problem focus

Lack of information

I included pricing details, product specifications, and insightful reviews for every product. All visitors to the website, whether new or returning, have equal access to crucial details that inform their purchasing decisions. By promoting transparency and providing a wealth of information, I sought to cultivate trust and confidence in the platform to inspire customer loyalty.

CostcoGrocery • Website Redesign

Chat support screen

Problem focus

Form fatigue

To simplify the process to connecting to live chat support, I reduced the information required in the chat form to only the most essential details. I aimed to expedite the connection between customers and representatives, sparing users from the fatigue that often accompanies lengthy contact forms.

Reflection

What did I learn from this project?

My primary objective was to uphold the essence of the existing Costco website and focus on refining and optimizing the elements that resonated well with users while simplifying areas that detracted from their overall experience.

I developed a design strategy that focused on achievable improvements while considering the practical implications of implementation. This approach ensured that my design decisions were not only desirable from a user experience perspective but also feasible within the context of the company's operational realities.