1_TT UX platform v7

Data/measurement sounds boring 🥱 ?
Let me tell the story in a fun way 😉 ~

Background: Product managers and Executives need a tool to monitor user experience data

💰 Business need

With a rapidly growing business, Product Managers (PM) and Executives (Exec) need a UX monitoring tool to find out user problems and improve the product.

More details of business background?

What is the business?

The business of Local Services business unit enables consumers to pre-order meals/services on TikTok and enjoy them offline at the stores.

Who are merchants?

Merchants are those who sell these meals / services on TikTok. They manage their business through the to-business app called Laike.

What is UX measurement?

We measure UX through data gathered from 4 metrics to guide product iteration.

Current measurement method?

Through reports. One report typically demands 3 to 10 days, which is inefficient.

Research: 5 interviews + 7 competitor analysis found that users couldn't locate problems efficiently

I identified 2 personas and their needs by interviews

Product manager

Find and fix problems efficiently

Executives

Quickly understand the general UX performance

More about research process?

To gain a deeper understanding of user needs, I conducted 5 interviews with 2 user groups, to Product Managers and Executives.

Interview notes:

Personas:

I also conducted a competitor analysis with 7 mainstream products.

Competitive analysis:

From competitor analysis, I found some truth to learn from, and some doubts to investigate.

Truth

Problem ranking

The overview at the top of the homepage ranking

Use one card to summarize one product problem

The overview at the top of the homepage ranking

Doubts

Show every data to provide easy access

No direct results of data, requires filtering or calculation

Apart from the problem above, I also found pain points that were resulted from the lacking of product functionalities:

Pain points

Scattered data across platforms

Users need to find different data one by one

Hard to follow up on problems

Excels and meetings are hard to synchronize

New features

Data unification

Unify different types of UX data on one platform

Follow-up workflow

Design problem follow-up user flows

And understood how to measure UX data with a research project

In this project, I also improved current metrics system of UX measurement.

If you are interested, please click the below drawer for more info~

The research project about UX measurement metric system

Problem: Current report-based UX measurement process is inefficient in turning UX data into conclusions. Automated analysis process and methodologies are needed.

Action: I participated in building an automatic UX measurement system that uses 4 metrics to monitor merchants' experience.

Highlight 1：Increased 16% metric confidence by upgrading one metric from satisfaction score to effort score.

Why upgrading?

With several sectors consistently scoring above 9.5, the satisfaction score is too high to provide meaningful results for comparison. This is due to the survey trigger mechanism which cannot be changed.

How to upgrade?

Following industry-standard practices. I changed the survey question from "Are you satisfied with (a product section)" to "It is easy to (perform certain tasks)" . This switches the satisfaction score to effort score and widens the gap between sectors.

Highlight 2: Improved 30% analysis efficiency by replacing full scale analysis by a more quick-and-flexible process.

Highlight 3: Discovered 100+ problems by analyzing Q2's data. Presented the findings to the department with reports.

Design: 4 solutions to better locate problems

🎨 Design start point:

As previous design files were outdated, I was told to build this platform from scratch.

Previous design files as visual reference

My design

⚙️ Solution 1: User flows for different roles to speed up data-finding

Can't find desired data

Most UX measurement platforms provide one interface for all purposes. Users are always presented with the data they don't want.

Different roles, different flows

I designed differentiated user flows to address different needs and display related information to the roles.

Executives can read the overview on the homepage

“I want to see the overall UX situation, and the progress of top-ranking problems on Q2, 2023.”

Product managers can drill down into pages to identify problems

“I want to see the problems of the 'Merchants’ Settling' module for this month.”

⚙️ Solution 2: Information architecture tailored for problem-locating

Can't locate problems with data

Product managers are not data analysts. They have little capability / time to find problems using complex analysis. Direct results about problems are what they desire.

Fast pass to problems

I adjusted the logic of mainly showing data to users. Instead, a condensed and problem-oriented information architecture provides shortest paths for users to directly reach problems.

Easy access to problems within 2~3 clicks

Instead of getting more and more detailed data, users can better understand what problems are indicated by these data

⚙️ Solution 3: Present the right information at the right time

Information overload

Users always feel lost in the sea of UX data. In fact, they only need several key information to make decisions.

Just the right info

I summarized these key information and fit them into different scenarios of the problem-locating process. This reduces the cognitive load.

A summary of key information

When identifying problems, I display problem cards to show 5 important information.

When analyzing problems, I display problem details to show 5 categories of related information.

⚙️ Solution 4: Source-specific data templates to enhance data understanding

Can't easily understand data

There are a thousand ways to present one piece of data, but some ways are more easily comprehensible than others.

Easy-to-grasp visualization

