UI/UX Case Study: Shopee Redesign
**Disclaimer**
Mixed languages (English and Bahasa Indonesia)
This case study was first written on Google Slides in early March 2022, however, I relocated it to Medium in early May 2022. As a result, as of the months of April and May, this version of Shopee could be outdated.
Background
Shopee has succeeded in becoming one of the favorite marketplaces for Indonesian people. Shopee is ranked second as e-commerce with the highest average monthly web visits, with 127 million visitors (Sirclo, 2022).
With its large number of active users, Shopee has evolved into a super app that allows users to do everything in one place. This implies that there are a lot of features that aren’t geared toward purchasing or selling. This gradual but steady shift has enticed new and existing customers to continue to use Shopee for everything in their everyday lives, not only for shopping and selling purposes. This change, on the other hand, comes with a slew of drawbacks.
With the addition of the new features, the Shopee mobile application actually complicates the crucial parts of the app, such as the product search and selection process, which is ironic given that a marketplace seeks to be a platform for carrying out purchasing and selling process. There are a variety of reasons for this, including too much information on one page, no clear guarantee of authenticity, too many features, the app being too cluttered, and so on.
The objectives of this case study
In general, I hope to be able to refocus Shopee’s core purpose back to shopping and selling, while maintaining support for the additional features, through this case study. The following are a few of the primary objectives:
- Fix the Shopee mobile app usability issues as best as possible
- Create a simpler look
- Improve the product search and selection process
- Improve the cart feature
The process
1. Empathize
In this step, I delved deeper into Shopee’s corporate goals, competitors, online shopping behavior in relation to COVID-19, and user research to discover customers’ pain points. Due to time constraints, user research was conducted via survey, app reviews, and heuristic evaluation. All of these methods were done to validate my biggest concern about the app, which is the product search and selection process and the use of the cart feature.
Survey
The survey received 25 responses, however by the time the data was evaluated, only 24 people had completed it.
Main findings:
- 100% of the participants have previously shopped online
- 91.7% of the participants are aged between 18–25 years old
- 54.2% of participants shop roughly 5 times per month on a regular basis
- 83.3% of the participants chose Shopee as their favorite marketplace (followed by Tokopedia)
5. 50% of the participants have experienced some difficulties while using the Shopee mobile app
6. 37.5% of the participants struggle to find original products
7. 29.5% of the participants find the app is overly crowded
8. 70.8% of participants find it difficult to complete checkouts
“To find things in crowded carts, you’ll have to scroll”
“Suddenly, things are out of stock”
“There are far too many options”
9. 79.2% of the participants have difficulties adding items to their shopping cart
“The amount of things in the cart has a restriction”
“In the cart, there is no way to categorize or manage the items”
10. Easy checkouts and payment process is the top priority for Shopee users
Followed by:
2. Easy status checking
3. Quality of the products
4. Easy navigation
5. Sellers’ fast response
6. Easy product searching process
7. Minimal ads
8. Ease of sharing links
9. Other features such as Shopee games and Shopee live
Other than the survey, I went to Google Play and App store to find the reviews on the Shopee mobile app.
Reviews
While reading the reviews, I noticed that many people had issues with how cluttered each page is, particularly the home page. Even though this isn’t the use case that I’m aiming to improve in this case study, it will undoubtedly have an impact on the final result.
Heuristic Evaluation
2. Define and Prioritize
From the data that I’ve gathered from the empathize stage, I analyzed and defined the main problems that the users of Shopee commonly experience. While I’d love to be able to resolve all of the issues that users may encounter, I don’t believe that’s feasible given my time constraints.
As a result, I prioritized some of the issues that I believe will have a significant impact on the users’ overall experience. This priority would, of course, be dependent on the users’ own inputs.
According to the data from the survey, even though an easy product searching process and the use of the cart feature aren’t a top priority for some users, doesn’t mean that they haven’t had problems with those processes and features. The number of people who have trouble identifying original products and the percentage of people who have issues with the cart feature confirm this.
User Persona
I created a user persona based on common patterns of the users’ behaviors. This helped me to stay focused on the things that users genuinely need as I was redesigning the app. Also, it serves as a reminder of who I am designing for.
The Product Search & Selection Process
From the survey and reviews that I’ve analyzed, the following are some of the reasons why users experience difficulties while searching for products:
- Filter feature could be simpler
- There is no symbol or sign that informs the user that a product is authentic on product cards
- Shopee Mall is not a highlighted feature
- Displays are too crowded that users are confused
- Too many features that are less important for the buying and selling process
- There are far too many ambiguous categorizations
The Cart Feature
From the survey and reviews that I’ve analyzed, the following are some of the reasons why users experience difficulties while using the cart feature:
- There is no search, filter, or sort feature available
- The amount of products you could add is limited
- Difficult to find products that are not available anymore
3. Ideate and Prototype
At this point, I searched for solutions to the main problem I’ve defined in the previous step. Sketching, wireframing, and prototyping are all part of this process. Figma was used for wireframing and prototyping, while paper and pen were used for sketching.
Wireframe
Prototype
What changed?
For the home page, I made a few changes:
- Putting Shopee Mall as one of the main features
I did this because 37. 5% of respondents in the survey have said it’s difficult to find original products. Shopee Mall is composed of sellers who manufacture their own products, ensuring that they are authentic. By doing this I hope to ease the issue of finding authentic products.
2. Putting “Favorit Saya” as one of the main features
I did this so that the users no longer have to go to the profile page to open the feature. Survey participants also said that when the cart is full they have to add the product to the “Favorit Saya” section. In addition, this will also encourage users to re-open the products they have added to their favorites and make purchases.
3. Only a few categorizations are available on the home page
Because 29.2% of the participants and users who left reviews thought the Shopee mobile app is overly cluttered with all the icons, banners, and adverts, that’s why I made this change. This is accompanied by a cleaner and simpler appearance.
The categorizations were also arranged according to what I believed were the most important features or categories for users. I chose to include Shopee Live as one of the main categories because Shopee seeks to push new services like Shopee Live. By doing this, it will provide users with easier access. Users have also expressed how crucial it is to have quick payment and discounts/promos, which is why I included Shopee PayLater and Vouchers.
4. Using underlined texts
In the world of digital design, underlined texts usually symbolize a clickable link. When scanning the page, underlined text is a strong visual signal for the users that ensures link visibility. I did this to tell the users that those are clickable links that will take them to a different page or features. You can see I did this on the “Lihat lainnya” or “Klaim koin di sini” text.
5. Meaningful recommendation categories
Instead of displaying a lot of ambiguous categories for recommended products, I decided to simply show a few, which include:
“Flash sale” (for users that are discount hunters or an impulsive buyer)
“Kategori” (for users that have a certain type of product in mind)
Shopee Mall (in a different color than the rest of the page, to make it more visible to users)
“Produk pilihan untuk kamu” (products recommendations with quick and easy adjustable filters)
For the search page, I made a few changes:
- Slideable categories
I did this to make it easier for users to see past searches and last-seen products. This will also help users to see popular products and categories on their own separate pages without needing to scroll down.
2. Refresh/ reload button
On the Shopee mobile app, only a few of the popular searches and categories are available for the users to see and access. To improve that, I decided to add a refresh or reload button that will let users stay on the same page, even when they want to see more examples of the popular searches and categories.
3. Search products by voice
Some reviews say that search by image is very helpful for the product search process. I decided to add search by voice to make the search process easier.
- Making the “Filter”, “Relevansi” and “Urutkan” features more visible to users
I did this to make it easier for users to find those features. I also added icons that will be easier for users to scan through.
2. Adding a logo for original products for users to see without opening the product page
The difficulty of finding original products is one of the biggest issues for users. I made it easier by including the “ORI” symbol on the item listing page, which users could see right away, making the product searching process easier. Aside from that, I added a “100% Ori” filter that users can apply just by tapping it.
- Search feature
I did this because 70.8% of survey respondents said they had trouble checking out. One of the reasons is that finding things in the cart requires scrolling.
Furthermore, some reviewers stated that the search feature would be really beneficial.
2. Categorizations for invalid products
This was done to avoid users’ confusion while searching for products in the cart, it also eliminates the need for users to scroll to find invalid products.
The limit on the number of products in the cart was recognized as a major annoyance by many participants. I believe that by removing the invalid products from the cart, the cart would not reach the limit as quickly. Then, if a user wants to check where some of their items went, they can look through the invalid products category to discover all of the items that have been removed from their cart.
3. Easy access to “Favorit saya”
I did this because consumers stated that when their cart is full, they need to use the “Favorite saya” function to store the things they want to buy before ultimately adding them to the cart. I decided to make the “Favorit saya” function more accessible.
Now that you’ve heard me ramble for a while 😅 , if you want to see the results by yourself, please go ahead and look through this interactive prototype!
P.S. Some parts are scrollable!
If you’ve made it to the end, thank you! I learned a lot while working on this case study! Of course, this case study is far from perfect, so any input is appreciated! Please leave any constructive criticism or suggestions that you may have in the comments section, and I’ll make sure to take them into account.
I’m excited to do more case studies on other applications. So, what should I do next? Any suggestions? 🧐
Thank you!
