UX/UI Design
Redesigned the user experience of specific flows within the Costco mobile app, based on Nielson Norman Group's usability heuristics for UI Design.
Timeline: 2 Weeks (April 2021)
Artifacts: Heuristic Analysis, Hi-Fidelity Screens, UI Library (Desing System)
Tools: Figma, Zoom, InVision
Skills + Methods: Analytical Thinking, Qualitative Research, Experimenting, UX + UI Design, Detail Oriented
THE CHALLENGE
As a team, we were asked to evaluate the usability of an existing digital product by conducting a heuristic evaluation. Once having completed the evaluation we were instructed to redesign a minimum of 10 screens within a flow. From our redesigned screens we were then challenged to develop a Design System UI Library for the existing digital product.
DISCOVERING THE PROBLEM SPACE
Selecting a digital product
We were a strong team of 3, Komal, Leesa, and I. One of the challenges we faced from the getgo was that the 3 of us were working in 3 different countries and 3 different time zones. I was located on the west coast of the US, Komal was located on the east coast of Canada, and Leesa was located over in London.
Our goal was to select a digital product that all 3 of us had access to in our area. We scoured the iOS app store for an app that had low reviews as well as an app that we all were able to access the same version of. This was important so that we could all have an equal chance to test out the app on our own phones to assess a more quality heuristic evaluation.
Gathering Insights
We find some very interesting insights. By scouring through the app store reviews for the Costco app we found there to be a huge disparity between consumers' opinions towards the in-store experience and mobile app experience.
Due to the recent pandemic, online grocery shopping has only increased. 45% of US shoppers purchase their groceries online (a). The need for a company, such as Costco, to keep its mobile app up to date is more vital than ever before.
How Might We
Although we are doing a heuristic evaluation it is still important to develop an HMW question to create a framework for our redesigns. An HMW question will also help to implement design thinking into our process.
How might we improve the end-to-end customer journey and increase membership on Costco's iOS app?
HEURISTIC ANALYSIS
What is it?
Conducting a heuristic analysis is a method for finding usability problems in a user interface design. A small set of evaluators examine the interface & judge it against recognized usability principles - ‘the heuristics’ of Nielson Norman Group. Using an agency (in this case our team of 3) to evaluate, ensures unbias which is critical to the process. Our goal was to discover specific areas of improvement so that we can implement positive change.
To approach the evaluation process we made sure to follow these key steps for each screen we analyzed from the Costco app.
As we analyzed each screen, we used the framework shown below to assess any violations we could find. These violations were scored on a scale of 0-4 along with the identified heuristic violation. As we were scoring we kept 3 factors in mind, Frequency (is this problem common or rare?), Impact (is it easy to overcome the problem?), and Persistence (will the problem repeatedly be an issue?).
The heuristics highlighted in RED were the most violated within the Costco mobile app.
Costcos Usability Evaluation
The flow we focused on was opening the app to discover products from the shop screen, filtering items to add to the cart, then signing up as a new member to successfully check out. To complete this flow we developed a hypothetical proto-persona named Liza. Below is displayed the screens we analyzed along with the identified heuristic violation, severity score, and recommendation.
Heuristic Evaluation Score
After applying the heuristics to the Costco digital product, we determined an overall usability score, which was an average of our individual scores. The overall app is just about functional, but it has major usability issues which lend it a score of 3.
IMPROVING USABILITY BY REDESIGN
Opening the App and Navigating to Shop
Filtering Products and Adding to Cart
Purchasing a Membership to Successfully Checkout
Usability Testing
After a thorough redesign of the Costco app, implementing all of our recommendations, we conducted 3 usability tests to gather unbiased feedback. We received a lot of positive responses and were able to confidently declare that our redesign has zero usability issues. Now it is safe to say our proposed Costco app design would definitely match that in-store experience that Costco customers can't get enough of.
UI LIBRARY & DESIGN SYSTEMS
The next step was to document all of the redesigning we did for Costco through developing a UI Library. We utilized the Atomic Design Methodology by Brad Frost as a framework. I have provided some slides below as a sample but to view the complete library please click on the button below.
FORWARD THINKING
Next Steps
The next steps would include to do a complete information architecture audit and asset review. This is important to make sure all of the flows within the app are cohesive and complimentary. The asset review would include things such as update images to go along with the newly modernized and clean interface of the redesigned Costco mobile app.
Key Learnings
This project had 3 unique stages; Heuristic Evaluation, Redesign, and UI Library. Each Stage brought on new experiences and lessons learned. Below are some overarching closing thoughts.
Selected Works
Interested in working together or having a chat?
