Shopee — UX Case Study

Shopee is one of my favorite apps. I have found some of my favorite

products here. Moreover, thanks to Shopee, I could meet Sesame Street
friends at Universal Studio Singapore on their Family Day.
 Yes..I was excited..

But as a Shopee lover, I always thought that this app could still be better.
This is a study of the possibility of a redesigned Shopee. (Note: I’m not
affiliated with the brand in any way. I’m just an excited user!)

Overview
Shopee is a leading e-commerce platform in Southeast Asia and Taiwan. It
has a wide selection of product categories ranging from consumer
electronics to home & living, health & beauty, baby & toys, fashion and
fitness equipment.

With Shopee, customers can enjoy an easy, secure and fast online shopping
experience through convenient payment options and strong logistical
support.
Scenario
I identified different scenarios that a Shopee user may encounter to provide
the best shopping experience. I set Scenario 1 as the starting point and used
this scenario for further guerrilla usability testing.

🔸 Scenario 1: User knows the product but not the brand for shopping
(default scenario)

🔸 Scenario 2: User knows the brand but not the product for shopping

🔸 Scenario 3: User knows the product and its brand for shopping

🔸 Scenario 4: User doesn’t know the product and its brand for shopping
Guerrilla Usability Testing
To get some insight into the platform, I interviewed and ran tests with five
people. I explained the task scenarios to each participant and asked them to
complete the task while verbalizing their thoughts.
Task Scenarios
1. You are taking a bus from work to home. You just remembered that
you are going to attend your friend’s wedding next weekend.
2. You are going to buy a new red dress for the wedding. Use ‘Shopee’ to
find a dress for the wedding. 3. Buy the dress you chose on ‘Shopee’.
(Testing terminates right before making the payment)

Persona
In this case study, I created a proto-persona, Rachel Lee, reflecting a Shopee
User to guide the case study. Improving the functionalities of the app, will
help provide the best possible experience for Rachel.

Affinity Mapping
Affinity mapping is used to identify the common pain points from the
guerrilla usability testing. By organizing and categorizing the data, I could
understand users and their needs better.
Prioritization Matrix

Based on this prioritization matrix, I decided to focus on fixing these pain

points, with the following priorities:
⚪ Pain point 1: User feels there is too much text and information

⚪ Pain point 4: User expects to be able to sort search results more

efficiently.

⚪ Pain point 6: User expects to know how vouchers and coins will actually
be helpful.

⚪ Pain point 3: User expects to know the trends in their age group.

⚪ Pain point 2: User is unaware that there are more main icons on the
Home Page.

⚪ Pain point 5: User feels less inclined to buy if only a small number of the
product has been sold.

Sketch Storming
Once I gained a clearer picture of the users, their needs and priorities, I
started sketching and preparing a low-fi prototype. I could get some ideas
through this sketch storming.
Prototype
Homepage
Banner — The main banner is an important element that can get users
inspired and helps them explore Shopee. However, for many South-East
Asians that use small screen smartphones the current banner contains too
much information. So my first step was to make this promotion banner
bigger and simpler.

Main Icons — All the participants were unaware that there were more icons
even though there is a small white bar in the middle of the screen. So I also
made the icon on the right side appear halfway, so that users can notice
more easily that there are more icons there. (Wow, this is now reflected on
Shopee’s new version!)
For more space for ‘Just For You’, I relocated icons horizontally. Horizontal
scrolling allows users to see many features by swiping to the side. I also
redesigned the icon set, with a coherent and consistent use of Shopee
colours.

Just For You — Based on a user’s history, Shopee offers many

recommendations, such as ‘You May Also Like’. As Shopee has a wide
selection of product categories, it’s important to make these
recommendations more user-centered. I introduced ‘Just For You (Name)’
on the first page as a personalized recommendation feature so that users
can feel that Shopee is more friendly and meaningful to them.

Flash Deals — I discovered users like Shopee’s Flash Deals. Flash Deals
introduce curated products at a promotional price for a limited time only.
However, three participants said they don’t feel any interest if they see a
product sold 0. So I changed the number of products sold to a small text
instead of showing as a distinct bar. Also, to encourage users to scroll and
explore, the time remaining for the Flash Deals is shown on the first screen.

Shopping Cart Icon — I redesigned the shopping cart icon utilizing the
Shopee logo so that users can recognize and connect with Shopee.

Navigation — I combined the chat on top and the notification on the

