https://sparkbox.com/_next/static/chunks/pages/success-stories/ncsbn-design-system-ca3126ef8a3bdc1d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[557],{7521:function(e,t,i){"use strict";i.r(t),i.d(t,{__N_SSG:function(){return c}});var s=i(9008),r=i.n(s),a=i(1664),l=i.n(a),n=i(9332),o=i(5893),c=!0;t.default=function(e){var t,i,s=e.title,a=e.description,c=e.seo,d=null!==(t=null==c?void 0:c.title)&&void 0!==t?t:"Sparkbox - Building a Better Web through Partnerships",m=null!==(i=null==c?void 0:c.description)&&void 0!==i?i:"Sparkbox works with enterprise‑level clients to provide the benefit of our years of experience and our best new ideas. Got a problem? Let’s solve it together.";return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(r(),{children:[(0,o.jsx)("title",{children:d}),(0,o.jsx)("meta",{name:"description",content:m}),(0,o.jsx)("meta",{property:"og:title",content:d},"og:title"),(0,o.jsx)("meta",{property:"og:description",content:m},"og:description"),(0,o.jsx)("meta",{property:"og:type",content:"website"}),(0,o.jsx)("meta",{property:"og:url",content:"https://sparkbox.com".concat((0,n.usePathname)())},"og:url"),(0,o.jsx)("meta",{property:"og:locale",content:"en_US"}),(0,o.jsx)("link",{rel:"canonical",href:"https://sparkbox.com".concat((0,n.usePathname)())},"canonical"),(0,o.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,o.jsx)("meta",{name:"twitter:site",content:"@hearsparkbox"})]}),(0,o.jsx)("div",{className:"cmp-work-header util-dark-gray-section",children:(0,o.jsxs)("div",{className:"obj-max-width",children:[(0,o.jsx)("header",{className:"util-grid-block",children:(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-two-thirds@md util-position-relative",children:[(0,o.jsx)("h1",{className:"cmp-work-header__title",dangerouslySetInnerHTML:{__html:s}}),(0,o.jsx)("p",{className:"cmp-work-header__description",children:a})]})}),(0,o.jsx)("div",{className:"cmp-work-header__hero-image",children:(0,o.jsx)("img",{src:"/uploads/work/ncsbn/ncsbn-design-system-hero.jpg",srcSet:"/uploads/work/ncsbn/[email protected]",alt:""})}),(0,o.jsxs)("div",{className:"cmp-work-header__meta util-grid-block",children:[(0,o.jsx)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg cmp-work-header__meta-client",children:(0,o.jsxs)("div",{children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Client"}),(0,o.jsx)("p",{children:"The National Council of State Boards of Nursing is a non-profit association whose members include boards of nursing and regulatory bodies from across the U.S."})]})}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Solution"}),(0,o.jsx)("p",{children:"Sparkbox has worked on numerous projects with NCSBN over nearly ten years, including website creation, reusable, themed components, microsites, and more."})]}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Scope"}),(0,o.jsxs)("ul",{className:"util-delist util-bullet-list",children:[(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Design system"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Website strategy"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Design"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Development"})]})]}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Tech"}),(0,o.jsxs)("ul",{className:"util-delist util-bullet-list",children:[(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Multi-product pattern library"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"11ty"})]})]})]})]})}),(0,o.jsxs)("article",{className:"cmp-work-detail",children:[(0,o.jsx)("h2",{className:"util-visually-hidden",children:"The National Council of State Boards of Nursing Design System Case Study"}),(0,o.jsxs)("div",{className:"obj-max-width obj-max-width--article",children:[(0,o.jsx)("div",{className:"cmp-work-detail__vertical-margin",children:(0,o.jsx)("p",{className:"cmp-work-detail__intro util-three-quarter-width",children:"The Evolution of NCSBN's Design System: From Pattern Library to Scalable System"})}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Overview"}

1),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"An Unexpected Beginning"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsxs)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:["The success of this first engagement led to many additional projects, including an ",(0,o.jsx)(l(),{href:"/success-stories/ncsbn",children:"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 ",(0,o.jsx)(l(),{href:"/foundry/the_accidental_design_System",children:"what would become a true design system"}),"."]})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Strategic Evolution"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Technical Architecture"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Measurable Impact"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Key Lessons"}

1),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]})]})]})]})}},4799:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/success-stories/ncsbn-design-system",function(){return i(7521)}])}},function(e){e.O(0,[774,888,179],function(){return e(e.s=4799)}),_N_E=e.O()}]);