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

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

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

Divider line

Separates from the rest of the list and indicates the sticky-scrolling interaction

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

Group

Enhance organization and empower users to select multiple options quicker

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

/overview

Grouped chips

Select all

Optimize clarity by combining multiple chips into a single group

Boost efficiency by selecting all options instantly with one click

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

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

/design decision

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

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

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