MongoDB
/overview
I joined the Design System team at MongoDB as a Product Design intern. Through 4 interviews, audits across 3 teams, and 21 A/B testings, I successfully designed and introduced 4 new functions to the existing Combobox.
/contribution
Figma
/team
3 Designers
4 UI Engineers
1 UX Researcher
/team
Figma
/overview
Combobox is the second most advanced components in our Design System and used in the majority of our products. With the expansion of our product, this project aims to add new and more advanced functions.
Before vs. After
Clear hierarchy
Provide clear differentiation to enhance scanning and navigating
New shortcuts
Provide select and remove multiple options with fewer steps
New function
Enable user to add options that are not found in the selection
Before vs. After
Before vs. After
Before vs. After
Before vs. After
/overview
Number of options
Display the total number of options to follow the ‘Recognition over Recall’ rule
Different font
Create a clear visual distinction to differentiate from the individual selection functions
/overview
Number of options
Display the total number of options to follow the ‘Recognition over Recall’ rule
Different font
Create a clear visual distinction to differentiate from the individual selection functions
/overview
Select All
Increase flexibility by allowing users to add new options outside of the predefined list.
Different font
Create a clear visual distinction to differentiate from the individual selection functions
Different font
Create a clear visual distinction to differentiate from the individual selection functions
Different font
Create a clear visual distinction to differentiate from the individual selection functions
/overview
/overview
Add function
Increase flexibility by allowing users to add new options outside of the predefined list.
Interview 4 Product Designers
Provide select and remove multiple options with fewer steps.
Internal audit across 4 products
Synthesize and evaluate existing design patterns and interactions
Audit across 8 design systems
Identify the common patterns and best practices to leverage mental models
/overview
Add function
Increase flexibility by allowing users to add new options outside of the predefined list.

Step-by-step interaction
Provide prototypes with descriptions to guide engineers through step-by-step interactions

Different color coding
Utilize distinct colors and size markers to visually differentiate spacing values for quick glance

Before/After changes
Document the current and new designers for the engineers to know and compare