Founded in 1999 with Alibaba.com, Alibaba Group, ranked 68th in the Fortune Global 500, now operates 30+ platforms across consumers, merchants, brands, retailers, and third-party services.

Xuanyuan is an internal sales merchant platform under Alibaba’s food delivery business line, operating across both PC and mobile platforms to enhance merchant management efficiency and streamline sales workflows. This project focuses on the mobile end.

Role

Product Designer

Duration

4 Weeks

Tools

Figma

Sketch

Methods

UX/UI Design

Data Analysis

Content Design

Team

1 Product Manager

1 Software Engineer

1 Data Scientist

About Project

About Project

Problem

Problem

Xuanyuan's merchant diagnosis features aimed to improve sales efficiency but suffered from low engagement due to complex execution flows, overloaded information, and ambiguous visuals, making it difficult for sales teams to use effectively.

Xuanyuan's merchant diagnosis features aimed to improve sales efficiency but suffered from low engagement due to complex execution flows, overloaded information, and ambiguous visuals, making it difficult for sales teams to use effectively.

What I did

What I did

I iterated on the existing interface by refining information hierarchy, improving recommendation accuracy, and enhancing visual clarity, optimizing usability across content, interaction, and user flow.

I iterated on the existing interface by refining information hierarchy, improving recommendation accuracy, and enhancing visual clarity, optimizing usability across content, interaction, and user flow.

Impact

Impact

These improvements led to a 2x DPV, a 20% increase in task CTR, and a more seamless user flow that enhanced sales efficiency in assisting merchants.

These improvements led to a 2x DPV, a 20% increase in task CTR, and a more seamless user flow that enhanced sales efficiency in assisting merchants.

Users

Users

Stage 1: Define User Needs

Stage 1: Define User Needs

We conducted interviews with both junior and senior sales, focusing on observing their page navigation patterns Vs. working behaviors.

We conducted interviews with both junior and senior sales, focusing on observing their page navigation patterns Vs. working behaviors.

Stage 2: User Analysis ｜ Misaligned User Flow

Stage 2: User Analysis ｜ Misaligned User Flow

We found that junior sales do focus on the diagnosis score but ignore the guide, finding it overwhelming. They prefer asking merchants directly and analyzing issues later. Senior sales also check the score but rely on experience to solve problems, and they both making adjustments later in the office.

We found that junior sales do focus on the diagnosis score but ignore the guide, finding it overwhelming. They prefer asking merchants directly and analyzing issues later. Senior sales also check the score but rely on experience to solve problems, and they both making adjustments later in the office.

Stage 3: Align with Data ｜ Funnel Analysis

Stage 3: Align with Data ｜ Funnel Analysis

Through data analysis, we can observe user drop-off at different interaction steps on the page. Additionally, the low page retention time aligns with interview feedback, confirming that sales representatives tend to ignore the system's optimization suggestions.

Through data analysis, we can observe user drop-off at different interaction steps on the page. Additionally, the low page retention time aligns with interview feedback, confirming that sales representatives tend to ignore the system's optimization suggestions.

Problems

Problems

Stage 4: Pain Points & Design Opportunities

Stage 4: Pain Points & Design Opportunities

Based on user research and backend data analysis, we arrived at the following design oppotunities.

Based on user research and backend data analysis, we arrived at the following design oppotunities.

Stage 5: Design Strategies

Stage 5: Design Strategies

Solutions

Solutions

1

Restructuring Information Hierarchy to Articulate Key Data




Optimizing Information Hierarchy

Optimizing Information Hierarchy

Reorganized content structure to ensure high-priority information is immediately visible, guiding user attention effectively and improving engagement (time on screen).


Visual Optimization of Diagnosis Cards

Visual Optimization of Diagnosis Cards

Enhanced card design by increasing color contrast, adding key metrics for better clarity, and reducing excessive text for improved readability.

2

Redefine Task Prioritization and Categories

Phase 1: The Dual -Perspective Task List

Phase 1: The Dual -Perspective Task List

Based on the objectives of the Diagnosis Score, I designed this matrix with two core dimensions.

Phase 2: Task Execution Complexity

Phase 2: Task Execution Complexity

While impact is key, the execution process also plays a major role in prioritization. Tasks differ in effort and process complexity, which further refines how they should be approached.

3

Improve Information Readability and Efficiency

Information Foraging Theory

Sales scan for immediate value rather than reading long explanations. We reduced cognitive load by minimizing instructional text and improved data scalability with a clearer visual hierarchy.

Action-Oriented UX Writing

Clear, prescriptive prompts replace passive explanations, making next steps obvious. Simplified text removes friction, ensuring sales can act quickly without hesitation.

User’s Voice

Now this is clear, I understand the the score now.

Now this is clear, I understand the the score now.

Now this is clear, I understand the the score now.

This is great! When visiting merchants, they can also understand it easily.

This is great! When visiting merchants, they can also understand it easily.

This is great! When visiting merchants, they can also understand it easily.

Makes sense, no need for extra explanation.

Makes sense, no need for extra explanation.

Makes sense, no need for extra explanation.

Final Impact

Final Impact


My performance was great this month, and the Easy Operation helped a lot.






My performance was great this month, and the Easy Operation helped a lot.




During a client visit, they were unsure how to optimize. I showed them the recommended tasks, and they got it instantly.

During a client visit, they were unsure how to optimize. I showed them the recommended tasks, and they got it instantly.


During a client visit, they were unsure how to optimize. I showed them the recommended tasks, and they got it instantly.


This version looks much clearer, too much text before, felt like a lecture.





This version looks much clearer, too much text before, felt like a lecture.






This version looks much clearer, too much text before, felt like a lecture.



Future Refinement

Future Refinement

While the current design improves usability and engagement, several areas remain for future refinement.

Enhancing personalized task recommendations

Enhancing personalized task recommendations

Streamlining task execution, providing real-time performance feedback

Streamlining task execution, providing real-time performance feedback

Enhance motivation by reward system

Enhance motivation by reward system

Self-reflection

Self-reflection

Challenges of UX Iteration vs. 0-1 Design

Challenges of UX Iteration vs. 0-1 Design

Challenges of UX Iteration vs. 0-1 Design

Unlike 0-1 projects, iteration requires working within existing constraints, balancing past user habits, legacy systems, and incremental improvements. The challenge is identifying high impact changes without disrupting established workflows.

Solving Product Problems Through Design

Solving Product Problems Through Design

Solving Product Problems Through Design

Design is not just about refining visuals, it can shape product direction. In this project, I introduced priority based task categorization, improving efficiency for sales. By identifying key friction points and advocating for structural changes, design became a driver of product evolution.