Me Page Revamp

@Shopee, 2023

Background

Me Page is a primary tab with an impressive usage rate of 78.9% among active buyers, attracting approximately 8 million views every month.

However, over time, the Me Page has become burdened with an increasing number of product entrances, resulting in a bloated and inefficient user experience. This has created a need for a comprehensive review and optimization of the page.

In this project, we aim to streamline the navigation and presentation of product entrances. Our ultimate goal is to create a more intuitive, efficient, and visually appealing Me Page that not only delights users but also significantly boosts the order contribution to Shopee.

1. Define Problem

1.1 Understand user behaviours:

  1. With available data we learnt:

    • 85.4% Me Page users are buyers who have made a purchase before. Highly possible that the main scenario brought them to Me Page is to check order status after placing orders.

    • Tools (e.g. order/account management) account for > 70% of all clicks on Me Page, which set the foundation of Me Page positioning.

    • Promotion sections (e.g. Buy Again and Campaign circles) account for < 2% of clicks, but draw 30>% complains about Me page.

    • Only 22.3% users scrolling down, most features from 2nd and 3rd page are not exposed.

  1. We also ranked the click of different functions to know customers’ preference upon our services.

  1. To measure the experience, we designed several usability tests and tested with random customers in different regions,hoping to accumulate basic experience metrics such as task complete rate, time on task and SCAT:

    • Check order status;
    • Update my address;
    • Buy one item that you liked before;
    • Raise return/refund for an order;
    • Contact Shopee customer service;

    Testing Records

With thoes business & experience metrics, we not only got a clear understanding of the status quo, but also laid the foundation for measuring the results of our following optimization.

1.2 Summarise pain points:

From user’s point of view:

  • Inefficient space allocation caused difficulties in finding desired features
  • No length control resulted in a lengthy page while most users do not scroll down
  • The mixed content and the similar appearance make the content look confusing and difficult to distinguish
  • Unwanted promotion sections

From business‘ point of view:

  • Raise tools efficiency
  • Unleash the potential of huge traffic to boost sales as well as promote other features
  • Scalable for different regions

2. Design Goals and Principles:

  1. Fulfil its task-oriented core function better
  2. Leverage its traffic to boost sale

Principle:

  • Efficient: New design must raise the efficiency of core tasks
  • Concise: Shorten page length to < 1.5 screen
  • Consistent: Maintain a scalable layout and color coding based on Shopee Design System

Success metrics :

  • Time on Task: Shorter time spent on completing a task
  • Click: Higher click on promoted feature entrances
  • Conversion Rate: Higher order conversion from My Likes & Buy Again

3. Information Architecture:

With comprehensive research results in hand, our next step involved grouping and organizing the various elements. This critical phase necessitated extensive communication with senior managers and multiple stakeholders, including Me Page Product Managers, Feature Product Managers, and Country Managers(8+).

The challenge lay in not only persuading our superiors about the rationality of our proposal but also gaining the support of each person in charge of the relevant content on the Me Page. This required effective communication and negotiation skills to convince stakeholders to make adjustments or even relinquish their current positions on Me Page.

Faced with the reality that features and priorities vary across different countries, we encountered the challenge of catering to the specific needs of each market while striving for overall optimization. Our goal was to reach a consensus that accommodates the requirements of all stakeholders.

To tackle this challenge, we employed a low-fidelity prototype approach, which enabled us to engage in early-stage communication with all stakeholders. By showcasing a simplified version of the proposed changes, we initiated productive discussions with stakeholders from various countries and teams.

This collaborative approach allowed us to gather valuable feedback and insights, facilitating a better understanding of the unique considerations of each market. Through continuous iteration and refinement, we successfully harmonized the divergent requirements and ultimately achieved an agreement that balanced the overall optimization of the Me Page with the specific needs of each market.

4. Visual Language:

After finalizing the information hierarchy and grouping, we transitioned to the high-fidelity prototype stage to focus on the visual representation of the Me Page.

During this phase, our primary objective was to apply an appropriate visual language that effectively distinguished elements with different natures (functional vs. promotional) and varying priorities. This approach aimed to ensure the Me Page was both functionally intuitive and aesthetically appealing as a whole.


Our discussions centered around selecting visual cues and design elements that clearly conveyed the intended purpose of each element. We considered factors such as color schemes, iconography, and layout to enhance the user experience.

We explored possible design directions of each module and talked about the different visual effects brought about by different combinations, their impact on user concerns, and how it will ultimately affect user behavior.


5. Final Design:

However, after all the work done, there was still two visual options that neither the bosses nor the designers dared to say at 100%, so we left it for AB testing.

In a small scale A/B testing on whitelisted users, the new design outperforms the previous version regarding impression and click, we are gradually expanding the testing to obtain a more valid result.

In the usability testing we also obtained a result indicating that our new design significantly reduced the average time on task, especially on finding My Likes, which is crucial for order conversion.

6. Takeaways

For me, among many takeaways that this journey yielded, the most impressive one is Collaboration and Negotiation:

Managing diverse stakeholders, including higher management and content owners require effective communication and negotiation skills. And only by fostering collaboration, presenting compelling arguments and addressing concerns, we could gain buy-in and successfully align everyone towards a common goal.