Shopee Redesigned Home Tab
OVERVIEW
This project was the submission that I and my team proposed for the Shopee Product & Design Challenge. The proposed solution aims to improve Shopee’s user experience and interface in order to increase users’ interest in using the application.
ROLE
Product designer, Visual designer, UI/UX designer, User discovery and researcher
DURATION
3 Duration: 1.5 weeks (December 2020)
TOOLS USED
Figma
BACKGROUND
Shopee’s Product & Design Challenge 2021 is a competition focusing on Product Management & UI/UX design. The idea is to create or improve the ultimate feature for the Shopee app.
​
My team consists of 3 people, with me being the sole product designer and 2 people as the user research and the ideation. I was responsible mainly for product conception and UI/UX design, but I was also involved in research, product ideation, and business development.
​
With a short amount of time, my team and I managed to achieve the following:
-
Ideation and conception of the product - We managed to understand and work on the problem through user research and proposed a complete solution.
-
Performed end-to-end design - We were able to run user research to find out the pain points of the problem and developed the solutions.
-
Shortlisted for the semifinal - My team was shortlisted for the semifinal out of 700 teams competing.
PROBLEM STATEMENT
Initially launched in 2015, Shopee is now the leading e-commerce platform in Southeast Asia and Taiwan. It has continued to successfully create an easy, secure, and engaging shopping experience for the customers. As part of maintaining its presence, Shopee is trying to improve the user experience of its mobile app. In this case, any solution will be allowed, either improving Shopee’s current features or adding a new feature.
OUR SOLUTIONS
Our solution is to redesign some of the Shopee’s interface - mainly the Shopee’s home tab - in a hope that it will improve the user experience. The Home Tab is the first page that the users will see while using the app. Hence, it is important to ensure that Shopee gives a good first impression to the users by providing a good user experience with an interface that is easy to use and soothing to the eyes.
​
In this project, we mainly targetted our market to the Indonesia market since it is the most profitable country for Shopee
I. EMPATHIZE
RESEARCH
To understand the problem, even more, we needed to do more research. Here, I gathered several supporting data by surveys and interviews.
​
-
First, a survey was given to 61 Indonesian Shopee users ranging from 17 - 24 years old. The aim was to collect users’ opinions about Shopee’s Home tab ( layout or structure, design, and the contents or features that can be found in there)​
-
Based on the survey, we interviewed 3 people with differing demographics (age, gender, and occupation) and shopping behavior to understand more about their impressions on Shopee, their shopping journeys, and their preferences between Shopee and Tokopedia.
Based on our survey and interview, we summarized some pain points that most of the users felt while using the app:
​
-
The Home Tab is cluttered with too much information that is represented by too many texts, icons, and sections
-
The category section is hard to find - It is located at the bottom of the Home Tab. Hence you have to scroll through the page to find the section which is troublesome.
-
Many people do not understand the purpose of Shopee Feed and Shopee Live
-
“My Favourite” tab is a bit hard to find - It is located at the "Account" page which requires few steps to get to the "My Favourite" Page.
II. DEFINE
USER PERSONAS & EMPATHY MAPS
Based on our interviewees, we created 3 user personas that represent our target customers. Moreover, we also developed empathy maps to better empathize with the problems of the users.
III. PROTOTYPE
SKETCHES & WIREFRAMES
Once we understood more of what the user needs, we proceeded with the sketches and prototypes of the improved interfaces.
PROTOTYPES
After we had done creating the sketches and wireframes, we transformed it into high fidelity prototype using Figma. The followings are some of the final prototypes compared to the current Shopee interface. Answers some questions and we’ll recommend you the best books that suit your interest!
Home Tab
To resolve the cluttering of the Home Tab, we decided to remove some icons and sections based on our survey results. We hope that users will feel less overwhelmed with the interfaces.
​
We also noticed that many people used my favorite section to save and access the things that they have liked. Hence, we moved my favorite section into the home tab header so it is more accessible without needing to find it in the account section.
Search Bar
Moreover, we also moved the category section into a more accessible location which is at the top of the page while accessing the search bar. The purpose was so that it will be much easier to be found and it can ease the users in finding things that they want by giving recommendations while using the search bar.
Shopee Feed & Shopee Live
We also noticed that despite the popular usage of Shopee Feed and Live in Indonesia, some people are still unaware of the existence and the purpose of Shopee Feed and Live. Hence, they rarely use this feature. To better facilitate the usage of these features, we proposed to provide some explanation of the usage of these features while accessing the features. It can be some explanation like the following, or step-by-step description of the usage of each feature there.
After
LESSON LEARNED
Since this is my first UI/UX project, I notice that there are many flaws in my team's design thinking. Nevertheless, there are many lessons that I can learn from this opportunity as such:
-
Conducting user research - In this opportunity, I learned the importance of conducting user research to understand more about the pain points that the users felt. I understand that sometimes what I imagined would be the problems were not actually the real problems. Instead, users might feel other problems that I did not notice previously. ​
-
Focus on the users - As I designed to improve the user experience, I had to think of what the users want and try to prioritize what they want instead of what I want
-
Software exposure - In this opportunity, I got the chance to expand my knowledge in trying out new software. In this experience, I got the opportunity to learn more about Figma and all its features, and so far, it might be my favorite software.