Crafting a design system to power the NationBuilder platform
Design systems · Product design
For the first 8 years of NationBuilder, we lacked a framework defining the proper usage of UI and design components. Engineers would often decide which UI to implement with only occasional consultation with design. Despite the vast footprint of the software, development velocity was paramount and the team was small enough for this lean workflow to suffice.
Eventually, as the software grew more complex and the teams expanded, the user experience began to suffer. Consistency became a major problem: navigation or other common patterns would display differently throughout the product. Development velocity also slowed as engineers—especially those newer to the company—became less certain of what patterns to use. Our NPS took a hit, and the feedback was clear: customers began describing the UX as “inconsistent,” “hard to use,” and “clunky.” To make matters worse, in 2018 we launched a complete rebrand of NationBuilder, resulting in the public-facing brand being out of sync with the product itself.
We needed to create a documented design framework any team could reference to serve as the source of truth guiding all interface decisions. This was also an opportunity to modernize the visual design of the entire UI, strive for AA level accessibility and align it with our new brand.
Success would be measured in various ways: an improvement in our NPS score (specifically on usability), improved development velocity, a decrease in customer churn, and a decrease in time to completion on various tasks.
I led a 3-day design sprint to both get a sense of scope and convey to internal stakeholders a rough idea of what the project would entail. Once the project was approved, we began a UI audit by organizing every interface in the product, categorized by where it appeared. This helped us identify UI inconsistencies. Next, we interviewed a cross-section of customers to identify specific opportunities for improvement. We also utilized FullStory to collect data and observe pain points within common tasks we could potentially address.
My team and I then carefully redesigned every UI, font, color, and pattern we would incorporate into the design system. We used the atomic design methodology to organize them starting from the simplest elements to the most complex. This approach is simple and intuitive, and there were numerous pattern library frameworks built to support it. In addition to weekly design critiques, I facilitated bi-weekly think tanks to share our progress and receive feedback from employees. We also conducted usability testing using high-fidelity design prototypes with people who had never used NationBuilder, current customers, and partners.
Not long before this project began, I created a UI Engineer role within the design team. I hired two frontend developers for this position with a strong sense of design to carry out the exacting work of converting hundreds of interfaces and components into modular and accessible code. The UI Engineers worked synchronously with Product Designers and I in developing the designs and organizing them within a tool called Fractal. Within a couple of months our new design system, now named "NationBuilder Radius,” was ready for the new cross-functional team who would build it into NationBuilder.
“Pod Phoenix” launched with Backend Engineers, UI Engineers, a Product Designer, and a Product Manager. Engineers claimed responsibility for a set of views and got to work. Design reviewed work as it was completed to ensure an exacting level of detail and consistency. The team operated in two-week sprints, each initiated with a sprint kick-off and concluding with a retro.
Several months later customers were invited to sign up for the beta. A parallel version of each view within the product was created, enabling customers to temporarily toggle between the new interface and “NationBuilder Classic,” a function that existing customers greatly appreciated as they gained familiarity with the new design. The beta period was also essential in providing additional feedback, helping us dial in all details before the wide release.
Updating the entire interface of a product with many thousand paying customers feels precarious, no matter how careful you may have been. However, after only a few months in beta, the courageous Pod Phoenix did just that. “NationBuilder Classic” was deprecated for all existing customers, and all new customers defaulted to the new experience. The update was warmly received, and immediately resulted in a significantly improved experience for all customers, including:
Once the dust had settled, our goals all began moving in the right direction:
Additionally, both development and design velocity improved as all product development teams could orient their work around NationBuilder Radius. Radius not only improved new feature development—but it also unleashed the ability for very small teams to improve ubiquitous patterns with ease, consistency, and confidence not possible before.
User experience is a never-ending project, and NationBuilder Radius has now made it possible to scale this continuous work for years to come.
