NerdWallet's design system revamp

Consolidating NerdWallet's Design System Libraries in Figma

Role

Design System Designer

Role

Design System Designer

Role

Design System Designer

Industry

Financial Technology (FinTech)

Industry

Financial Technology (FinTech)

Industry

Financial Technology (FinTech)

Tag

design-system

Tag

design-system

Tag

design-system

Research

At the start of this project, NerdWallet's design system team (i.e., Currency Design) wanted to set a baseline before moving forward. To do so, I decided to run a short study with the help of my colleagues - Kat Clave and Jarvis Moore - to understand how our product designers were using NerdWallet's design system (i.e., Currency) in Figma.

We asked five (5) of our designers to go through a design activity in the study. The task was to recreate a page - for either mobile or desktop screens - using existing Currency components. At the end of the activity, we asked our candidates follow-up questions to assess their overall experience.

From this short study, here are some of the more prominent insights we unearthed:

Searching for a component can be challenging. For instance, 3 out of 5 users had difficulty finding the Card component among the 300+ components available across two libraries. One of those designers said:

"If I don't know where a component is, I just spend a lot of time searching for it to see where it is."

As such, users often go off the beaten path when their search yields no results. This creates more work for the designers we are trying to help with Currency.

"At this point, if I can't find what I'm looking for, I just detach the component and edit it how I like it."

Here is an example of our users performing the activity during the baseline study:

Research

From this short study, here are some of the more prominent insights we unearthed:

Searching for a component can be challenging. For instance, 3 out of 5 users had difficulty finding the Card component among the 300+ components available across two libraries. One of those designers said:

"If I don't know where a component is, I just spend a lot of time searching for it to see where it is."

As such, users often go off the beaten path when their search yields no results. This creates more work for the designers we are trying to help with Currency.

"At this point, if I can't find what I'm looking for, I just detach the component and edit it how I like it."

Here is an example of our users performing the activity during the baseline study:

Goal & Process

Once we had the primary problem defined, we were able to identify that our teams would benefit from reducing the number of components they were using. Without losing the existing components and libraries, my team agreed that it would be beneficial to consolidate the existing components by leveraging the variant feature in Figma.

Components of different sizes (e.g., mobile navigation vs. desktop navigation), states (e.g., disabled, error, hover, etc.), or configuration (4-column card vs. 6-column card, etc.) would be grouped under one based on usage. For instance, by this process, a disabled primary button would then be grouped with a secondary button in the focus state under a new component - Button.

To tackle this job, I went about breaking it down into three processes:

Step 1. Audit & prioritization of existing components
Step 2. Consolidation
Step 3. Peer review
Step 4. Figma Publication: Currency v3 release 🎉

Step 1: Audit & Prioritization

First...

At the start of the consolidation effort, it was hard to know/understand which components to work on first. So, to prioritize components, I took a look at library analytics for existing libraries: Currency web v2 and Currency mWeb v2.

With the analytics, I was interested in understanding three main data points:

The number of instances a component had been used/produced as an instance across all NerdWallet.
The number of teams using a component.
The number of files using a component.

Step 1: Audit & Prioritization

First...

With the analytics, I was interested in understanding three main data points:

The number of instances a component had been used/produced as an instance across all NerdWallet.
The number of teams using a component.
The number of files using a component.

Then...

I gathered this data into a cataloged spreadsheet and tallied up the numbers. The more teams across multiple files utilized a component type, the more precedence this component took over other component types.

Lastly, using Currency's style guide, I grouped the components under the categories said components are listed under, i.e., Actions, Display, Assets, Navigation, Overlay, Layout.

Take a look at the cataloged spreadsheet here.

Step 2: Consolidation in Figma

First...

Once I had a prioritized list of items to work through, it was time to get to work. I created a one-stop-shop Figma file, where all new consolidated could be created and reviewed by the product designers at NerdWallet, i.e., the Currency Consolidation Sandbox file.

With this file created, with each new component, I would work with my team (Currency Design) to create a ticket to track each new component I tackled.

The specific acceptance criteria/goals for each new ticket were:

