Try scrolling :)
Victoria Tu
UX Designer
CostcoGrocery • Website Redesign
A redesigned CostcoGrocery with an improved online shopping experience and refreshed visual design
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
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.
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.
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.
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.
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.
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.
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.
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.