Shopee Cart Improvement — UI/UX Case Study
Hello everyone!
I’m Yunifa, Welcome to my UI/UX case study, where I take you on a journey through the creative process of designing a user-centered and visually captivating experience. In this study, I will share the challenges I encountered, the innovative solutions I devised, and the design principles that guided my path while developing a seamless and delightful user interface (UI) and user experience (UX) for Shopee App.
I’m excited to present my UI/UX case study, and I hope it serves as both a source of inspiration and a valuable resource for fellow designers and enthusiasts.
About Shopee App
Shopee is a leading mobile e-commerce application and platform that allows users to shop for a wide variety of products, enjoy promotions and discounts, and interact with sellers through live streaming. With a user-friendly interface and a vast selection of items, Shopee has become a popular choice for online shopping in Southeast Asia, Taiwan, and Brazil. It offers secure payment options, social shopping features, and customer support for a seamless shopping experience.
Problem Statement
Based on reviews from Shopee users, the cart feature at Shopee has a simple appearance, but too many “ubah” buttons that slow down the user’s process of deleting products, and there are also no important features such as the product search feature needed by active Shopee users who often store lots of products in their cart.
So there is potential to improve the cart feature in Shopee to provide a more personal feel for users in storing and organizing items.
Possible Solution
Some solutions found for the Shopee cart problem:
- Eliminates the “ubah” buttons and simplifies the cart view by only displaying “hapus” and “favoritkan” text buttons that will appear when the user checks the product list.
- Replace the “ubah” button on the product by adding a delete button to the product, so it will be easier for the user to delete one product at a time.
- Added a product search bar feature in the cart to make it easier for users when they want to find the product they want/need.
Process
Using Design Thinking in a UI/UX case study offers a structured and user-centric approach to solving design challenges and achieving specific goals.
Empathize
This project uses Screening Surveys and In-depth interviews to serve as a means to validate assumptions made during the early stages of the design process. Gathering direct feedback from users can confirm or challenge initial hypotheses, ensuring that the design decisions are based on real user insights rather than assumptions.
Objective
- To understand users' motivations for shopping online
- To find out the user’s habits when using Shopee
- To find out the user experience in finding, selecting, and saving products on Shopee
Sample Specifications
- User active Shopee
- Nationwide
- Female/Male
- 18–35 years old
Interview Participants
Based on the results of the screening survey, 5 respondents were found who met the criteria for conducting in-depth interviews
Full Research Plan & Interview Result Report: Google Spreadsheet
Define
At this stage, I collected insights from the empathize stage, then compiled all the insights and grouped them into an Affinity Diagram.
User Persona
A user persona is created to take into account users’ different perspectives on the Shopee cart and ensure decisions are made in line with their needs and preferences.
User Journey Map
The journey map is made to understand how the user travels/interacts when using the Shopee cart.
Impact Priority
After creating categorization, user persona, and journey map, some insights from participants found which would be the priority of the main problems based on the significance, impact, or urgency of the issues raised to be resolved.
Recommendations
Several actionable insight recommendations were found to solve user problems in the Shopee cart feature.
Full Research Report: Google Slides
Ideate
At this stage, create a solution design by creating interaction designs starting from user flow, information architecture, wireframes, design system, and mockups.
User Flow
This is the improved user flow of deleting and searching products in the Shopee cart. This user flow helps the user to understand the journey from start to finish when using the application, including the actions the user will take and the interactions that occur between them.
Information Architecture
This is the improved information architecture, where some of the orange boxes below are new/additional features in the Shopee cart.
Wireframe
Before the Mockup creation stage, a simple visual representation of the layout and basic structure of the Shopee cart user flow has been created. Its function is as an initial design that is used to describe the main elements of the user interface.
Design System
Before the prototyping stage, create a Design System as a guideline when designing prototypes later, such as the use of color, typography, and components.
Mockup
After creating the wireframe and system design, the mockup is created as a visual representation of the wireframe stage, where the user interface elements are graphically designed and more closely resemble the final look of the actual Shopee cart.
Full Design Ideas: Figma
Prototype
Interaction Prototype — Search product-specific in the Shopee cart
Interaction Prototype — Delete one product at a time in the Shopee cart
Interaction Prototype — Delete some product at a time in the Shopee cart
Interaction Prototype — Delete all products at a time in the Shopee cart
Prototype Link: Figma
Testing
UT (Usability Testing)
The final stage carried out in this project is to perform Usability Testing with participants. The objectives of doing this UT are:
- Users can search for specific products in the Shopee cart
- Users can carry out an effective product deletion process in the Shopee cart
Criteria participants who took part in this UT are:
- Active Shopee users
- Female/Male
- Nationwide
The approach used in this UT process is Moderated Usability Testing with Zoom Meeting App, which involves meetings with participants and allows researchers to give instructions, observe user interaction with the design in real time, and ask follow-up questions in the researcher’s session.
The participants taken at this UT were the same as the participants in the depth interview, there were 5 users.
UT Result
Several findings were found after carrying out the UT process:
The conclusion from the results of this UT is that all participants carried out all tasks successfully, and participants felt satisfied with their experience when interacting with the improved Shopee cart feature.
Full UT Report: Google Slides
What did I learn?
What I learned when doing this project was how important it is to do good time management, because this project requires a short time so I have to be competent in managing my time to test ideas, design prototypes, and get feedback from users.
Before I researched this project, I had created a detailed action plan with a tight schedule by defining clear stages, tasks, and deadlines for each step. However, I still see myself wasting time doing unimportant activities which means I don’t have time to check/re-examine the results of this project.
Therefore, this Shopee Cart Improvement project is still not perfect. For that reason, I hope that if you find a false step in this project, please feel free to leave feedback or suggestions. You can also visit the Linked In and Behance links below.
Thank you!
