Shopee App Reimagined

Overview

The ultimate goal of this research is to identify access points and obstacles that hinder the speed and efficiency of the purchasing process, as well as to uncover any discomfort and confusion experienced by the user during their shopping journey. Our goal is to enhance intuition on its interface by focusing on specific tasks that speed up the user’s purchasing process and allow them to resolve user needs as quickly as possible.

Conceived as part of a User Research module at Digipen Singapore, the project sought to conduct UX research on an existing mobile application and enhance its design and functionality over a 6-week period.

The project team consists of Clement Leow, Kar Lonng Lai, Gerald Soh, Matilda Lim, Xavier Tan, Valda Kum.

Problem Statement

Active users of Shopee experience frustration due to a cluttered, inefficient interface that complicates the purchasing process. This leads to a disjointed user experience where critical tasks such as finding relevant products, comparing items, and completing purchases require excessive steps, resulting in fatigue and a decrease in overall experience and satisfaction.

End Product/Deliverables

Low, Mid, and High-Fidelity Wireframes, Iterative Figma Prototypes and Finalised Wireframes

Understanding The Product

What is Shopee?

Shopee is a Singaporean multinational technology company that was launched in 2015. It is a subsidiary of Sea Limited. Shopee is the leading e-commerce platform in Southeast Asia and Taiwan, serving various customers. The majority of them are 25-34 years old, with an almost equal distribution of both genders.

Implementing both a Consumer-to-Consumer (C2C) and a Business-to-Consumer (B2C) business model through the Shopee Marketplace (C2C) and the Shopee Mal (B2C), Shopee aims to provide a platform tailored for the region that provides customers with an easy, secure, and fast online shopping experience through strong payment and fulfilment support, making online shopping accessible, easy, and enjoyable every single day.

Product Analysis

Positives

The suggested search titles displayed directed under the search bar, based on past activity, enhance both efficiency and flexibility. By showing relevant search suggestions immediately below the search bar, users can swiftly click into their options instead of typing out full search titles. This feature speeds up the search process for users of all experience levels and offers shortcuts that make navigation more efficient, furthermore supporting users by providing immediate, relevant suggestions without requiring additional actions, thus streamlining their interaction with the search functionality.

The shopping cart icon button is visually distinct and prominently placed at the top right of the page, which helps users easily recognise its function. The cart also displays a page when clicked, of the items added to the cart, including their prices, this information has been saved to further reduce the need for users to recall their recent cart activity. This makes it easier for users to stay informed about the items they have saved in their cart, ensuring they can quickly review and manage their selections.

Negatives

The homepage is cluttered with various advertisements and content listings, which can overwhelm users with unnecessary information. This overload of visual elements detracts from a clean, minimalist design that helps users focus on relevant content. Additionally, section headers have inconsistent title layouts, including mismatched type hierarchy, font sizes, and conflicting colours. These inconsistencies contribute to visual noise, making it difficult for users to quickly scan and understand the page.

The interface displays some feature buttons prominently, even though they are infrequently used by users. Additionally, secondary functions that are not as relevant to majority of the users, such as ‘Shopee Prizes’, remain visible, adding to the clutter. Furthermore, similar features are not grouped or arranged logically, which can confuse users and hinder their ability to efficiently access and use the functionalities they need.

Competitor Analysis

Direct Competitors

Lazada provides an option for users to view products in a grid or list view. Displaying products in a single column allows users to scan through and view them more easily than the grid view. In addition, the list view still contains the crucial information users want.

For secondary functions/features, competitor e-commerce applications typically compile all these features into a row slider so that it maintains a clean look while still being effective on one page/section.

Indirect Competitors

Most list-sorting formats in applications utilize a single-column layout with multiple rows. Each row typically features a thumbnail—such as an image or icon—on the left side, accompanied by textual elements on the right side, including a title and description. This layout effectively presents information clearly and concisely, enhancing user clarity and navigation.

Research

User Story & Requirements, User Personas, Empathy Maps

User Requirement 1

Persona 1

Empathy Map 1

User Requirement 2

Persona 2

Empathy Map 2

Current User Journey and Journey Map (Primary Persona)

