What is Component-Based Design?
SUMMARY
For our web design projects, we use a component-based design system and Storybook to create scalable, reusable UI libraries for websites regardless of CMS. What better way to understand what this means than to talk to two Sandstormers, Nathan Haas (Associate Creative Director) and Madeline Jensen (Senior Front-End Developer).
Through our interview, we discussed what is component-based design, how it works, and how it impacts the overall efficiency, flexibility, accessibility, and cost savings throughout a nonprofit or association website design.
Table of Contents
- What is a UI Component Library Design System?
- What Are the Benefits of a Component-Based Design System?
- How Does Storybook Work and Why Is It Good For Development?
- How Does a Component Library Help With Accessibility?
- How Does a Component Library Impact My Budget?
- Final Thoughts: Why Use Storybook?
Understand the Benefits of Using Components and Storybook For Your Next Nonprofit or Association Website Design, Regardless of CMS
When designing and developing websites, especially enterprise-level ones, consistency and efficiency are key—especially for large-scale projects for nonprofit and association websites.
At Sandstorm, we use a component-based approach to user-interface design, leveraging design systems and Storybook to create a scalable, reusable library. Our Sandstorm Base uses UX-tested components to align all teams, speed up design, and streamline development while improving accessibility and creating a unique brand experience.
To dive deeper into this approach, I sat down with Sandstormers Nathan Haas, Associate Creative Director, and Madeline Jensen, Senior Front-end Developer, to discuss their experience building and using Sandstorm’s proprietary UI component library and how it’s transformed the way we design and build websites.
1. What is a UI Component Library Design System?
At its core, a UI component library is a design system that is more than just a set of UI patterns. It’s a framework that ensures visual and functional consistency across a website or digital product.
Nathan explains:
“A design system helps create consistency across an entire site. You have a pattern on one page that connects to a pattern on another, making the experience seamless for users. It also simplifies the design and development process because we have a documented library of everything available on the site.”
We created our own UI component library comprised of common components, including accordions, individual event callouts, member or donor spotlights, CTAs, and pull quotes that we have used on many sites. By creating a library of these common assets, we can update the styles to reflect any brand or specific content needs instead of starting from a clean slate.
2. What Are the Benefits of a Component-Based Design System?
One of the biggest benefits is its impact on redesigning and rebranding efforts and building a website that can grow with your organization.
Global nonprofit and association website designs often undergo a brand refresh or even a total rebrand periodically. In the past, this process could lead to a large one-time budget that required board approval. It can also impact future marketing budgets to make ongoing website enhancements.
With a design system in place, however, future rebranding becomes more of a user interface reskin rather than a total rebuild.
Madeline shares:
“Every time a company rebrands, they typically end up rebuilding their website because the old one no longer supports the new brand. But with a design system, you don’t have to start from scratch. You already have a set of core components that can evolve over time—meaning a shorter, cheaper refresh cycle.”
And, through a component library, the new website can include new components as well as more interactive experiences to reflect the updated brand.
The other benefit of a component approach is the ability to add new components post-launch. This flexibility to continue to enhance the website based on user feedback or new content requirements helps keep the website fresh, enabling it to grow with you and engage returning users without an entire rebuild.
3. How Does Storybook Work and Why Is It Good For Development?
For us, working with a component-based design system is a game changer.
Nathan points out:
"Before, when we had two developers working on a site, they might unknowingly build the same thing twice because they didn’t know a similar component already existed. With Storybook, we now have a single source of truth, so developers can reference what’s already been built, preventing duplicate efforts."
A component library eliminates redundant work, reduces errors, and speeds up the build process. It also helps streamline the design review process (DQA) to ensure the final website reflects the UX requirements and UI branding.
4. How Does a Component Library Help With Accessibility?
A key advantage of working within a component library in Storybook is accessibility best practices are baked into the dev experience and help the dev team code to meet accessibility standards.
Madeline explains:
"Storybook has an accessibility tool built in. It checks contrast, missing ARIA labels, and other key factors in real time. The great thing is that because these checks are embedded in our workflow, accessibility isn’t an afterthought. It’s tested throughout development, rather than being a ‘fix’ at the end of the project."
5. How Does a Component Library Impact My Budget?
Using UX-tested patterns for common content types alongside the UI and development efficiencies already discussed has big cost savings—making your marketing dollars go further.
Madeline found:
"We’ve already seen that using Storybook has reduced project budgets by up to 65%. This doesn’t mean we’re cutting corners—it means we can reallocate that budget toward higher-value initiatives, like improving UX, enhancing lead generation, or expanding accessibility features."
A component library gives more flexibility to use the budget to make the digital experience more engaging. Adding additional enhancements like micro-interactions and enhanced search capabilities meets the needs of your users and increases their engagement.
Final Thoughts: Why Use Storybook?
If you’re a marketing director, product owner, or developer, and you’re looking for a way to make your nonprofit or association website design more scalable, flexible, and cost-effective, a component library in Storybook is worth exploring.
Nathan sums it up best:
"With Storybook, you don’t just build a website—you build an ecosystem that supports your brand’s evolution over time. It keeps teams aligned, improves efficiency, and allows for better collaboration across design, development, and marketing."
Want to learn more about how Sandstorm is using Storybook for component-based design? Get in touch today!
