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.
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
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.
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
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
2nd design
The iterated design turned out to work well.
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.
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.
Next Projects
Next Projects
