NRCS Design System

Project Overview

An adaptation of the FPAC Design System and its inherent roots from the U.S. Web Design System.

A resource for UI styles, accessible components, and guides for their use across a suite of applications. All of which were carefully selected based on research, studies, and testing.

Also attempts to provide coded examples of components for accessibility, presented via StoryBook as an aid to developers.

Built with React around Reactstrap/Bootstrap to align with the most common frameworks teams are using at the moment.

Published on GitHub to encourage open collaboration and contributions over time.

Published matching Figma library to streamline design and developement.

Impact & Outcomes

• Design efficiency grew by roughly 30% (via Jira ticket analysis) with templates and reduced need for red-lining
• Development time reduced by 25% by streamlining component usage
• UI consistency improved across applications and UI related defects and churn were significantly reduced
• 508 accessibility testing became less of a bottleneck

A few years later, the benefits and alignment this design system brought to the organization led to the project being forked and rebuilt using Material-UI (MUI) in React as a second generation effort that brought in more modern tooling.

Three development trains (multiple scrum teams) have since adopted this design system to build and refactor multiple applications, including:

• NRCS Conservation Desktop
• CART (Conservation Assessment Ranking Tool)
• GRAS (Grazing Land Applications Suite)