I crafted 2 kinds of data visualization templates for different source of problems. This helps users to catch the point quickly.

Quantity visualization for subjective user opinion problems

Journey visualization for objective behavioral problems

Iteration: After exploring alternatives and tradeoffs, I finalized the prototype after 3 iterations.

📍 Iteration example:

Mentor review

Design team review

Usability test

Want to see the entire iteration process?

Iteration example

For instance, I found that half of the users cannot understand one feature, so after exploring alternatives, I pivoted user understanding over giving users shortcuts.

Want to see the details of this iteration example?

Iteration

🤔 Thinking

I reflected on the reasons behind:
1. Different classification logics
2. Cards are not look similar
3. Uncommon interaction

🆎 Exploring Alternatives

I tried 4 different designs and chose one that can most facilitate user understanding.

After

✍🏻 Solution

1. Removed the cards
2. Split the section into 2 tabs
3. A more familiar info structure
4. Less lower-part visual weight

⚖️ Tradeoffs

I prioritized novice understanding over giving shortcuts, which might speed up expert users' decisions.

Final prototype

Impact: Made problem locating easier

Gaining 75% success rate and increasing 33% problem locating efficiency in usability tests, the platform is currently being developed.

Want to read more about the usability test?

Usability test:

Collaboration: Apart from the individual design project, I closely collaborated with other roles when intaking 5 design requirements

1 Design project

UX Measurement Platform

5 Design requirements

Different features of the product

For example...

Negotiate with PM

I advocated a user-centered approach to resolve a conflict with my PM, who insisted on the business scope of the feature.

Collaborate with developer

I evaluated the pros and cons of different interaction patterns to overcome the technical constraint that was raised by developers.

Case study 1: Negotiate with PM - Activation & onboarding of the online consultation function

What is online consultation function:

This function allows consumers to have a conversation with merchants. Merchants will use a console to reply to messages and do many settings such as auto-reply robots and customer representative schedules.

Problem:

Current activation process of this function is offline, which is cumbersome, time-consuming, and involves high labor costs.

Design requirement:

Enabling merchants to independently activate and deactivate consultation function online and provide onboarding to the consultation console.

Highlight 01: Crafted streamlined activation process to meet the expectation of a straightforward and easily accessible feature.

Onboarding

Activation

Highlight 02: Tailored and flexible guidance for diverse needs.

Function introduction

Function guide

Collaboration, conflict, communication

💥 Conflict

PM: Provide detailed onboarding for 2 most important features only (to make it lighter).
Me: Not all merchants need these features & we are unable to classify needs based on merchant types.

💬 Communication

Discuss with PM: I proposed to have a permanent entrance of some important features, but PM said that it is not the scope of this iteration.
Discuss with leadership: Leadership agree that a permanent entrance will be better and original proposal in prd cannot pass the design critique.
Renegotiation with the PM: I convinced the PM that permanent entrance is not extra workload but a more flexible approach that increases the compatibility of future onboarding needs.

📉 Impact

This function has been launched successfully & I also contributed new UIs to the design system.

Final design file

Research

Design

Case study 2: Collaborate with developer - Customer satisfaction survey iteration

What is Customer satisfaction survey:

A customer satisfaction survey will show up when a customer finishes his/her conversation with the customer service of a merchant. It will ask if the customer is satisfied with the conversation and reasons.

Problem:

The filling rate of this survey was low.

Design requirement:

After discussing with the UXR who just conducted a relative research, my task was to change the submission mode from hitting a submit button to real-time auto-submit.

Collaboration, conflict, tradeoffs

💥 Conflict

Me: The survey card can be a popup on the bottom of the page when it first appears. After users finish the survey, it turns into a message in the message flow for retrieval.
Engineer: This is hard to realize because there are 2 logics. It's better to be either a popup or a message.

Popup example

Message example

💬 Thinking

Popup

Message

Pros

1. Attract users attention
2. A higher chance of filling

1. Smoother interaction in most situations
2. An easier approach for engineers

Cons

1. Still need to turn it into a message later
2. When should this popup disappear is a problem, because it is auto-submit now

1. The keyboard might cover the survey if user scrolls up and down when filling it

📉 Impact

Finally, I chose to make it a message, and I added pages explaining how the survey card would self-adapt in the message flow. This feature had been launched, and it increased 8% of filling rate in a week.

Final design file

Reflection:

What I learned:

- User needs can be ambiguous and unstable
- UX skills about toB UX design

What I could have done better:

- Discuss the expectation clearer before any iteration starts
- Bring my assumptions before receiving tasks
- Braver to own my design & don't hesitate to discuss about the goals

Future plans for the project:

- Keep iterating, encourage more business units to use the this platform
- Track usage rates & the number of issues resolved to validate the design.