Based on the empathy maps and our current features, user journeys were created to give an overview of the actions required to complete a task for each persona. Tiffany’s user journey is structured as a functional, task-based journey where she is attempting to complete a purchase.

To identify areas we can improve with the current user journey, we did user journey maps for our primary persona, Tiffany, based on the current features.

Testing Schedule and Workflow

Our user experience testing was done over a period of two weeks, between 4th September to 17th September.

Overall Task Flow

Tiffany’s Current Task Flow

To map out the steps taken to accomplish Tiffany’s goals, the current task flow outlines her journey when attempting to complete a purchase on Shopee. Here’s a breakdown of the task flow in relation to Tiffany’s persona:

Insights for Tiffany's Task Flow

Discomfort in Navigation: Tiffany may experience frustration at several points in the flow, such as when browsing products, especialy when faced with a cluttered homepage or irrelevant search results.
Decision Fatigue: With many choices and steps in the checkout process (vouchers, shipping options, payment methods), Tiffany might feel overwhelmed or confused by the amount of information presented.
Repeated or Duplicated Functions: There are several points of redundancies that creates more confusion in the user experience. First, users can access vouchers from both the homepage and checkout process. Similarly, when filtering products, the user can click on the filter icon after initiating a product search or by clicking on preset options.

Low-Fi Wireframes

Low-Fi Test Data Overview

Functionality:
Overall, users were satisfied with the functionality offered by the application prototype. They believe that it succeeds in its objective of being a platform for a reliable digital storefront.

User Experience:
Users also agree that the user interface of the prototype is superior to the original application’s. There is reduced clutter with the removal of unnecessary functions and excessive media, making navigation through different pages streamlined and hassle-free.

Improvements:
Users agree that the current prototype lacks enough detail to make informed snap decisions. The content blocks of some pages could be combined or redone to be more informative, particularly on the product listing page and the voucher page. The organisation of page layouts could also be enhanced. Users would appreciate the greater clarity that comes from rearranging elements in a more spacious framework. Lastly, there are a host of accessibility features which can be added to improve the application’s overall browsing experience.

Mid-Fi Wireframes

Mid-Fi Test Data Overview

Functionality:
With the exception of the More Shops section, users did not find any issues with the prototype's functionality and enjoyed the new Smart Default page, which allows them to customise their preferred shipping option.

User Experience:
Users had difficulty reading the information displayed due to the small size of most text and the images in the list view. Users also note that they would like to view the price breakdown on the checkout page.

Improvements:
The current prototype contains more details than its previous iteration. While multiple users enjoy an upgrade to their shopping experience, the way that products are displayed has been affected. The text across al pages is too small, and multiple users have brought this up, especialy in the list view and the product listing page. Though a customised shipping option can now be set with an easier way to apply vouchers, users stil prefer a price breakdown of their purchases to ensure a smooth and affordable transaction.

Ideal User Journey, Journey Mapping, and Task Flow

Tiffany's Ideal User Journey

Please click on the Figma Link to view the chart in larger scale:

Tiffany's Ideal Journey Map

With the results gathered through research and user testing on both Low-fi and Mid-fi prototypes, we have identified several crucial functions that are essential to improving the user experience on Shopee. Here presented is the ideal user journey and the overview of improvements and changes to be made.

Please click on the Figma Link to view the chart in larger scale:

Tiffany's Ideal Purchasing Task Flow

The following ideal task flow demonstrates how Tiffany cart out and purchase her desired products in a quicker and more efficient process.

Please click on the Figma Link to view the chart in larger scale:

1st Iteration (Hi-Fi Wireframes)

1st Iteration Test Overview

Improvements:
The current prototype contains more details than its previous iteration. While multiple users enjoy an upgrade to their shopping experience, the way that products are displayed has been affected. The text across all pages is too small, and multiple users have brought this up, especially in the list view and the product listing page. Though a customised shipping option can now be set with an easier way to apply vouchers, users still prefer a price breakdown of their purchases to ensure a smooth and affordable transaction.

2nd Iteration (Prototype)

Building on our first iteration prototype, we established a style guide and brand identity, incorporating placeholder images and accurate titles to create the second iteration of the prototype. Click HERE for the link.

