A UX case study on Shopee (and my redesign of it)

So begins an embarkation on my first ever UX case study evaluation. Having read multiple Medium articles on this topic, I was itching to give this whole process a go. E-commerce apps are not exactly the easiest to evaluate and re-design given their navigation complexities, but I chose Shopee as my case study of choice because I wanted to give myself a challenge.

In this case study, I will be focusing on Shopee’s mobile application instead of the portal.

*Note: I was not affiliated with Shopee at the point of publication and this redesign was done on my own accord.

About Shopee

Shopee is one the leading eCommerce platforms in Southeast Asia. It has a wide selection of product categories ranging from consumer electronics to home & living, health & beauty, baby & toys, fashion and fitness equipment. It also has an in-app chat function that allows buyers to chat with sellers, as well as a rewards section that allows users to redeem Shopee Coins and exchange them for vouchers.

This case study will analyse in detail and aim to improve the user experience that Shopee buyers have when using the app.

My adaptation of the ‘Double Diamond’ model by Design Council

The Design Process

After researching on numerous design thinking processes, I decided to base my process on the ‘Double Diamond’ model, mainly for the reason that it includes the first phase of ‘Discover’, which is a broad categorisation that allows more room for research compared to other design processes which start with ‘Empathise’, which is limited to user-related research.

Below are the methodologies included in each phase of my design process:

Discover

• Main competitors
• Heuristic evaluation
• User research
• Usability testing

Define

• Affinity mapping
• Personas
• Journey mappings
• Problem statements
• 2x2 prioritisation matrix

Develop

• Ideation
• Wireframe design
• Prototype design

Deliver

• Interactive prototype
• Visual mockup
• Medium article

Main Competitors

Here’s a comparison of iOS/iPad AppStore and Google Play rankings across apps in the shopping category, using App Annie.

Looking at the average rankings across the app stores, Shopee places 3rd, with Lazada and AliExpress taking the 1st and 2nd place respectively. The latter two will be taken as the main apps for comparisons against Shopee and referred to for good use case examples. Coincidentally, their app colour is all the same — orange! Confusing much…

Heuristic Evaluation

Using Jakob Nielsen’s 10 principles for interaction design as a guide, I analysed the current Shopee app screens to identify key issues and areas for improvement. Below is my slide deck of the screenshots and pointers.

User Research

I interviewed 4 users of the Shopee app to find out what they thought about it. These users consisted of a mix of both frequent users and users who seldom use the app to balance out the findings.

Key Findings

• 4/4 use the app with an intention to find a particular product already in place, hence they will immediately go to the search function rather than scrolling through the categories on the app
• All of them use the app to buy totally different products (games, arts and craft products, a monitor, and skincare)
• 1/4 users constantly uses the rewards program in the app that allows users to earn coins
• 2/4 mentioned that they usually buy the products on the Shopee website, and use the app to track their products on the go. Hence, the tracking feature on the app was of importance to them. In fact, that was why one of them downloaded the app in the first place.
• With regards to user friendliness and product categorisation, various recommendations were brought up including: 1. Expand on product description 2. Make shipping time clearer 3. Expand on its categories and sub-categories available 4. Explain what the mall tab is about 5. Reduce number of tabs 6. Reduce clutter
• 4/4 of them do not leave reviews after purchasing a product. However, all of them placed a great importance on reading reviews in deciding whether or not to purchase a product.

Apart from interviewing these users, I also went to the app-store to see what other users had to say about the app. Below are some screenshots of relevant comments:

While a lot of the comments were praises about the app, there were a few gripes here and there mainly related to the authenticity of sellers and products and the poor organisation of the app. This was similar to some of the user interviews as well.

Usability Testing

After interviewing the users, I gave 2 tasks for them to carry out, which I screen-recorded for further analysis.

Buy a moisturiser using the search function on the app

• Generally, the users didn’t have any trouble with this task
• The filter options were not utilised after they searched for the moisturiser
• All of them looked at product reviews in considering whether they should buy the product. In particular, product reviews with photos was what they commonly clicked to look at.

Buy a moisturiser by going through the categories on the app

• 1/4 users went to the ‘Mall’ tab and clicked on the ‘Beauty and Personal Care’ category to look for the moisturiser. However, there was no further filtering options for her to narrow down her search to just moisturisers. This was unlike the same category from the home tab, where there would a be a filtering option on the top right of the screen.
• The other 3 users searched from the home tab. One user really struggled to find the categories section in the home tab as he didn’t know he had to scroll down all the way. He also scrolled past the categories on the first try, not realising they were categories.
• The other user accessed Shopee Mall from its section on the home tab to enter a skincare store, and bought the moisturiser from there.
• The 2 users who bought from Shopee Mall were the more experienced ones who knew that the mall included products from top sellers and official shops. The other 2 did not know what the ‘Mall’ tab was about.

