Shopee Homepage Redesign
Take home design challenge for UI/UX Design internship with Shopee
Objectives:
1. To redesign the Shopee Home tab for the SEA region (Singapore, Malaysia, Indonesia, Thailand, Vietnam, Philippines, Taiwan).
2. To improve performance of the overall click rate.
Materials Provided
- UI of Homepage
- Average clicks per user for each element on Homepage
Project Type
1-week Take Home Design Challenge
What I Did
Heuristic evaluation
User research
Low to high fidelity prototyping
Usability testing
Design Process
Given 7 days to take on this design test, I made the plan immediately and assigned the work for each day to make myself more organised and efficient. Based on the double diamond design process, I modified the processes to suit the time frame of this challenge.
Discover
- Heuristic evaluation
- Secondary research
Define
- Affinity mapping
- Define problem
- User personas
- Task analysis
- User journey mapping
Develop
- Lo-fi prototypes
- Hi-fi prototype
Deliver
- Usability testing
- Iteration
- Final product
Heuristic Evaluation
Given the UI of the Home page, I started by conducting a heuristic evaluation.
Current Information Architecture
Firstly, I charted the Home interface to understand the current navigation flow according to 3 main categories: Features, Promotions, and Categories. This helps me categorise the elements according to their functions and point out any unnecessary elements or functions to be improved.
I was also given the average clicks per user for each element by Shopee. Since the rankings are confidential to the company, I will not be showing the rankings in this case study although it was used in my analysis of the Home page.
Insights
#1
Comparing the average clicks per user with the elements on the Home page, feature and promotional functions seem to perform the best.
#2
User research is needed to discover why categories functions don’t perform as well, and what changes need to be made to increase click rate for categories functions.
Analysis of Homepage
Looking at the interface as a whole, there is a lot of information available on the Home page, contributing to a large cognitive load for users.
​
I understand that the reason for all the information could be (and this is an assumption) that Shopee wants to cater to the different shopping styles of users. However, Hick’s Law tells us that giving the user too many options may cause decision fatigue, and users may end up confused or frustrated, reducing their ability to make a decision. This reduces the overall click rate!
​
To get a deeper understanding of the Home page and determine further issues, I followed the analysis with an in-depth evaluation of the UI.
Understanding Online Shopping Behaviour
To understand users’ behaviour when using Shopee, I felt the need to understand the behaviour of online shoppers before conducting user research.
Secondary Research
According to the E-Commerce User Experience report by Nielsen Norman Group (2014), there were 5 types of online shoppers found. This information was then applied in user research and user persona.
User Research
Armed with greater understanding of e-commerce shoppers, I then proceeded with 5 User Interviews to uncover their behaviours and pain points when using the Shopee Home page.
I spoke with 5 Singaporean users. These users consisted of a mix of frequent users and users who seldom use the Shopee app so as to balance out the findings and derive any key differences.
​
I showed them the Shopee Home page and asked them to walk through what they usually do when they land on the Home page, while voicing out their thought process. After that, I also asked them what is working well, and what they would change about the Home page.
Interview Insights
Based on these 5 users, I found that their shopping styles are...
Users have primary shopping habits, but they do not fit into just one category of shoppers. Users take on different personas depending on their shopping goals.
User Journeys
Insights
#1
Users do not use many of the functionalities on the Home page; they mainly use Search, Flash Sale, & Daily Discover.
#2
3/5 users’ first action on the Home page is to click into the Flash Sale.
#3
Browsing behaviour (Flash Sale, Daily Discover) leads to more clicks.
#4
Users are not interested if Flash Deals are not personalised.
Affinity Mapping
In order to make sense of my user research, I employed Affinity Mapping to find patterns in my data, and categorised insights into groups.
User Personas
To anchor the rest of the process, I focused on Bargain Hunter as the primary persona as it was the most prominent shopper type based on user research. Secondary persona of Browsers was also used to focus on increasing click rate.
Defining the Problem
After gathering all the insights from user research, I consolidated the common pain points to define the problem.
Users are overwhelmed by information on Homepage,
and are thus deterred from browsing.
Goal #1
Reduce visual clutter on Homepage
Goal #2
Highlight personalised deals and sales
Goal #3
Improve consistency & visual design of Homepage
Sketching for Ideas
Placement of design elements were conceptualised to facilitate browsing behaviour and support bargain hunting behaviour, based on the 2 personas.
​
One key change is that Categories was moved to the top half of the screen, below the banner. This change was made as interviewees showed browsing behaviour, but existing design put categories way below, making it more difficult to browse their categories of interest if they were to open the Shopee app for leisure.
The Solution
Usability Testing
To validate my design changes, I conducted usability testing with 5 participants by getting them to complete certain tasks.
Insights from Usability Tests
Good
Users liked the consistent colours being used – easier to process what each function does and less cluttered
Users enjoyed the experience of the new layout with fewer features, able to retrieve info at a glance
To be improved
Need to improve personalisation - there are a lot of categories to scroll through and some categories users don’t use at all
Confusion surrounding Region button – users have varied interpretations of its function
Iterations
#1
Made Categories Icons customisable
Able to reorder & delete unused icons
#2
Made Region more intuitive
Let users know it is to choose their country of residence
#3
Included 'My Favourites' function
So that users can save preferred products and think on it or use it to compare between products and prices
Takeaways
-
I had fun doing this challenge! With each step in the design process, I uncovered more issues and greater insights in the design.
-
This project taught me that each step in the design process is critical in contributing to the end product.
-
It is important to listen to the feedback of your users, especially in e-commerce where there are diverse user personas. You are not the user.
Given more time and resources, my next steps:
-
Conduct more user research on the e-commerce personas - 5 interviewees was a good start to address all the initial problems found, but continuous research, testing, and iterations are needed to fully refine the product. This is especially as there are so many different types of online shoppers and different tasks that they do.
-
Card Sorting to test info architecture – best way to check users’ expectations of the info architecture and their mental models
-
Work on Shopee's full range of features - Shopee Games, Rewards and coins system
-
Could work on micro-animations as well, gives a direct sense of manipulation in design and more visual feedback (e.g. Shopee's current Home page micro-animation that toggles between the top of page and Daily Discover - solved the problem of a very long scroll to access Daily Discover)
