How to build a design system that teams actually use
See how a reality check led us to the magic of atomic design
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:
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’.
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.
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.
Want to be part of a team that writes about stuff like this? Check out open roles in Design + User Experience at NerdWallet.
