UX Case Study

Case Study: The Simplification of Shopee Indonesia Homepage

9 min readMay 4, 2022

Hi! It’s Fira again. I’m currently participating on UI/UX Design Bootcamp organized by Dibimbing.id. The research part of this article is a group assignment given by mentor, which is then written individually by each member of the team making it uniquely different from each other and submitted as portfolio. The ideation part until the very end is my own work.

Disclaimer: This research conducted for only Shopee Indonesia App. Reviews on other countries’ app might be vary and different. We neither work for nor in contract with Shopee Indonesia.

Overview

From the research that our team has done through various reviews on Google Play Store and App Store from both Android and iOS user, we found user complaints regarding the laggy app due to crowded UI. According to the preceding statement, our team has found some pain point as it opens space for the opportunities to comply with users needs. We choose this app because we think it’s better to provide better experience towards using the app for the user by simplifying it.

Role: UI/UX Designer
Scope: User research, analyzing, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing.
Tools: Google workspace, Figma, Miro

The Process

In order to make digital product, we need a framework to produce it. In this case, I use design thinking framework consisting of empathize, define, ideation, prototyping, and testing.

Empathize

Based on qualitative research process, this research consist of three major parts: research plan, conducting research, and research findings.

Background

Based on Google Play Store and App Store review there are complaints from users regarding of slow running performance on the app which decreased their productivity. Therefore, to avoid complaints and reduce disturbances related to the issue of applications regarding these problems, we plan to simplify the application to boost Shopee Indonesia performance. In this research, we would like to understand the problems of Shopee Indonesia users. In this case, we focus on gaining information from buyers. Also, we would like to understand how these buyers that are using Shopee Indonesia perceive and feel in using Shopee as their main marketplace. Therefore, the objective of this research are:

1.To understand buyers’ experiences while using Shopee.

2.To find out what buyers’ expectations are towards the Shopee mobile app.

Both of the objectives are intended to meet user expectation towards the existing app in order to improve it the right way.

Existing App

Shopee Pte. Ltd. (Shopee) is a Singaporean multinational technology company which focuses mainly on e-commerce. As of 2021, it is widely considered as the largest e-commerce platform in Southeast Asia with 343 million monthly visitors, and the company also serves consumers and sellers throughout in several countries across the Americas and Europe who wish to purchase and sell their goods online. As mentioned earlier, with humongous amount of monthly visitor, comes big amount of reviews as well. When this article being published, the number of reviews on Google Play Store alone is as much as 9 million, with number of downloads is more than 100 million times. However, behind this reviews and ratings there are still complaints given by the Shopee Indonesia users.

Research Plan

Before conducting research, we made research plan first as a guidance to keep the research right on track.

Methodology

Our team used qualitative method (unstructured interviews). This method is used because we would like to know deeper regarding what the buyer feel and say regarding their experience using Shopee as their e-commerce and their expectations towards the Shopee mobile App. Thus, an unstructured interview allows us to capture the bigger picture from their perspective.

Sample Specification (Participant Criteria)

Shopee users who have been actively using the app for at least 1 year.
Female/Male
21–30 years old (productive age)
Nationwide

Sample Structure

We pick purposive sampling for 7 users who are having trouble with the amount of features in Shopee Indonesia App. Users criteria picked around 21–30 because they are most likely junior-senior jobber who already have their own income and tend to spend money on shopping. We have done screening to random users regarding demographic so that it could match with predetermined sample specification.

Key Information Areas

This section is about main topic that will be explored in the research. These topics are the basis for designing interview questions. There are 5 topics that we will explore:

User demography
Motivation to use the app
Awareness towards the app
How user use the app
User expectation

Discussion Guide

The discussion guide contains the stages of the interview process, question list that we have compiled based on Key Information Areas.

Conducting Research

After finalizing research plan, we started to do the research with these steps:

Choose 7 participants whom matches the criteria.
Conduct in-depth interview online via Google Meet.

Research Findings

To make it easier to explain, from the interview verbatim, we made affinity diagram. The grouping makes it easier to summarized the conclusion. From there we tried to make user persona to give us bigger picture about the problems there are. Therefore, we pointed out problems that user had been experiencing on Shopee Indonesia App. Then, from all the problems that have found, lastly we made prioritization on actionable plan using Eisenhower Decision Matrix.

