![](https://pro2-bar-s3-cdn-cf2.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/3a2bceee-c60c-4135-80aa-eea38e0a7112_rw_3840.jpg?h=c6611a140a1a5bd9c9e6cf29c09d5135)
SHOPEE
OVERVIEW
This is a UX Case Study and a Redesign Challenge based on the Shopee app.
With 48 hours, I adapted the Stanford d.school Design Thinking process to redesign the Home Tab of Shopee based on its given existing interface with end-to-end design execution. After the challenge, I was offered a Spring Internship from Shopee.
ROLE
Product Designer and Researcher
Product Strategy, Idea Generation. Product Conceptualisation, Visual Design, UI/UX Design, User Discovery and Research
DURATION
September 2020 (48 Hours)
About Shopee
Shopee is one of the largest e-commerce sites in South East Asia. Headquartered in Singapore, it now offers e-commerce marketplace convenience to 8 locations in Asia and South America. s of 2019, the platform recorded 200 million downloads. ​​​​​​​Its gross merchandise value also surged 72.7% to US$3.8bil in 2Q19 from US$2.2bil a year ago.​​​​​​​
The Task: Redesign the Shopee Home Tab​​​​​​​​​​​​​​
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/01d42a35-b7fa-4e81-a22e-27490320b824_rw_1920.png?h=387f10f75cd3c93b2a8d248bd1514eeb)
The Home Tab is the face of the entire e-commerce app that will give the user their first impression. Hence, it is important that Shopee ensures a good user experience with an interface that is soothing to the eye will dictate how one will see the entire application.
After looking at several design thinking processes, I have adapted the Stanford d.school Design Thinking process to better fit this design task (as there was insufficient time to properly conduct user testing after the prototype was done). Discover was changed from the original Empathize as it will allow for a wider range of research methods, rather that restricting to just user-related aspects.
Step 1: Discover
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/8e354eda-81c4-4baa-b11b-a0f5809210f3_rw_1920.png?h=6c5fc2a79f2d986515c71ea48b7bfda2)
User Discovery Interviews
Due to the time constraint, I decided to talk to 3 people with differing demographics (age, gender, occupation, nationality) and experience in using Shopee and e-commerce sites to capture a spread of users as wide as possible. Each session lasted around 20-30 minutes in a casual setting, where I get the interviewee to talk about their experience on Shopee as much as possible. I also probed accordingly if they particularly mentioned their shopping habits. A summary of the interviews is shown below:
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/fa6a00e9-6ad0-4688-ba7a-94c57770aa3c_rw_1920.png?h=ac62765110e467002c9053e1bd3aaf1a)
*Names and photos are changed to protect their identities:Â
Heuristic Evaluation
For the challenge, I was also given an existing layout of the current Shopee Home Tab. To evaluate the user friendliness from a novice product designer perspective, I based my observations and suggest areas of improvement on the 6 Principles of Interaction Design by Don Norman.Â
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/4df1a983-b64c-4262-b0f3-4a0594634a36_rw_1920.png?h=e01563de4f250ddad579d46ffd4fdf06)
![](https://pro2-bar-s3-cdn-cf2.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/de65688a-78ac-44de-859e-7e6237f3184c_rw_1920.png?h=5eddc55e9965f7568a04ed33ff5847f4)
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/b16e981e-28a8-48cf-8c24-e2ec3d9af860_rw_1920.png?h=add1245390f15c2e10edde9286188839)
Step 2: Define​​​​​​​
![](https://pro2-bar-s3-cdn-cf2.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/d21900e7-d337-4c4f-8366-fd2a0d563669_rw_1920.png?h=b8cb10151cbfbefb93e4da0eb097f25b)
Summary of Pain Points
Once I have finished the interviews and evaluation, I compiled the pain points one Shopee user might face when they decide to shop.
1. The whole homepage looks too cluttered and is overwhelming even for an experienced user.
2. No visual distinction of sections, don’t know where to look or what is important
3. Users have no indication of rewards, hence the savvy buyer will need to go to the rewards section first to know, then plan their purchases or only find out their rewards as they are about to pay.
4. Similar content recommendations shown all the time, which can get boring for the casual browser -- appreciate more regularly updated recommendations
5. No interest in other people’s interests but yet the sections are on the top. -- appreciate more personalised recommendations
2x2 Prioritisation MatrixÂ
As it is quite unrealistic to redesign in such a short period of time while taking into account the 5 pain points. I decided to prioritise them using 2 factors – importance to the user and the ease to fix (taking into account engineering effort).
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/e347007d-44ef-4866-beee-f1f365617215_rw_1920.png?h=a1e0a0243efee0787d396262ed923ca6)
How Might We'sÂ
To better help me ideate, I used the How Might We (HMW) framework to come up with problem statements.
1. How might we create an intuitive, fuss-free online shopping experience?
2. How might we increase incentivisation for users to shop with us?
Step 3 and 4: Ideate and Prototype​​​​​​​
![](https://pro2-bar-s3-cdn-cf5.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/694c8627-7ce4-40c5-92d5-db38dd88fe03_rw_1920.png?h=4a5674ff26c0918e11f1f57aed76508b)
Hi-Fidelity Sketches with Sketch App
I gave myself a strict time limit to come up with visual elements to improve the user experience using the HMW statements. Then, I sketched out the Hi-Fidelity Prototype with the Sketch App.
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/ee990dc6-649f-45e5-a0be-e92d0c469d96_rw_1920.png?h=ef2418ab14788117cf52aab89a6c8f9c)
Redesigned Home Tab​​​​​​​
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/9afdfd8f-172b-4ed2-a1e8-ba33af63f33e_rw_1920.png?h=487ab5d27f28c7d3580b68218200b5ba)
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/91f2bd26-fc19-4830-b19d-f4e86edf1798_rw_1920.png?h=2e2e007c13f68011271f502ce5437ea3)
Redesigned Product Listing​​​​​​​
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/bf130e02-252c-4e0b-9f15-b47a05a3a4d2_rw_1920.png?h=1f70a24163bf4075442cc0e70240a2a4)
Step 5: Deliver
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/cd4299b6-333d-497c-8078-ac5f4a458292_rw_1920.png?h=193432c23076e55361a34d8c3253ecb7)
Final Visual Mockup
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/49fabc22-a7d5-46bc-a49d-9ccf0560896d/559e3a07-45f0-4f22-9534-4848147e101e_rw_1920.png?h=b47d47bfd43596b00336a3ec56e83b19)
Final Takeaways
The short 48-hour challenge has allowed me to work fast and practice using many theoretical frameworks that I have learned in my classes. But if I was given more time and resources, I would work on more in the following areas:
1. Conduct User Testing on Prototype - Test and run iterations with users of different age group, tech-savvyness and interest
2. Interactive Prototypes - Could use tools like InVision or Marvel to test interaction
3. Delve Deeper into Branding and Mission - As I am unfamiliar with Shopee’s Branding Guidelines and Design Language System (DLS), the mockup could be modified to ensure consistency with the rest of the screens in the app.
For this challenge, I was offered a Spring Internship from Shopee in Singapore.