The National Council of State Boards of Nursing Design System Case Study
The Evolution of NCSBN's Design System: From Pattern Library to Scalable System
Overview
The National Council of State Boards of Nursing (NCSBN), a non-profit organization serving over 3.5 million registered nurses across the United States, partn ered with Sparkbox to create what would become a surprisingly robust design system. What began as a simple pattern library for a single website redesign evolved into a comprehensive system powering multiple digital properties.
An Unexpected Beginning
In 2014, NCSBN approached Sparkbox for a website redesign. The initial scope was straightforward: create a pattern library with page templates and compiled assets for integration into their existing CMS. Using Drizzle as the pattern library generator, the team delivered a modular system of HTML, CSS, and JavaScript components following atomic design principles.
The success of this first engagement led to many additional projects, including an interactive timeline celebrating NCSBN's 40th anniversary. Rather than starting from scratch, Sparkbox added this new project to the existing pattern library, creating a single codebase powering two distinct websites. This decision saved approximately a week of development work and established the foundation for what would become a true design system.
Strategic Evolution
The turning point came when NCSBN requested a series of microsites with similar look and feel. This requirement prompted a fundamental shift from maintaining separate, duplicated projects to creating a systematized approach with reusable, themed components. The team performed a comprehensive audit of all projects in the system, identifying similarities and consolidating them into shared systems that each project could import.
The refactored system enabled remarkable efficiency gains. While the first microsite required significant setup, subsequent microsites needed only theme token updates and occasional new components. This approach demonstrated the true power of design systems: exponential time savings as the system matured.
Technical Architecture
The final system comprised 33 page templates for unique layouts, 35 major organisms like event listings and charts, 57 foundational molecules including news items and form inputs, and 30 atomic elements for maximum reusability. Built with a Grunt and Assemble-based toolset inspired by Pattern Lab, the system prioritized modularity and maintainability.
The team implemented a priority-plus navigation solution that displayed the most important menu items at all screen sizes, with less critical items accessible through a secondary trigger. This approach proved more effective than traditional hamburger menu patterns, especially given NCSBN's clear content hierarchy where two or three navigation items received the majority of traffic.
Measurable Impact
The design system delivered significant value through faster project launches, with new microsites requiring only a fraction of the time compared to earlier projects. The single codebase serving multiple properties reduced maintenance costs while ensuring a consistent user experience across all NCSBN digital properties. The streamlined collaboration between Sparkbox and NCSBN's internal development team improved overall efficiency and knowledge transfer.
Key Lessons
NCSBN's journey illustrates that effective design systems don't always require comprehensive upfront planning. By prioritizing reusability from the start, choosing scalable tools, and remaining open to iteration, teams can build systems that grow organically while delivering immediate value.
Sparkbox and NCSBN continue to work closely today, with the system regularly receiving updates and new features that NCSBN easily incorporates across their production websites—proof that well-structured pattern libraries can evolve into robust design systems that serve organizations for years to come.