Image for post
Image for post

How to build a design system that teams actually use

See how a reality check led us to the magic of atomic design

Sarah-Beth Zoto
Jul 8, 2020 · 5 min read

Having common components in your design system is great. But having your team use those common components is way better. Here’s how we got from A to B.

The investigation

To find out why design system implementation was low, the Design System Team dug into usage data and interviewed cross-functional product pods. We learned that pods leveraged design system components when they could (buttons, font styles, and colors), but were often missing key components to cover their use cases. To deliver their work on time, pods had to create what they needed from scratch and make up their own rules for combining components into patterns. Needless to say, they began to lose faith that the design system had what they needed, so they engaged less and created pod-specific ‘shared’ components instead.

This was an eye-opener, and we quickly defined a set of success criteria to help us fix the issue.

Opportunities
• flesh out the baseline component library
• align pods around specific product executions
• gain the trust of cross-functional pods

The plan

For big design problems that impact the entire product, NerdWallet has a protocol of sorts: a studio initiative, which allows for collaboration and buy-in from everyone involved. Studio owners establish the cadence, workflow, and scope — and a tiger team from across the org contributes with their domain knowledge.

For this particular studio initiative, we established a two-month timeframe and chose six key pages that would serve as a playground for our cross-functional contributors to explore baseline components.

The strategy

Since this whole initiative was about going back to the basics, the Atomic Design methodology was a natural fit as our foundation. Atomic Design breaks down interfaces into essential building blocks that can be combined to create a variety of solutions. As Brad Frost writes in his book Atomic Design:

“Just as all matter in the universe can be broken down into a finite set of atomic elements, our interface can be broken down into a similar finite set of elements.”

Focusing our work on the most basic element of Frost’s methodology, Atom Studio was officially born. While declaring atoms as our focus was a great first step, there was still a lot of room for interpretation. At NerdWallet, we defined atoms in the following way:

Diagram of an input field with arrows pointing to the label and the input
Diagram of an input field with arrows pointing to the label and the input
Each atom is visually distinct
Diagram of text, with arrows highlighting its color, weight, size, font, etc.
Diagram of text, with arrows highlighting its color, weight, size, font, etc.
An atom represents the smallest USABLE pieces in an interface
A diagram showing the many states a button of a button, including hover, press, and disabled
A diagram showing the many states a button of a button, including hover, press, and disabled
Atoms can include states if the states are always part of the atom’s identity
A pill with a specific content is identified as incorrect, while a pill with placeholder content is identified as correct
A pill with a specific content is identified as incorrect, while a pill with placeholder content is identified as correct
Abstract in nature, atoms do not contain specific content

The process

Now that the Atom Studio team was on the same page, it was time to get down to business. Here’s what we rallied around:

Atom Studio goals: deliver a library of baseline components that create workflow efficiencies for cross-functional product pods and unify brand expression across product experiences.

Success criteria: define a library of atoms that can be used to design and build ANY NerdWallet experience; simplify redundant styles and establish new styles to fill gaps; align deliverables with established brand voice, UX best practices, and AA accessibility standards.

The Atom Studio Core Team — made up of product and brand designers recruited from across the org—carved out a few hours a week to focus on the work. Reserving this time ensured progress was made and helped designers collaborate closely.

We set a schedule to collect feedback from the subject matter experts bi-weekly. These hour-long sessions worked as milestones for the core team. To share the breadth and depth of explorations, the Core Team printed and posted options on foam boards and provided access to the working Figma file. Once Subject Matter Experts had time to review the work, a discussion ensued and feedback was left on each board.

Contributors: Core Team of product and brand designers to explore designs and make recommendations; Subject Matter Experts including design managers, engineers, UX researchers, and content strategists to provide feedback.

Focus area: leverage a set of pages that cover a wide range of components; include pages from different product experiences.

In Phase 1, the Core Team focused on three test pages that represented the most atoms and a cross-section of product experiences. The goal of this phase was to arrive at a north star design that would represent a unified path forward for NerdWallet. During exploration, we encouraged designers to free themselves of any baggage, break existing product rules, and design new pages to align with a set of draft principles that focused on usability and ‘nerdiness’.

A side-by-side comparison showing multiple visual treatments for different atoms
A side-by-side comparison showing multiple visual treatments for different atoms

Along the way, the Subject Matter Experts provided feedback on usability, UX best practices, accessibility, and brand expression. As the Core Team iterated and refined the design, we narrowed down our options and ultimately arrived at a final direction that aligned with usability/nerdiness principles, and really energized the entire Atom Studio team!

Then came Phase 2 — the Core Team tested the final direction by applying it to additional experiences. The goal here was to stress test the design so that a library of atoms could be extracted, ready for refinement and implementation. We also drafted a set of guidelines to help future Product Pods as they applied the atoms to even more diverse experiences.

A side-by-side comparison of an existing page on NerdWallet vs. the same page, using new atoms
A side-by-side comparison of an existing page on NerdWallet vs. the same page, using new atoms

At this stage, feedback sessions were focused on refining those guidelines and digging into implementation concerns.

The outcome

The final artifacts that came out of Atom Studio were conceptual in nature, but provided a solid foundation for refreshing and completing the baseline component library. Almost a year later, 90% of atoms are available to teams, usage is up, and designers are actively evolving atoms in collaboration with the Design System Team. Perhaps most importantly, NerdWallet is on a road to a more unified experience — and a design system that teams actually use.

NerdWallet Design

Building experiences to help you make the most of your…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store