Costco App Case Study
Streamlining browsing & enhancing the Costco member experience
Role:
UX/UI Designer
Tools:
Figma, Figjam, Notion
Timeline:
Fall 2024
The goal of this project was to redesign the Costco mobile app to enhance its usability, streamline the shopping experience, and modernize the visual design while maintaining Costco’s brand identity. Through extensive user research, competitive analysis, and UI/UX improvements, I aimed to create and intuitive, user-friendly interface that simplifies product discovery, order management and etc.
The first step for this project was understanding the brand itself. Since Costco has been a huge part of people’s lives for decades, it was of utmost importance to understand it’s vision and values in order to make better decisions that would better align with the brand strategically.
Costco’s Mission, Vision, Values
Here at Costco, we have a very straightforward, but important mission: to continually provide our members with quality goods and services at the lowest possible prices.
In order to achieve our mission, we will conduct our business with the following Code of Ethics in mind:
Obey the law
Take care of our members
Take care of our employees
Respect our suppliers
In the competitive analysis stage I aimed to evaluate Costco’s app in comparison to key competitors, identifying strengths, weaknesses, and opportunities to enhance the overall user experience. By analyzing industry leaders I gathered insights into best practices for navigation, personalization and usability.
Competitors analyzed
Walmart - Offers a hybrid online/in-store shopping experience with an intuitive UX
Target - Strong visual hierarchy, easy navigation, and a user-friendly cart and checkout system.
For the next phase in the user research process, I conducted user interviews with people who have Costco membership and use it regularly. They were asked to browse through the app before the interviews.
The questions in these interviews were designed with specific purposes in mind which are:
To understand user behavior and key use cases
To identify pain points and areas for improvement
To gauge usability and discoverability issues
To learn about user priorities and areas for improvement
The questions asked from the participants were:
Can you walk me through how you typically use the Costco app? What are the most common tasks you perform?
What are the most frustrating aspects of using the app, and how do you work around them?
How easy or difficult is it to find products and complete a purchase through the app?
Have you ever faced any issues with the app’s navigation or layout? Can you describe those moments?
If you could change one thing about the app, what would it be and why?
Based on the insights gathered from the user interviews and competitive analysis, I created an affinity map to categorize the most important data and separate the ones which should be focused on in the process of the redesign.
I used this affinity map as a guide to create a persona.
Based on the information gathered from previous stages, I aimed to create a research-based persona that aims a threshold of users that are using Costco’s app.
Due to the wide range and variety of users using this digital product, I created the persona below that will encompass a large amount of Costco’s users with similar pain points ad behaviors.
By identifying the needs of the target audience, I aimed to reflect the following in my design:
Consistent and more intuitive usability
Improving findability
Highlighting personal suggestions
Creating a more consistent visual experience
Reducing the visual clutter throughout the app
With the goals of my design specified and a persona, I needed to create a user journey to show how the ideal user navigates the app and the different phases and emotion which he goes through in this process.
I mapped 2 different user journeys to be able to better understand and tackle various user behavior.
After user journey, I needed to illustrate the various paths the typical user might go through while navigating the pages of the app and prioritizing the pages that needed the most attention.
Since I couldn’t find an existing Costco brandbook, I created my own based on the information I gathered from the brand to base my design decisions on and creating more visually consistent pages.
Low Fidelity
After creating a visual structure, I went on and sketched low fidelity wireframes as a first step to implement my design ideas.
Mid fidelity
After the low fidelity sketches it was time to give more depth to the design and start doing mid fidelity designs in Figma.
Categories & Services Page
I created a more intuitive and visually organized Categories & Services Page to help users quickly find what they need. I put the two in the Search section of the app to improve discoverability, reducing cognitive load and supporting a smoother browsing experience by grouping items more logically and highlighting key services.
I also used the company color Red to distinguish between the Services and Categories.
Product Page with Item Comparison
I redesigned the individual item page to present product details more clearly and added a Compare Item feature that allows users to view side-by-side comparisons of similar products, helping shoppers make informed decisions quickly by evaluating specifications and prices without navigating away from the product page.
Product List Page
The redesigned product list page offers a cleaner, more organized layout that enhances browsing and reduces visual clutter. Instead of overwhelming deal banners, key product highlights such as Best Seller are now shown as subtle visual labels.
Users can easily filter items by price, category and etc or add products to a Favorites List for quicker access and decision making.
Warehouse Page
The redesigned Warehouse Page now includes a Warehouse Navigation feature that lets users view an interactive map of their selected warehouse and search for in-stock items by location, making in-store shopping faster and more efficient.
Items Page
I redesigned the Items Page to offer a more cohesive layout for viewing items and a simpler, more intuitive way to choose between pickup and delivery.
The page also features easy access to reorder previously purchased items and the favorites list, allowing users to quickly add frequently bought products to their cart.
Checkout Process
The checkout process was restructured to follow a clear, user centered flow that reduces friction and decision confusion for users.
I also added a post-purchase cancellation option, to allow users easily cancel the order if any mistake has happened during the checkout process.
Account Page
The Account page was reimagined with a cleaner structure and improved navigation.
The page now features a new Ongoing Orders section where users can track or cancel active orders in real time. A streamlined Previous Purchases view offers quick access to past order details.
Clear labels and timelines keep users informed about their membership status and renewal dates.
After the design, I decided to conduct a usability testing with the same participants I did the user research with to validate my designs decisions. Since it was with the same people, it was basically an A/B testing as well.
Usability Testing tasks
Task 1: Compare two laptops
Scenario: You’re choosing between two laptops. Select a laptop and compare it with another one and add the one you like to your cart.
Task 2: Checkout the added item
Scenario: After adding a laptop to your cart, go to your cart and checkout the added item. Make sure you choose Standard Delivery as your delivery option.
Task 3: Find and Use the Warehouse Navigation tool
Scenario: You’re visiting your local Costco Warehouse and want to locate the electronics section. Use the app to find the map of your selected warehouse.
Task 4: Order an item from your Favorites list
Scenario: You previously added a dishwasher to your Favorites list. Find it and add it to your cart.
Success Rates by Tasks
The usability testing confirmed that my designs are effective, intuitive, and user-friendly. Every participant successfully completed all tasks, with only minor navigation detours noted in two tasks.
Positive Feedback
Users consistently commented on the cleaner layout, saying it felt more modern and visually organized.
The app was describes as intuitive and easy to use, even for first time interactions with new features like item comparison and warehouse navigation.
Usability Observations
Warehouse Navigation vs. Warehouse Locator: Some confusion between “Warehouse Locator” and “Warehouse Navigation” suggests a need to clarify naming.
Favorites Discoverability: While the feature works well, users often looked elsewhere before landing on the correct section, indicating it could benefit from additional placements throughout the app.
Redesigning the Costco app was a valuable experience that deepened my understanding of user-centered design, the importance of clarity in UI, and the power of research driven decisions.
One of the biggest takeaways was how essential it is to listen to users early and often. Through user interviews and usability testing, I learned that what seems obvious as a designer isn’t always intuitive to the user. Small labels like “Warehouse Navigation” and “Warehouse Locator” caused hesitation even though both functioned well. This reminded me that naming, clarity, and hierarchy are as important as visual polish.
Another important lesson was the value of designing with flexibility. During testing, users found different paths to complete the same task(like accessing Favorites), and while they were all successful, it showed me the importance of supporting multiple mental models.
Important Note: All the images used in this project are AI generated and royalty free.