Define

Affinity Diagram

After the In-depth Interview was done, the insights from users are represented using affinity diagram. Using this technique can help us group diverse insights so that they can form a topic based on similar verbatims.

User Persona

User persona is fictional character created to help us find the target users. This technique helps us to understand users and solve their problems.

Customer Journey Map

Customer Journey Map is the journey of users when interacting with the product. By creating this we could find lots of insights about users such as what they’re feelings, pain points, and opportunities that could be used for the app improvement. Based on the result we got from the interview, users are having quite a lot of pain point that shown on the diagram below.

Problems

The result of Affinity Diagram and Customer Journey Map shows that there are few main problems in Shopee Indonesia App.

1.Crowded landing page causing lag on the app.

Laggy app causing productivity of user to pushed down into decreasing. There are user that annoyed by this condition. They ended up using another application as alternative. User need to have simplified, less crowded interface so that the performance could be as immersive as they wanted to be.

2. Having hard time to choose the applicable voucher and promotion to the transaction.

The terms and conditions for applicable voucher and promo is too vary and complicated, on the check out page instead of transacting they spent more time choosing the right voucher to be used. User need feature that automatically apply the top recommendation of the most profitable promotion for them instead of picking one themselves.

3. No feature displaying similar product recommendation on ranged price.

The absence for this feature making it hard to pick the right product on the right budget price. They ended up taking more time looking for the right product with the right price manually. User needs to be able to pick range of price so it could matches their budget.

Actionable Plan (Recommendation)

From the result of this research, we provide recommendations obtained from the users pain points while using the Shopee Mobile App. These recommendations served to comply with user’s needs based on the expectation point of customer journey map. Therefore, we decided to pinpoint problems that needs to be solved using the Eisenhower decision matrix. According to the importance and urgencies, we choose the first priority of actionable plan which is features simplification. Followed by the next priorities that are recommendations for similar products with various prices and the feature that displays applicable vouchers at checkout checkpoint.

Ideate

From the research that has conducted I chose one actionable plan which is simplifying Shopee App. From there I was doing ideation in order to figure out how the interface ideally should look like.

User Flow

User flow is made to describe the flow of user in the usage of the product. The following is the user flow of the activities from logging in to checking out product from Shopee.

Information Architecture

After making the user flow, Information Architecture is made for arranging the flow, content and design requirements per page of an application. The IA of this redesign project of the app is shown below.

Wireframe

After making the IA I sketch up the wireframe. Wireframe is a static, low-fidelity representation of different screens and pages that form a product, creating visual representation of page layouts.

Mock-up

Based on made wireframe, I then made a mock-up. Mock-up is a full size model of a design or device that can be used for product presentation. At this section we create combination of styles, typography, colors, and others. The mock-up of the redesign is shown below.

Design System

A design system is a collection of reusable functional elements–components and patterns–guided by clear standards that product teams use to create a consistent experience across a range of products. Design systems act as a single source of truth for an entire organization by using a singular design language to guide the development of products. Making this design system will help the entire team easier to work together and maintaining consistency of the overall interface design.

Prototype

After the stages of empathize, define, ideation has been carried out, I then created prototype using Figma. Prototyping is the process of building an interactive experience. Prototype represents the final product, including simulations of user interface interactions.

You can see the prototype on the link right below:

Link to simplified Shopee App prototype (redesign)

Test

Usability Testing (UT)

After doing the preceding section, I have done Usability Testing. Usability testing is a technique used in user-centered design to evaluate a proposed solution or product by testing it with real or potential users. UT helps to figure out whether or not the design that has been created can help user comply with their tasks.

The UT was conducted to evaluate new simplified design on the homepage viewing experience, and switching between pages and its efficiency compared to the original design. The participants are those who are Shopee user.

You can see the complete reporting of the UT on the link right below:

Usability test reporting: Simplified Shopee Homepage

Summary

Based on the conducted UT, all users have managed to finish the tasks given completely. The only problem was user that getting a bit confused of the second homepage. The second homepage can also be accessed from the recently seen button on profile page. The suggestion from the user is that the recently seen page can be used as a standalone page without having to be accessed from the second homepage.

Appendix

Thank you for reading this post, I’ll be more than happy for any input that can help to improve my work in the future.