/ Launched / UX&UI / SaaS / Desktop & Mobile
/ Launched / UX&UI / SaaS / Desktop & Mobile
Empowering Users to Access Data
and Reports Instantly and Directly
Empowering Users to Access Data
and Reports Instantly and Directly
Empowering users to access data and reports
instantly and directly
Reduced the time taken to create report from 3 days to
less than 2 mins, improved product's SUS score by 31.8%
Reduced the time taken to create report from 3 days to less than 2 mins, improved product's SUS score by 31.8%
Reduced the time taken to create report from 3 days to less than 2 mins, improved product's SUS score by 31.8%
Timeline
Timeline
Timeline
10 Weeks
4 Sprints | 12 Weeks
10 Weeks
Contribution
Contribution
Contribution
Product Thinking
UI Design
Interaction Design
Prototyping
Product Thinking | UI Design | Interaction Design | Prototyping
Product Thinking
UI Design
Interaction Design
Prototyping
Team
Team
Team
1 PM
1 Sr Designer
3 Engineers
Business Team
1 PM | 2 UX Designers | 3 Engineers
1 PM
1 Sr Designer
3 Engineers
Business Team
Tools
Tools
Tools
Figma
Lark
Figma | Lark
Figma
Lark
Overview
The Creator Monetization Center serves 2.8M external clients and 120+ internal employees of Douyin (Chinese TikTok). The Leaderboard dashboard, crucial for performance ranking and insights, had limitations requiring manual data categorization and extraction that takes lots of manual effort and time to complete. Our project streamlined this workflow, reducing report generation time from 3 days to under 2 minutes while improving product's usability score by 31.8%.
The Creator Monetization Center serves 2.8M external clients and 120+ internal employees of Douyin (Chinese TikTok). The Leaderboard dashboard, crucial for performance ranking and insights, had limitations requiring manual data categorization and extraction that takes lots of manual effort and time to complete. Our project streamlined this workflow, reducing report generation time from 3 days to under 2 minutes while improving product's usability score by 31.8%.
❗️FYI: This project was originally created in a Chinese format. I translated the design and materials for better clarity and accessibility.
Reduced the time taken to create report from 3 days to less than 2 mins, improved product's SUS score by 31.8%
Reduced the time taken to create report from 3 days to less than 2 mins, improved product's SUS score by 31.8%
Shhh... a sneak preview
Shhh... a sneak preview
Shhh... a sneak preview
Shhh... a sneak preview
Shhh... a sneak preview
Design Overview
I introduced four new features to help our users get useful ranking data and reports with minimal manual effort and maximum flexibility.
Added three new features to help users get useful ranking data and reports with minimal manual effort and maximum flexibility.
Filter
Filter
Advanced filter functions to give users quick access to ranking data through minimal click.
Advanced filter functions to give users quick access to ranking data through minimal click.
Creator Comparison
Creator Comparison
Easy and frictionless actions for users compare creators across various dimensions.
Easy and frictionless actions for users compare creators across various dimensions.
Easy and frictionless actions for users compare creators across various dimensions.
Visual Indicator
Visual Indicator
Clear visual indicators for users to track and compare creator ranking changes at a glance.
Clear visual indicators for users to track and compare creator ranking changes at a glance.
Report Download
Report Download
An instant direct ranking reports download feature, eliminating any unnecessary dependencies.
An instant direct ranking reports download feature, eliminating any unnecessary dependencies.
Final Impact
Final Impact
After usability testing, the new design has proved to significantly enhance both work efficiency and business impact.
How did I get there?
How did I get there?
How did I get there?
How did I get there?
How did I get there?
Context
Creator Monetization is one of the most critical businesses of Douyin (Chinese TikTok) with millions of creators making sponsored content for various brands.
Here is the Gap
Here is the Gap
Despite the exponential growth in the number of partnerships in our platform, our performance analytics tool presents significant functional deficiencies that have failed to keep pace with this rapid expansion.
Empower users with direct data access through
minimal clicks, making reports immediately visible
and effortlessly retrievable
Challenge
The monetization leaderboard, serves 2.8M+ clients for creator performance analytics, has significant usability limitations.
The monetization leaderboard is core dashboard of the creator monetization center (Xingtu), provides client with performance rankings.
Since its initial launch, we have received substantial influx of requests from clients of wanting access to specific leaderboard rankings and insights.
The monetization leaderboard is core dashboard of the creator monetization center (Xingtu), provides client with performance rankings.
Since its initial launch, we have received substantial influx of requests from clients of wanting access to specific leaderboard rankings and insights.
User Research
User Research
In order to dig out the root problems, I conducted three rounds of user research through both secondary and primary research.
I initiated 12 rounds of interviews with both internal and external stakeholders To better comprehend users' needs for the dashboard,
Analyzed 100+ In-App User Feedback
Conducted User Survey with 24 responses
Initiated 4 Role play workshop with 16 users
Four insights that were previously overlooked:
User Persona
User Persona
Next, I defined two personas for internal and external users to develop a structured approach for addressing their specific pain points.
I initiated 12 rounds of interviews with both internal and external stakeholders To better comprehend users' needs for the dashboard,
Internal Business Team
Internal Business Team
💭 Needs
💭 Needs
Direct data-driven business insights
Automated weekly industry reports
Direct data-driven business insights
Automated weekly industry reports
👆 Behavior
👆 Behavior
Create reports for team meetings
Share insights with external stakeholders
Create reports for team meetings
Share insights with external stakeholders
⚠️ Pain Points #1
⚠️ Pain Points #1
Gathering industry-specific data is highly inefficient as teams have to manually extract data from the complete list for analysis
Gathering industry-specific data is highly inefficient as teams have to manually extract data from the complete list for analysis
⚠️ Pain Points #2
⚠️ Pain Points #2
Creating reports can take up to multiple days of work, forcing teams to work overtime and delay other urgent tasks
Creating reports can take up to multiple days of work, forcing teams to work overtime and delay other urgent tasks
External Client
External Client
💭 Needs
💭 Needs
Quick creator discovery by industry
Easy performance evaluation of creators
Quick creator discovery by industry
Easy performance evaluation of creators
👆 Behavior
👆 Behavior
Compare creators for better industry matches
Request reports from business team
Compare creators for better industry matches
Request reports from business team
Compare creators for better matches
Request reports from business team
⚠️ Pain Points #1
⚠️ Pain Points #1
It's hard to find suitable creators as the current dashboard has no way to filter and compare creators within the same industry
It's hard to find suitable creators as the current dashboard has no way to filter and compare creators within the same industry
⚠️ Pain Points #2
⚠️ Pain Points #2
Clients have to constantly contact to business team to ask for report, causing long waiting times and repeated follow-ups
Clients have to constantly contact to business team to ask for report, causing long waiting times and repeated follow-ups
How Might We
Empower users with direct data access through minimal clicks,
making reports immediately visible and effortlessly retrievable
Empower users with direct data access through minimal clicks, making reports immediately visible and effortlessly retrievable
Empower users with direct data access through minimal clicks, making reports immediately visible and effortlessly retrievable
Competitive Analysis
I analyzed 6 platforms under the same domain to understand the current market benchmark and better ideate the design solutions.
To understand how the other dashboards are designed within the same domain, I analyzed six external products for more insights.
Design Solutions
*Click to navigate to its section
*Click to navigate to its section
*Click to navigate to its section
*Click to navigate to its section
*Click to navigate to its section
Design #1: Filter
Design #1: Filter
Design #1: Filter
Design #1: Filter
Design #1: Filter
XF Collaboration
I engaged with cross-functional teams to evaluate the feasibility of the filters and address potential constraints
I initiated 12 rounds of interviews with both internal and external stakeholders To better comprehend users' needs for the dashboard,
Defining the filters with business team
Defining the filters with business team
Working around technical constraints with engineers
Working around technical constraints with engineers
UX Vision
After the thorough evaluation of the technical effort, I concluded three design principles to guide the later design critique.
I initiated 12 rounds of interviews with both internal and external stakeholders To better comprehend users' needs for the dashboard,
Ideation
Introduced advanced filter functions to help users quickly access useful data with minimal clicks.
Introduce advanced filtering functions to help users quickly access useful data with minimal clicks.
✅ FINAL SOLUTION
✅ FINAL SOLUTION
PROS
PROS
High discoverability with all options visible
Maximum flexibility for quick selection/deselection
Clear categorization with persistent visibility
High discoverability with all options visible
Maximum flexibility for quick selection/deselection
Clear categorization with persistent visibility
CONS
CONS
Not very scalable for large number of filters
Takes more horizontal space
Not very scalable for large number of filters
Takes more horizontal space
Scalability
Anticipating scalability challenge, I explored four variations as the number of filters scaled, and my design was adopted by design system.
Introduce advanced filtering functions to help users quickly access useful data with minimal clicks.
Subcategories under one industry filter (under 5)
Subcategories under one industry filter (under 5)
Subcategories under one industry filter (over 5)
Subcategories under one industry filter (over 5)
Multi-level of subcategories
Multi-level of subcategories
Display selected filters
Display selected filters
Mobile Responsive
I optimized the design for mobile devices and created adaptive filter that can also function seamlessly on touch interfaces.
Introduce advanced filtering functions to help users quickly access useful data with minimal clicks.
Defalut
Defalut
Filter Expanded
Filter Expanded
Multiple Levels of Filters
Multiple Levels of Filters
Design #2: Compare Creators
Design #2: Compare Creators
Design #2: Compare Creators
Design #2: Compare Creators
Design #2: Compare Creators
Ideation
Allow users to select specific creators to compare, enabling individualized data display for more effective side-by-side comparison.
A self-serve feature that external clients can download ranking reports instantly, without any long-time delays or dependencies.
Two user insights from user research led to a new opportunity:
I first learned the existing design of "Actions" in data tables:
I found that the actions in this major table are all positioned in a dedicated and fixed column on the right side.
This discovery revealed this design pattern is well-established across our platform, with prior user testing confirming its usability. Hence, following this existing design system will ideally minimize the learning curve for users.
I found that the actions in this major table are all positioned in a dedicated and fixed column on the right side of the data table.
This discovery revealed that the design pattern is well-established across our platform, with prior user testing confirming its usability. Hence, following this existing design system will ideally minimize the learning curve for users.
I applied the same approach to ensure its discoverability and accessibility:
Specifications
I documented different interaction states of each UI component to ensure minimal clarification needed during development.
A self-serve feature that external clients can download ranking reports instantly, without any long-time delays or dependencies.
While hovering
While hovering
Select one creator
Select one creator
Select more than one creators
Select more than one creators
Modal expanded
Modal expanded
Data Visualization
I designed a centralized dashboard to visualize individual metrics for easier comparison while accommodating technical limitations.
A self-serve feature that external clients can download ranking reports instantly, without any long-time delays or dependencies.
Option A: Individual Ranked Metric Cards
Option A: Individual Ranked Metric Cards
This design option is grounded in user insights highlighting the need for direct comparison of creator performance through clear, ranked metrics. To address this, we designed this option that allows users to quickly identify top and bottom performers across key metrics through a more scannable format.
This design option is grounded in user insights highlighting the need for direct comparison of creator performance through clear, ranked metrics. To address this, we designed this option that allows users to quickly identify top and bottom performers across key metrics through a more scannable format.
Option B: Side-by-Side Metrics Comparison View
Option B: Side-by-Side Metrics Comparison View
In the second version, I focused on addressing users' need to compare creators' performance metrics within the same category without being constrained by predefined rankings. To achieve this, I presented the data in a flat, linear format, allowing for clear side-by-side comparison. This version was ultimately adopted and launched, as it also required lower development effort from the engineering team.
In the second version, I focused on addressing users' need to compare creators' performance metrics within the same category without being constrained by predefined rankings. To achieve this, I presented the data in a flat, linear format, allowing for clear side-by-side comparison. This version was ultimately adopted and launched, as it also required lower development effort from the engineering team.
Design #3: Indicator
Design #3: Indicator
Design #3: Indicator
Design #3: Indicator
Design #3: Indicator
Ideation
Implemented clear visual indicators to display creator's ranking change, enabling users quickly gain insights at a glance.
Implementing clear visual indicators to display creator's ranking change, enabling users quickly gain insights at a glance.
Implementing clear visual indicators to display creator's ranking change, enabling users quickly grasp valuable insights at a glance.
✅ FINAL SOLUTION
✅ FINAL SOLUTION
PROS
PROS
Creates perfect alignment with the ranking
Saves valuable horizontal space
East to compare multiple creators
Creates perfect alignment with the ranking
Saves valuable horizontal space
East to compare multiple creators
CONS
CONS
May cause visual noise in the ranking column
May cause visual noise in the ranking column
OPTION B
OPTION B
PROS
PROS
Efficiently uses existing space
Placed between rank and name for easy reference
Maintains structured column layout
Efficiently uses existing space
Placed between rank and name for easy reference
Maintains structured column layout
CONS
CONS
May conflict with profile decorations
Makes the profile column cluttered
May conflict with profile decorations
Makes the profile column cluttered
OPTION C
OPTION C
PROS
PROS
Easy to identify creators and changes
Allows for larger, more readable text
Easy to identify creators and changes
Allows for larger, more readable text
CONS
CONS
Takes up more horizontal space
Conflicts with longer creator names
Causes vertical misalignment.
Takes up more horizontal space
Conflicts with longer creator names
Causes vertical misalignment.
Examined color contrast ratios per WCAG guidelines:
Design #4: Download Report
Design #4: Download Report
Design #4: Download Report
Design #4: Download Report
Design #4: Download Report
Ideation
Added a self-serve feature that external clients can download reports instantly, without any long-time delays or dependencies.
A self-serve feature that external clients can download ranking reports instantly, without any long-time delays or dependencies.
ITERATION #1
ITERATION #1
Option A: Side Panel
Option A: Side Panel
Option B: Central Panel
Option B: Central Panel
✅ FINAL SOLUTION
Final Thoughts
Final Thoughts
Final Thoughts
Final Thoughts
Final Thoughts
Takeaways
💪 A Good Design Isn't the One Does Everything
💪 A Good Design Isn't the One Does Everything
As designers, it’s natural to want to cover all possible use cases, as we aim to create a product that’s robust, flexible, and accounts for every potential scenario, but sometimes this could also lead us to overcomplicate things. The key is to walk in the user’s shoes—understanding what they need right now and aligning with the product’s scope. A well-designed product isn’t the one that does everything; it’s the one that solves the right problems effectively.
As designers, it’s natural to want to cover all possible use cases, as we aim to create a product that’s robust, flexible, and accounts for every potential scenario, but sometimes this could also lead us to overcomplicate things. The key is to walk in the user’s shoes—understanding what they need right now and aligning with the product’s scope. A well-designed product isn’t the one that does everything; it’s the one that solves the right problems effectively.
🧠 Understand Needs from Different Stakeholders
🧠 Understand Needs from Different Stakeholders
In this project, I worked to tackle the pain points of two user groups. By mapping how these two user groups interact with the product, I discovered their journeys were interconnected rather than separate, which brought me to a deeper understanding of their pain points. This holistic approach led us to a solid solution that addressed both groups' needs while achieving the long term product's goal.
In this project, I worked to tackle the pain points of two user groups. By mapping how these two user groups interact with the product, I discovered their journeys were interconnected rather than separate, which brought me to a deeper understanding of their pain points. This holistic approach led us to a solid solution that addressed both groups' needs while achieving the long term product's goal.
🧭 Scalability-Driven Design Strategy
🧭 Scalability-Driven Design Strategy
My experience with this project helped me realize that design extends beyond immediate solutions - it's about creating something that can evolve and remain relevant over time. Each design choice needs to be evaluated not just for its current effectiveness, but for how it will serve users and adapt to changing product needs in the years ahead.
My experience with this project helped me realize that design extends beyond immediate solutions - it's about creating something that can evolve and remain relevant over time. Each design choice needs to be evaluated not just for its current effectiveness, but for how it will serve users and adapt to changing product needs in the years ahead.
✷
Glad you made it to the end :)
See more works!
✷
Glad you made it to the end :)