Personas and Journey Mapping

Based on the key findings and research on the app, I created 3 personas depicting the user’s behaviour, sentiment and pain-points throughout their stages of using the app.

Persona 1 — Frequent user

Persona 2 — One Product User

Persona 3 — New User

From there, we created problem statements for each of these personas:

Persona 1 (Steffi Low): Steffi needs more product reviews in the product listings so that she can be sure her money is spent rightfully. She also wants the Shopee Mall categories to show sub categories as well so that she can further narrow her search better.

Persona 2 (Rachel Tay): Rachel needs a less cluttered interface and more obvious filter options in the Shopee Mall section of the app so that she will be more inspired to browse and discover more products beyond her usual buy.

Persona 3 (Adrian Low): Adrian needs the app features to be less confusing. He wishes there were more explanations about different sections of the app such as ‘Feed’ and ‘Mall’ beyond the on-boarding screen that he didn’t read.

2x2 prioritisation matrix

Next, I prioritised the features according to what was important to both the user and the business.

In the real world, the business probably doesn’t have time to work on every single pain-point, hence the prioritisation here. More important points can be addressed in earlier design sprints, and the rest subsequently. However, I will still touch on most of these points in my prototype.

Ideation, Wireframe, Prototype

“Brand guidelines such as the colour of the banner, and categories such as home owning — all this dictates the type of seller or buyer we want to attract to the app. We want to attract the mature, resourceful and trustworthy user,” said Chris Feng, CEO of Shopee.

Keeping in mind to keep in constant the brand colours and stick to the same main categories, I came up with a wireframe and prototype of the new design I had in mind.

A little behind the scenes of my wireframe design using Sketch

And ta-dah! The final screens, separated into sections.

A Closer Look

1. Home Tab

What changed?

• Categories shifted up to become a sticky header at the top of the page, so that users will be able to access it even after scrolling past the main screen
• Banner shifted down so that the colour of the banner will no longer be a hindrance to whether users can see the icons
• Inclusion of ‘My Orders’, ‘My Favourites’, and ‘My Feed’ into quick links, based on user interview feedback
• Reduction of sections to reduce clutter

Expanded Category

2. Replacing ‘Feed’ with ‘Rewards’ on the main tab

New design but keeping the same spin &win section

< This is the original rewards page on the left.

Singaporeans love free stuff.. which was why I replaced feed on the main tab with a USP of Shopee that I felt was more compelling to users to keep returning to the app — the rewards! Not to say feed isn’t important as well, it’s placed as a quick link on the home tab in the redesign.

The current way to access Shopee Coins is through a link in the account tab (see in interactive mockup), which was not prominent at all. This was probably also why only 1/4 of the users I interviewed knew about the existence of such a section on the app.

3. Shopee Mall

Now for those of you who don’t know what’s Shopee Mall, it’s a section of the app which features official brands and top sellers. The original design didn’t really convey that message except for the bar which highlights the 100% authenticity, which didn’t really register in the user’s heads during the user interviews. Most of them felt like it was just a repeated portion of the home page.

What changed?

• A pop-up explaining Shopee Mall so that users could understand it more. ‘Dismiss Forever’ also included as an option so it won’t be annoying
• Colour block added to give the ‘feel’ of entering the mall (visualise the two blocks animated to open like a door). This is to differentiate from the home page
• Shops and products separated to provide clearer focus with user intention
• Subcategories added and filter options placed nearer to product to improve visibility

3. Shopping Cart

Again, I replaced one of the main tabs — this time changing out notifications for shopping cart. The cart function is important both to the business and buyer, it’s the screen before purchase, and a place that consolidates all the items that the user is potentially interested to purchase. The original position at the top right corner makes it a little harder for users to stretch their thumbs to reach, thus the rearrangement to the bottom tab for a better user experience.

What changed?

• Function to tick shop name and have all items ticked removed. It’s confusing and adds to the clutter.
• Enter code and select vouchers separated

4. Encouraging feedback after purchase

As annoying as popups are, gathering reviews are essential to gaining the customer’s trust in the product.

Aside from that, one other idea I thought of was to incorporate reviews into the rewards system eg. Leave a review to earn xx number of coins

While there are more screens I’ve designed, I shall cut the talk and end here with an interactive prototype that you guys can play around with. If you’ve read till here, I thank you for keeping your attention. 👊🏻

Interactive Prototype

Footnote

Hope you enjoyed this! If you enjoyed this case study or have any feedback for me, I’d love to hear from you. Feel free to email me at jas-tay@hotmail.com ☺️