Summary
The current mobile application of Costco Wholesale, the world’s largest membership warehouse club operating in eight countries, is inadequate in terms of reflecting its extensive product range and user-friendly navigation. The purpose of this project is to address these concerns by improving the app’s search functionality, optimizing product categorization, and enhancing the user experience to facilitate easier access to desired products and improve overall satisfaction with the Costco application
Process
User Research & Synthesize, Ideation, Sketch, UI Design & Prototype, Usability Test & Synthesize, Redesign
My Role
Sole UX/UI Designer, UX Researcher
Tools
Figma, Miro, InVision, Otter.ai, Zoom
Duration
8 Week Project
Product Objectives
Problem Statement and Solution
Design Process
Research
Journey Map
Based on the insights gleaned from the user interviews, a comprehensive journey map was constructed to map out the participants’ experiences from the point of opening the app to the initiation of the checkout process. By charting out the touchpoints and interactions at each stage, the journey map provided a detailed overview of the users’ experiences.
By analyzing the negative experiences encountered by the participants throughout the journey, potential opportunities for redesign were identified. These opportunities were leveraged to inform the redesign of the app, with a focus on enhancing the user experience and addressing the pain points that were identified during the user testing sessions.
Open Card-Sorting
An Open Card sorting exercise was carried out, with the assistance of two participants. The objective of this exercise was to evaluate how the participants interacted with the “Costco – Mobile App” by grouping and categorizing the labels and content presented to them, in a way that was logical and intuitive.
The results of the exercise were positive, indicating that the participants were able to effectively group and categorize the different content and labels based on the corresponding actions they were performing. This suggests that the app’s interface and labels were clear and understandable, facilitating a smooth and efficient user experience
Personas
Ideation
Department Filter Architecture
Sketching
It was now time to bring the ideas to life by sketching out the screens. I utilized user flow and department filter architecture previously created in order to sketch all of the screens needed. I paid attention to basic design elements as I was sketching, making sure that usability is a priority and that the flows are easy to follow through. I would often ask myself “What does the user need to do?” for each individual screen.
Wireframes
The sketches prepped me to begin creating wireframes on Figma and gave me a better visual of the overall application. The wireframes were created on frames based upon iPhone 11 Pro/X screen sizes. I designed wireframes for all three user flows and I played around more with the structure of content and its user interface. I kept in mind my two personas and solutions that would fit each of their individual needs. I experimented with design elements to better determine a design that makes more sense for all kinds of users
Design
Test
Prototyping
Usability Testing
After completing the screen designs, I proceeded to build a prototype using Figma, enabling me to bring the ASAP app to life and showcase all the key features. As part of the quality assurance process, I personally tested the prototype several times to ensure that it was fully functional and ready for usability testing
With the app development process complete, I conducted a series of 5 moderated usability tests using the prototype to assess its efficacy. The primary objective was to evaluate the user’s ability to navigate through each task seamlessly and identify any potential pain points they may encounter during the process.
Test Objectives
- Discover initial impressions of specific screens
- Uncover usability problems in red routes
- Understand the thought process of users during testing
- Identify any issues with accessibility
Test Questions
- Is the task of successfully filtering search results by price achieved by users?
- What is the participants’ feedback on the organization of the UI on the home screen?
- What are the participants’ overall perceptions of the user interface design for each screen?
- How do users perceive the overall level of difficulty and usability of the tasks?
Redesign
Home Screen
Department/Shop Filter
Filter and Sort
Final UI
Conclusion
The project provided me with a sense of fulfillment as it addressed a relatable issue for myself and my peers. Through designing the app, I gained valuable insights into creating user-friendly and useful applications. While working on the project, I particularly enjoyed designing the user interface, as well as observing participants during usability testing sessions.
In retrospect, there are areas where the app can be improved, and given more time, I would explore expanding its functionalities. This could include adding a feature that enables users to share their restaurant recommendations with friends, as well as incorporating more interactive elements within the community page. Additionally, incorporating more illustrations and visual elements could enhance the app’s overall aesthetic appeal. Another aspect that could be improved is the search page, specifically by incorporating a red route that delves deeper into the filtering options.
Overall, the project allowed me to gain a deeper understanding of design principles, while also expanding my skill set in UX research and UI design.