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
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.
/prompt
"Google has decided to divest non-core businesses, and we have been tasked with creating an eco-friendly and affordable version for Nest."
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
Combobox is the second most advanced components in our Design System and used in
Thermostat
Thermostat
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
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
/device
Select All
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
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.
Hierarchy
Provide clear differentiation to enhance scanning and navigating
Hierarchy
Provide clear differentiation to enhance scanning and navigating
/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.
/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.