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

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