Try scrolling :)
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.