UI Design
Design Systems
Branding

About the Company

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 Ask

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.

The Results

  • Enhanced productivity by creating an adaptable design system.
  • Streamlined hand-off process to development team by utilizing tokens and a shared naming system.
  • Improved site accessibility by aligning color palette to WCAG guidelines.

Tools

Figma

Color & Palettes

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.

Color Tokens

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.

Modules

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).

Modules & Variables Collections

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.

The Results

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! 

Thank You~