navigation bar so that users can check all the notifications from the app in
one place.
Search Page
The search page shows overall changes to display

· What a user has been interested in

· What other similar users are interested in

‘History’ and ‘Liked’ allow users to check 1) what users have been interested
in. 2 participants in the interview didn’t know where to find previously
‘liked’ products. So, to provide a better user experience, I introduced a new
section where the user can easily find products they liked previously. For
extra convenience, I provided an option that allows users to check the date
that they searched for something.
The current Shopee also shows ‘Trending Searches’ on the Search Page.
However, 3 out of 5 participants in the interview answered that 2) they want
to especially know what is trending among their peers. They also wanted to
know which products specifically were trending, rather than just the
trending categories. So, I included an option that allows users to check
products trending in their age group in real-time.

At the beginning of my research I identified Scenario 4 — in which a user

doesn’t know the product and its brand for shopping. With the features
‘Flash Deal’, ‘Just for You (Name)’ and ‘Trending’, Scenario 4 is covered.
Listing Page
I discovered 4 out of 5 participants in the interview think that there are too
many filters on the listing page. For a user’s easy shopping experience, I put
options in a bright orange filter box.

The color of the related search words is changed to monotone to make this
filter stand out. However, I didn’t include a ‘Sorting Option’ in the filter as I
found that participants expected to change the order of the list directly on
the listing page.
Like on the Homepage, I found that users don’t feel attracted to products
which have sold in small numbers only. So I changed the quantity to a star
rating.

With the current Shopee, when users have brand information for shopping,
it’s relatively easy to get suitable results. However, for Scenario 1 — in
which a user knows the product but not the brand for shopping, it was not
easy to get suitable ones.
Filter — Users have trouble finding a red dress. Whenever a user types in
‘red dress’, the results also show dresses of different colors. Most of these
dresses also have a red version available, but the users have to tap many
times to be able to check this. So I’ve added a color option to the filter. This
will help users in Scenario 1, especially to sort through items of a specific
color.
Product Page
On the Product Page, it’s difficult for users to check if the color and size that
a user is looking for is available before tapping ‘Add to Cart’ or ‘Buy Now’. To
help users find out if their size and/or color are available before making a
decision, I added a new option box. I also relocated all the information
related to the price in one location together, near ‘Add to Cart/Buy Now’.
Shopping Cart
For a user’s easy and quick access, I tried to avoid using heavy text and
images. I changed the color of the Shop information to a turquoise color like
on the Product Page. I also designed a new ‘Check Out’ button to maintain
visual consistency.
Check out
On the Check out page, the total payment is shown only once as a total in a
bright orange color. This is to avoid confusing users and to hide any
potential additional fees, which might affect the total.
Profile
With Shopee Coins and Vouchers users can get discounts on orders.
However, from the interview, I discovered users feel that these coins and
vouchers don’t have much value. So, on the Profile page I wanted to
highlight Coins and Vouchers as actual numbers so that users can get a
better sense of the discounts offered to them.

VALIDATE
To validate my prototype, I conducted usability tests with five people and
saw how many users were able to complete the tasks without feeling the
pain points.
Notes: In future research, I would like to spend more time collecting enough
data on Shopee users diversifying the pool of users to test with (gender, age,
etc.) and seeing how often and in what kind of situations users use Shopee. I
would also like to collect data on Shopee sellers to consider their
perspective.

Moving Forward
Working on this case study has been a great experience. Looking back on my
notes, I feel glad that I could proceed and deliver a prototype within such a
short timeline.

During the course of my case study, I realized that the first screen of Shopee
was changed significantly by the company. The major changes were new
features, such as Shopee LIVE and Style By Shopee. Also, the paint point 2—
I mentioned above — has now been clearly resolved in the way I suggested
myself (Wow!). I realized that this brand constantly considers new
possibilities for users and challenges to create a better design language in a
fast-paced work environment
Through this project I have come to understand the value of my background
in economics and psychology in relation to User Experience Design. I knew
having a psychology background would be beneficial for understanding User
Experience. However, this project made me appreciate the close connection
between economics and user experience for the first time. During my work, I
found I was trying to find the best way to meet needs under conditions of
limited resources, just as an economist does. (Note: Economists study the
best ways to meet needs under conditions of limited resources.)

I hope my work offers some ideas to the Shopee Design Team. Thank you for
reading! I hope you enjoyed this case study. If you have any feedback, I’d
love to hear from you. Say 👋 at dy.lee.designer@gmail.com or connect on
LinkedIn.