Design System for FPAC (FSA)

An enterprise Design Product servicing over 50 Development teams and over 400 applications.

Design System homepage

Overview

The FPAC Design System (previously FSA Design System) is a two-pronged product, servicing Farm Production and Conservation (FPAC) program applications for the United States Department of Agriculture (USDA). The Design System features a robust codebase and an ever-evolving online documentation system. The codebase consists of the HTML, CSS, and JavaScript assets that allow developers to build cohesive and consistent web applications across more than 400 USDA internal applications.

  • Date

    Ongoing

  • Client Name

    USDA

See Project

Problem Statement

With over 400 internal FPAC programs across more than 50 Development teams, all developing applications within silos and following a 15 year-old printed style guide, modernizing the UX and Design practice was greatly needed. Our challenge was to develop a modern way of delivering consistent and cohesive digital experiences across all of FPAC suite of products.

Process

A User Centered Design (UCD) approach is used for continuous feedback and product releases.

01

Research

The UX Architecture team performed competitive analysis to identify modern frameworks of design, including USWDS.

02

Weekly Engagement

To gain alignment, I managed a Digital Usability Team of 25+ senior stakeholders to engage with on a weekly basis.

03

Development

The codebase was development to be technology agnostic to work with legacy applications and newer SPAs.

04

MVP

I helped design and develop an MVP from feedback related to the weekly DUT sessions, and Usability Testing with County Office Users.

05

Evangelism

In order to promote the new system, I conducted product demos and presentations with 20+ program teams to showcase the benefits.

06

Executive Buy-in

To ensure greater adobtion, I presented the benefits to multiple senior leaders within the USDA, including the Chief Deputy for FSA.

07

Continuous Releases

With regularly planned product releases, including numerous components and UX Patterns, the Design System feeds itself from external projects.

08

Analytics

To better understand User Behavior, a customized JavaScript module captures events for behavior tracking and data analysis.

Component details page
Code Snippet that runs component
Guidance and Usage details

Results

The FPAC Design System continues to service all newly developed SPA program applications, but with it also being technology agnostic, legacy applications can also be updated to utilize the HTML and CSS. Overvall, the project has been successful, and has saved tens of thousands of hours of development time and millions in tax-payer dollars.

With the FPAC Design System being agnostic, multiple unrelated projects have successfully implemented and are using the markup and style, including multiple design toolkits, high-fidelity prototypes, and a new Video-based training website for the FPAC Developer community.

  • Metric

    10K+ Hours Saved

  • Metric

    Millions in tax-dollars saved

Learnings

To gain alignment and acceptance across a large enterprise organization, it is critical to engage with stakeholders to gain trust and support for your initiatives.

Contributions

I was responsible for strategic direction of the Digital Usability Team, design and development of Design System codebase, Content Strategy and documentation, evangelism and presentations to executive leadership, and continuous development of new components and UX patterns.