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
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.
Device
Provide clear differentiation to enhance scanning and navigating
Mobile
Provide clear differentiation to enhance scanning and navigating
/device
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
New shortcuts
Provide select and remove multiple options with fewer steps.
New shortcuts
Provide select and remove multiple options with fewer steps.
New shortcuts
Provide select and remove multiple options with fewer steps.
/home
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
New shortcuts
Provide select and remove multiple options with fewer steps.
New shortcuts
Provide select and remove multiple options with fewer steps.
/feature
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
New shortcuts
Provide select and remove multiple options with fewer steps.
New shortcuts
Provide select and remove multiple options with fewer steps.
New shortcuts
Provide select and remove multiple options with fewer steps.