NFIB is a nonprofit, nonpartisan, member-driven organization that advocates for small-business owners throughout America. For more than 75 years, NFIB has fought for the interests of independent owners. From healthcare to taxes to business regulations, NFIB provides support to small-businesses.
The client needed a complete redesign of their website. With more than 100+ existing pages, this was a very heavy lift. In order to optimize, we had to rebrand and build a design system that was intuitive—one that utilized fluid modules, flexible components, and smart color system.
Our first step was to optimize the color system. The color palette from NFIB’s previous branding was simple. However, we found accessibility issues with their shade of green (#00AD50). We explored slight variations of that green to make sure it passed a 4.5:1 ratio. And to ensure that we were fully covered, we explored a wide range of green tints that would pass accessibility on a variety of background colors.
Here’s a quick peek into how we utilized color tokens which would help streamline our variable collection. Not only would it enhance our design system, but this naming system is comprehensible for both developers and designers which would allow for a smoother dev-handoff.
Here is the general naming system we used:
Element-Category-Concept-Property-Variant-State
By assigning these color variables at a component level, we were able to seamlessly switch out color themes for both modules and entire pages.
The design system includes a wide library of pre-built modules in multiple viewport sizes: Extra Small (320px), Small (692px), Medium (1004px), Large (1308px), and Extra Large (1692px).
With our extensive module library, we were able to swiftly build new pages. Having the color variables integrated into the system made for a more flexible and streamlined experience.
With the refurbishments, we we're able to create a structured yet adaptable system that would streamline our design process and allow for a smoother hand-off to the development team. Overall, the client was satisfied with the rebranding and the additional improvements to accessibility.
If interested in viewing the finished product, the live site is linked below!