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
/overview
Select All
Increase flexibility by allowing users to add new options outside of the predefined list.
Number of options
Display the total number of options to follow the ‘Recognition over Recall’ rule
Different font
Create a clear visual differentiation among the individual selection functions
Different font
Create a clear visual differentiation among the individual selection functions
/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