To create and add the consolidated component in the Currency Consolidation Sandbox Figma file.
To review the component with Currency Design.
To review the component with NerdWallet’s PD team in the Sandbox Figma file by posting on #product-design-team asking for feedback.

Then...

With a ticket in the backlog, I would open up the Currency Consolidation Sandbox Figma file and create a branch from it. Branching off the Currency Consolidation Sandbox Figma file allows you to experiment with component making without disrupting the original sandbox file content and quickly merge your new component where other designers will review it.

Finally...

Within the Sandbox file, for a specific component type (let's take the input field component), I would work on identifying the following:

Base elements (of the Input field). They are part of the fundamental component. We also include the ones that may or may not be turned on (e.g., tooltip in Input, error message in Input, etc.).
Different sizes (mobile vs. web): The size will make up a property that the variants of the component will take on.
Different configurations (i.e., 4-col input field, 6-col input field, etc.). The configuration will also make up a property of the component.
Different states (i.e., hover, focus, disabled, etc.). These will make up the last property of the consolidated component.

Once I had done all of the above, I would then create:

A component that has all the base elements. Create other components where we hide base elements that do not always need to be visible. An excellent example of this would be the tooltip icon in the Input component. This icon doesn't always need to be visible. You can then combine the component with the visible and invisible tooltip. Doing so will create a toggle button to hide/show the tooltip (see screengrab below for reference).
A component for each of the different sizes.
A component for each of the different configurations.
A component for each of the different states.

Then, I would combine all the above components and have a component ready for review.

Step 2: Consolidation in Figma

First...

With this file created, with each new component, I would work with my team (Currency Design) to create a ticket to track each new component I tackled.

The specific acceptance criteria/goals for each new ticket were:

To create and add the consolidated component in the Currency Consolidation Sandbox Figma file.
To review the component with Currency Design.
To review the component with NerdWallet’s PD team in the Sandbox Figma file by posting on #product-design-team asking for feedback.

Then...

Finally...

Within the Sandbox file, for a specific component type (let's take the input field component), I would work on identifying the following:

Base elements (of the Input field). They are part of the fundamental component. We also include the ones that may or may not be turned on (e.g., tooltip in Input, error message in Input, etc.).
Different sizes (mobile vs. web): The size will make up a property that the variants of the component will take on.
Different configurations (i.e., 4-col input field, 6-col input field, etc.). The configuration will also make up a property of the component.
Different states (i.e., hover, focus, disabled, etc.). These will make up the last property of the consolidated component.

Once I had done all of the above, I would then create:

A component that has all the base elements. Create other components where we hide base elements that do not always need to be visible. An excellent example of this would be the tooltip icon in the Input component. This icon doesn't always need to be visible. You can then combine the component with the visible and invisible tooltip. Doing so will create a toggle button to hide/show the tooltip (see screengrab below for reference).
A component for each of the different sizes.
A component for each of the different configurations.
A component for each of the different states.

Then, I would combine all the above components and have a component ready for review.

Step 3: Review

Once I had a component ready for review, setting it up for review was pretty simple and would require two steps:

Merging the branch where I have been making all these changes into the main branch of the Currency Consolidation Sandbox Figma file.
Communicating with the rest of NerdWallet’s product design team.

Merging

With a new component ready for review in the Currency Consolidation Sandbox Figma file, I would click on Review and merge changes to add the changes to my main branch. The next screen should show you all the new additions to this file. In our example above, we add a new component named tab (see screengrabs below for reference).

In the main branch, I would navigate to the Template page ( (Duplicate this page) Component Review - Your name here) and update the screenshot in the artboard to reflect what should currently show under the Assets tab (see screengrab below for reference).

Communication

With a new component merged into the Currency Consolidation Sandbox Figma file and the template page set up for review, it was time to let everyone know.

First, I would post in the #product-design-team Slack channel requesting feedback. This channel had daily engagement from our product designers and proved to be a tremendous tool for collaboration.

Here is an example of what I would send out in said channel:

Subject: New currency components ready for review ‍ Happy Wednesday, team! ‍ Back again with some new consolidated components, now ready for review in the sandbox. ‍ Click here to review it in our Sandbox file. These components will remain available for review through *date they will be unpublished from the Sandbox file*. After that, with your invaluable feedback, we hope to revise these components and release them at the end of the current sprint. ‍ Thank you!

I would typically leave components up for review for a week and send out friendly reminders every 2 to 3 days in the same channel. The reminders would sound like the following:

Good morning, team! ‍ Last call to get your reviews in for our new consolidated components. Click here to be redirected to the sandbox file!

Step 3: Review

Once I had a component ready for review, setting it up for review was pretty simple and would require two steps:

Merging the branch where I have been making all these changes into the main branch of the Currency Consolidation Sandbox Figma file.
Communicating with the rest of NerdWallet’s product design team.

Merging

Communication

I would typically leave components up for review for a week and send out friendly reminders every 2 to 3 days in the same channel. The reminders would sound like the following:

Good morning, team! ‍ Last call to get your reviews in for our new consolidated components. Click here to be redirected to the sandbox file!

Step 4: Publication & Adoption

Publication

After receiving feedback in the Currency Consolidation Sandbox Figma file, I would branch off in Figma and add those suggested changes to the reviewed component (refer to Step 3: Consolidation above for instructions on branching and leveraging the variant feature in Figma). If I received no feedback or positive feedback, then - tada 🎉 - I was ready to publish the new component into Currency v3.

To do so, I would follow these steps:

Create a new branch in Currency v3, where you will add the new component. Branching off will allow you to avoid any accidental changes you may make to already-published Currency v3 components.
Copy and paste the new component you created from the Currency Consolidation Sandbox Figma file to the newly created branch of Currency v3. Find the appropriate category page for the new component you carried over within this branch and paste it on that page.
Merge the new branch back into the main one now that you have added the new component.
Navigate to Assets -> Libraries -> Publish change(s) to publish the new component added to the main branch of Currency v3.

This quick tutorial video summarizes the steps above:

Adoption

After consolidating multiple components into one and publishing it in Currency v3, it was essential to deprecate that component in Currency v2 libraries to encourage the adoption of the newer component.

Here are the steps I followed to deprecate an existing component:

Create a new branch in Currency Web v2 and Currency mWeb v2, where you will deprecate the existing component.
Find the existing component you are deprecating within the branches you created, and affix the emoji at the end of the component and its artboard. The emoji indicates that the component has been deprecated.
Now that you have deprecated the existing component merge the new branch into the main one.
Navigate to Assets -> Libraries -> Publish change(s) to publish the deprecated component in Currency Web v2 and Currency mWeb v2.

Step 4: Publication & Adoption

Publication

To do so, I would follow these steps:

Create a new branch in Currency v3, where you will add the new component. Branching off will allow you to avoid any accidental changes you may make to already-published Currency v3 components.
Copy and paste the new component you created from the Currency Consolidation Sandbox Figma file to the newly created branch of Currency v3. Find the appropriate category page for the new component you carried over within this branch and paste it on that page.
Merge the new branch back into the main one now that you have added the new component.
Navigate to Assets -> Libraries -> Publish change(s) to publish the new component added to the main branch of Currency v3.

This quick tutorial video summarizes the steps above:

Adoption

Here are the steps I followed to deprecate an existing component:

Create a new branch in Currency Web v2 and Currency mWeb v2, where you will deprecate the existing component.
Find the existing component you are deprecating within the branches you created, and affix the emoji at the end of the component and its artboard. The emoji indicates that the component has been deprecated.
Now that you have deprecated the existing component merge the new branch into the main one.
Navigate to Assets -> Libraries -> Publish change(s) to publish the deprecated component in Currency Web v2 and Currency mWeb v2.

Reflections

This work was well received by the small but mighty team of designers at NerdWallet. Throughout the design process, I was able to capture feedback as the work was moving along:

Reflections

This work was well received by the small but mighty team of designers at NerdWallet. Throughout the design process, I was able to capture feedback as the work was moving along: