Case Study : Improving User Experience On Shopee
Introduction
Hi! I’m Awan, I’m on journey to shifting career to become a UI/UX Designer. In the last few months, I am currently taking part in a boot camp for UI/UX design courses organized by Dibimbing.id. This UI/UX case study is one of the projects of the boot camp.
Overview
Shopee is a regionally adapted platform that provides customers with an easy, safe, and fast online shopping experience through solid payment and logistics support. Shopee believe that online shopping should be affordable, easy, and fun. This is the vision that Shopee wants to provide through this platform, every single day
Role : UI Designer
Scope : User research, Analyze, User Flow, Information Architecture, Wireframe, Mock Up, Design System, Prototype, Usability Testing
Timeline : 3 weeks
Tools : Figma
The Process
I use the Design Thinking framework, so I can conduct this case study well constructed. The design thinking framework consists of 5 stages (empathize, define, ideate, prototype, and test).
Empathize
Identify unmet needs and pain points that users may not even be aware of. They can also gain insights into how users interact with products or services and what features or functions would be most helpful to them. Also help to create solutions that are truly user-centered, meaning they are designed with the needs and wants of the user in mind. This approach can lead to products that are more intuitive, enjoyable, and satisfying for them.
There are 3 main processes in this stage, Planning the Research, Making Research Guidelines, and Conducting the Research.
1. Planning the Research
Objective
The object of this research is how I understand the behavior of users while using the shopee application, understand the perception and behavior also knowing their experience when using the Augmented reality [AR] feature in shopee during online shopping.
Methodology
I used 2 methods, quantitative (Online Survey) and qualitative (In-depth Interview) in hopes of getting more insights from respondents to complete the objectives
Respondent Criteria
- All genders
- Age : 17–40 years old
- Shopee users (being a shopee user for more than a year)
- Shopee users (actively shopping online on shopee in the past few months)
- Nationwide (Indonesia)
Key Information Areas
Key information areas are those that will be explored later through questions to gain valuable information and insights when conducting research. Here are the main information areas
- User Profile
- General behavior when looking for products they want to buy at shopee
- General behavior when using Augmented reality [AR] feature for try on the product before buy it
Discussion Guide
- Overall experience using Augmented reality [AR] feature
- Reasons using Augmented reality [AR] feature
- Pain points using Augmented reality [AR] feature
- solutions to issues encountered when using AR features
Define
Analyze this information to gain a deep understanding of the user’s needs and pain points, as well as the larger context in which the problem exists. The problem statement serves as a guiding principle throughout the rest of the design thinking process, helping the designers to stay focused on the user’s needs and ensuring that the solutions they create are relevant and impactful.
Affinity Mapping
Visual tool used in design thinking and other problem-solving processes to organize and categorize large amounts of information, ideas, or data. It is often used in the empathy and define stages of the design thinking process to help designers make sense of the insights and observations gathered during the research phase.
User Persona
User persona often used in the empathy and define stages of the design thinking process to help designers gain a deeper understanding of the needs and perspectives of the target user group. They can also be used to guide decision-making throughout the design process, ensuring that the solutions developed are truly user-centered.
Actionable Insight
Analysis that is extracted from data, and that can be used to take concrete actions that lead to better outcomes. These insights go beyond simple observations or data points and provide meaningful and relevant context that can inform decision-making.
Ideate
Generate a large quantity of ideas, regardless of how feasible or practical they may seem. This allows the designers to explore a wide range of potential solutions and identify new and innovative approaches.
User Flow
User flow is a visual representation of the steps that a user takes to complete a task or achieve a goal on a website, mobile app, or other digital product. It is a series of steps or screens that a user navigates through to accomplish a specific action or task.
Information Architecture
Information architecture is the process of organizing, structuring, and labeling content in a way that makes it easy to find and use. It involves creating a framework for how information is organized and presented on a website, app, or other digital product.
Wireframe
A wireframe is a visual representation of the layout and structure of a website, mobile app, or other digital product. It is a low-fidelity, basic design that focuses on the placement of content and functionality, rather than visual design elements such as colors, fonts, or images.
Design System
The design system eases me when designing the mock-up. Consist of style guide and components, this will be so helpful because I don’t have to determine the style and make the components from scratch every single time.
Mock up
Visual representation of a design concept, typically created in the early stages of a design project. It is a static or interactive model of a product or interface that shows what it will look like and how it will function when it is built.
Prototype
Create a tangible representation of the solution that can be tested and refined based on feedback from users. This allows designers to identify potential issues and make necessary adjustments before moving on to the final stage of the design thinking process. By creating a tangible representation of the potential solution and testing it with users, designers can ensure that the final product meets the needs and expectations of the user group
Test
Based on the feedback received, designers may make further adjustments and modifications to the solution, refining it until it meets the needs and expectations of the user group. This iterative process continues until the solution is deemed effective and ready for launch. Once the solution has been finalized, designers work to launch it to the target audience, monitoring its performance and collecting feedback from users over time. This feedback is used to make ongoing improvements and ensure that the solution continues to meet the changing needs and expectations of the user group.
Usability Testing
Method of evaluating a product or system by testing it with real users to determine how usable, effective, and efficient it is. It is a technique used to evaluate the ease of use, learnability, and user satisfaction of a product or service.
Objective
- Participants try out the features that I have created
- Seeking insights from participants to improve the feature I have created
Task
- Participants search for products they want to try on.
- Participants can find products that have sign of Augmented Reality [AR] feature.
- Participants can use Augmented Reality [AR] feature smoothly
Scenario
- Participants are shopee app users who are looking for a product but they are still doubtful and they really want to try it before they buy the product. so what should participants do?
- After they have found the product they are looking for, do participants know how to use the Augmented Reality [AR] feature?
- Retrieved from the CTA Button for Augmented Reality [AR] feature, do they know how that feature works?
Metric
Things to be measured through Interviews :
- Knowing what the participants feel about the Augmented Reality [AR] feature
- Participants feel a better experience while online shopping at shopee
- Participants can use Augmented Reality [AR] feature smoothly
Questions to follow up :
- What do you think about the overall design ?
- Can this feature can make you buy the things you want without any hesitation?
- Are there any difficulties while using this feature?
- What needs to be improved from this feature?
To Observed :
- Duration of the task
- Miss on clicking
Findings
Scenario
You are a buyer who is looking for a fashion product that is still having doubts in choosing which fashion product suits your dressing style and you are a very stylish person in dressing so what should you do to convince yourself to choose a fashion product before you buy that particular fashion product that suits you.
Instruction 1
Participants are shopee app users who are looking for a product but they are still doubtful and they really want to try it before they buy the product. so what should participants do?
Result
The behavior of participants contained in this usability testing phase :
- All of them succeeded at this stage because the users of the shopee application were familiar with the phase of searching for the products they are looking for.
- But at this stage they all ask the same thing, which is a new sign that they have never seen before. the sign is a mark for products that can use the augmented reality [AR] feature
Design Iteration
Instruction 2
After they have found the product they are looking for, do participants know how to use the Augmented Reality [AR] feature?
Result
The behavior of participants contained in this usability testing phase :
- 1 participant were confused about what button they should press to use the Augmented Reality [AR] feature
- 2 participants has understood because there is a additional sign at the CTA button between “Add Chart” and “Beli Sekarang”
Design Iteration
Instruction 2
Retrieved from the CTA Button for Augmented Reality [AR] feature, do they know how that feature works?
Result
The behavior of participants contained in this usability testing phase :
- 2 participants feel familiar because they often use the “Filter” Feature on Snapchat/IG /Tiktok which functions similarly to Augmented Reality [AR] feature on Shopee
- 1 participant still confused because he doesn’t know how to use it and doesn’t know what the Augmented Reality [AR] feature means
Design Iteration
Summary Insight
1. Add a tutorial or guideline for the AR feature at the beginning of the update
2. Beautify and make a simple UI on the AR feature
3. Made for all products can use the AR feature because the 3D details are very helpful for users
Closing
In summary insight. I hope that this presentation has provided valuable insights and information. If you have any further questions or would like to discuss any of the topics covered in more detail, please feel free to comment or direct message. Thank you for your attention and time.
