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 improvements

Combobox improvements

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 improvements

Combobox improvements

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.