2nd Iteration Test Overview

Functionality:
Users were satisfied with how their shopping experience has been enhanced, allowing them to view named brands and set their default delivery options and payment methods along with the option to view products in the list or grid view.

User Experience:
Users also appreciated how the homepage, vouchers, and functions, such as the search view, have been optimised so as not to overwhelm the user. However, some users still had some proposals that could be implemented to improve their experience.

Improvements:
Overall, users appreciate how the checkout process is more streamlined. However, some users still found some minor issues. For example, some prefer that the voucher and shopping cart pages be combined into one page or that the product description page be improved in readability. In addition, some comments were made about elements such as the product names not being standardised, the search bar being too large, and the list and grid view toggle being too small.

3rd Iteration (Prototype)

Based on the feedback gathered from user testing on the second iteration prototype, we implemented final icons and images, along with changes that would further improve the prototype in alignment with our problem statement, to create a third iteration. Click HERE for the link.

3rd Iteration Test Overview

Functionality:
Most users appreciated enhancements like Smart Defaults, the list/grid view toggle, and the improved cart layout for price comparison across sellers. Features like the notification tab separation and Shopee Mall vouchers were also well-received. However, reactions to the updated Flash Deals and voucher separation by store were mixed.

User Experience:
Users generally found the updated interface more readable and organised. Primary users valued the coins bar and clear list/grid views. However, secondary users felt overwhelmed by choices or cluttered layouts, with some preferring the old Flash Deals format, which felt more personal and less time-consuming.

Improvements:
Testers suggested removing redundant features, like Linked Payment Methods, and improving the product image gallery's swiping functionality. There were also requests for better filter organisation, clearer homepage and discovery page separation, larger font sizes, and a chatbot for easier support access.

Final Flow Chart

The following flow chart presents the overall pages and functions of the final prototype.

Please click on the Figma Link to view the chart in larger scale:

Finalised Wireframes

Based on the feedback gathered from user testing on the third iteration prototype, we implemented changes that would further improve the prototype in alignment with our problem statement, to create a proposal of the final wireframes. Click HERE for the link.

Final Summary

High-Level Problems

Based on our user research and analysis done over a span of 6-7 weeks, we identified several high-level problems in Shopee’s user interface (UI) and user experience (UX) that negatively affected both our primary and secondary Shopee consumers.

These high-level issues include:

Recommendations

To address these high-level problems, we implemented several targeted solutions in our final prototype. They include:

Post-Mortem

Takeaways

Understanding Feedback:
As we continued running our user tests, we noticed an interesting trend from our testers. Towards the final high-fidelity polish stages, users appeared satisfied with the product’s offerings, but requested that certain features be adjusted back to layouts or formats we had previously explored and discarded.

To us, it seemed like we have had multiple iterations where we gradually improved our user experience, only to start receiving contradictory feedback as we neared the finish line. Eventually, we realised that it was a matter of their familiarity with old processes. We were alienating older testers users who felt more comfortable with prior layouts in the original application.

We started to pivot to offering choices to users. We either present different layout groups to them which they can select based on preference, or looked towards healthy compromises where features would be intuitive to both new and old users alike.

Filtering Feedback:
In a similar vein, as users got more comfortable and our prototype got more natural to use, an increasing number of users who had no qualms about the prototype started requesting for feature additions.

Given the initial scope of our project, as well as the timeframe we have to work with, we needed to narrow down what is important for us to work on given the resources we have, as opposed to what we can work on, for the greatest benefit to the product.

Many of these features were no doubt useful for the application as a whole, but their inclusion would just increase its feature-set disproportionately, bloating the product and deviating further from our original core intent.

Retrospective

What was done well

We had a strong testing pipeline. We were organised when it came to gathering and analysing user feedback, which easily let us structure improvements to be made across each iteration.
Initial research of the product’s user experience was well done. This allowed us to be more precise in identifying the pain points our users face. Our improvements are targeted and well-supported.

What can be improved

Task delegation could be more flexible. We failed to approximate the scope of what digital prototyping would entail, and members assigned to prototyping tasks had to bear a disproportionate amount of work.

Page updated

Google Sites

Report abuse