UX Case Study: Customizing Voucher Claims on Shopeefood Checkout Menu
⚠️ Disclaimer :
“This project is part of the challenge from the UI/UX & PM training program by Synrgy Academy Batch 6, a program organized by Binar Academy and Bank Central Asia. I am not employed by or professionally contracted by Shopee.”
🌻 Overview
Shopee is an e-commerce platform based in Singapore. Founded in 2015 by its parent company, Sea Limited, Shopee has become one of the largest e-commerce platforms in Southeast Asia. With a goal of business growth through excellent shopping experiences and technological innovation, Shopee also aims to establish partnerships and contribute to environmental and social sustainability.
🎯 Goals
Currently, the Shopee app has been equipped with the ShopeeFood feature aimed at providing fast, easy, and convenient food delivery services for customers. However, during the payment process stage, users are prompted to claim vouchers on the food menu page. If users haven’t claimed the voucher, it won’t be available during the payment process.
This situation poses a problem for users because they are forced to go back to the previous page to claim the voucher before proceeding with the payment process.
The goals of this project are to implement easy and efficient voucher management, aiming for users to be able to check out quickly and conveniently, aligning with the focus of ShopeeFood.
🧑🏻🎨 Role in Team
In this project, I collaborated with outstanding colleagues from Group 2, namely Hafshah Haudli Windjatika, Amalia Ananda Khalisa, Hani Ulfia Rahman, and Shalommita Pranatantri. Together, we were collectively responsible for carrying out all stages of the project. The roles we undertook included:
- Compiling and conducting research.
- Analyzing and identifying user problems.
- Brainstorming ideas as solutions to the problems.
- Creating a low-fidelity wireframe and wireflow as initial representations of the application design.
- Designing the system and user interface based on the wireframe.
- Developing prototypes based on the designed interface.
- Compiling and conducting usability testing to assess the functional level of the design.
- Iterating the design based on the results of usability testing obtained from respondents.
❤️ Stage 1 : EMPATHIZE
In the Empathize stage, our aim is to empathetically understand the problems, desires, and needs of users when using a product or application.
Group 2 has conducted research and obtained data regarding ShopeeFood users. The issue faced by users is the desire to make food orders with vouchers quickly and easily without having to return to the previous page. This data can be represented in the form of Empathy Maps, User Journey and User Persona:
From these Empathy Maps, we can understand the current needs of users. This helps the team to design solutions that are more relevant and tailored to the users’ needs, prioritizing a good user experience.
After understanding the user habits during the voucher claiming process, followed by the payment method, we then create User Journey.
User Journey provides a comprehensive understanding of the user experience when interacting with a product or service from start to finish. This enables the team to identify critical points, gaps, or opportunities to enhance the user experience.
After gaining a deep understanding of the user’s experience, next step is to create user persona.
User Personas, they represent characteristics as well as needs that different user segments may face, thus aiding decision-making.
💎 Stage 2 : DEFINE
After gathering information in the previous stage, we are now moving on to the Define stage, which involves analyzing and determining the core problems faced by users when using the application.
🤯 Problem Statement:
claim voucher option on the checkout page and the limited variety of payment methods have resulted in inefficiencies in ShopeeFood’s service.
We started by brainstorming about the problems users face when using the application. We wrote them down as bullet points for easy understanding and classification. After a brief discussion, we obtained How Might We statements and conducted a voting session, where we decided on prioritization.
We started by brainstorming about the problems users face when using the application. We wrote them down as bullet points for easy understanding and classification. After a brief discussion, we obtained How Might We statements and conducted a voting session, where we decided on prioritization.
💡 Stage 3 : IDEATE
Ideation stage, we conduct brainstorming sessions to generate solution ideas that are both innovative and problem-solving based on the previously selected How Might We statements. This process aims to address the issues experienced by users effectively.
From the User Flow we’ve designed, users can utilize the vouchers provided by their respective stores even if they haven’t claimed the voucher initially. This is aimed at addressing the issue of human error among users who may forget or be in a hurry when ordering food.
After determining the User Flow, the next step is to create Low Fidelity wireframes to provide an initial overview of the application to be developed.
Before proceeding to compose the UI Design, we first craft the Low-Fidelity Wireframe. This serves as an initial framework outlining features such as content arrangement and information layout, facilitating the subsequent stages.
🎨 Stage 4 : PROTOTYPE
Prototype stage, we work on designing solutions to address user issues identified during the problem exploration and brainstorming phase in the previous stage.
In the User Interface Design stage, we create the visual representation of the design solution in the form of High-Fidelity designs. These designs combine color composition, typography, components, and information layout.
we are more focused on creating a voucher claim flow that is easily understandable for users, aiming to achieve an efficient and comfortable user experience while ensuring ease of use.
— PROTOTYPING
Prototyping stage, we create a prototype from the UI Design in Figma that has been designed and organized, enabling its use during the subsequent Usability Testing stage.
Readers can also access the Prototype, feel free to interact & explore! 🤩
🚩Information:
When accessing the prototype, it is recommended to adjust the Zoom setting to Fit by pressing the Z key or through Options > Fit — Scale down to fit.
🎈 Stage 5 : TESTING
Finally, we reach the Testing stage where we conduct Usability Testing to determine whether the previously designed and organized design solutions can meet the needs of users.
So that Usability Testing activities can run sequentially and as expected, we carry out testing activities with several criteria as follows
In this Usability Testing session, we obtained 11 respondents who met the criteria. Here are some examples of feedback from the usability testing participants.
Usability Testing that has been conducted, there is certainly a lot of feedback provided. Overall, respondents are quite satisfied, so we have obtained good average scores for usability, ease of use, and satisfaction levels.
In the Usability Testing of ShopeeFood, various types of devices were used by each user. There were issues centered around users claiming vouchers, which prevented them from completing the task scenarios.
From these issues, it could be due to unstable connection or slow maze loading. We also found that there are various user behaviors, such as when users start searching for restaurants on the ShopeeFood home page. Testing with 11 respondents who are ShopeeFood users resulted in a Maze Usability Score of 82. This score is in the high range, indicating that the design is quite good and meets the criteria. However, there are still some areas that need to be improved or enhanced to enhance the user experience.
🚀 Conclusion
Based on the feedback and assessments provided by respondents who expressed satisfaction with the design solutions that have been created, this project can proceed smoothly and conclude successfully!
Design solutions that we have crafted and structured, we hope to provide benefits for you, the readers, as well as Shopee, so that they can implement the existing voucher claiming flow, allowing users to order food more easily and quickly.
In creating this project and case study, I have gained many lessons on how to conduct the design process in addressing user issues so that comfort and needs can be fulfilled.
I would like to express my gratitude to my teammates Hafshah Haudli Windjatika, Amalia Ananda Khalisa, Hani Ulfia Rahman, and Shalommita Pranatantri for their hard work and satisfying results. I also want to thank our mentor Yongky Harimurti, for imparting a wealth of knowledge to our team regarding UI/UX, our colleagues in UI/UX Design & Product Management, and Synrgy Academy for providing us with the opportunity to participate in online training activities.
Thank you for taking the time to read my case study. I hope it can be beneficial for you!
Giving me applause or feedback and suggestions, I would be very happy and feel helped!
