Naive UI

Design System Improvement

Practices

Teamwork, A/B test, Iteration

In Spring 2024, I volunteered as a UX designer with TuSimple's infrastructure team, enhancing key components of their design system, Naive UI, which achieved an 89% user satisfaction rate.

Role

UX Designer

Time

Mar-May 2024

Type

B2B Project

Practices

Teamwork, A/B test, Iteration

Practices

Teamwork, A/B test, Iteration

My work & Impact

I enhanced 3 key components, date picker, time picker and pagination. According to the back data, the design system achieved 89% user satisfaction, received 15.7k stars on GitHub and is applied to 4+ products.

Prototypes

COMPONENT 1#

Date Range Picker

COMPONENT 1#

Date Range Picker

Date Range Picker

Week Range Picker

Week Range Picker

STRATEGY DECISION

Based on user research, 61% favored adding an event shortcut, while 65% found a relative range picker helpful. Given time constraints, we need to prioritize one.

Prioritize Standard

Impact

Feasibility

Emergency

Impact

Feasibility

Emergency

Prioritized decision

Relative

range picker

Event
shortcut

Design of relative range picker

COMPONENT 2#

Time Picker

COMPONENT 2#

Time Picker

Key User Insights

58%

of users found it difficult to plan test schedules due to the absence of a time range picker.

Key User Insights

58%

of users found it difficult to plan test schedules due to the absence of a time range picker.

Iteration process

1st design

lead to inaccuracies

lead to

inaccuracies

Testing revealed that continuous clicking caused errors, so we tried to iterate a new one.

Testing revealed that continuous clicking caused errors,

so we tried to iterate a new one.

Testing revealed that continuous clicking always caused errors, so we tried to iterate a new one.

2nd design

The iterated design turned out to work well.

Stories Behind

FOR TEAMWORK

Collaboration &
Self-Learned HTML

FOR TEAMWORK

Collaboration & Self-Learned HTML

In the team, I collaborated with 1 director, 1 designer, and 3 engineers. Initially, due to limited technical knowledge, my design was rejected for being impractical. To bridge the gap, I self-learned HTML, enabling smoother collaboration with engineers.