Design System for FPAC (FSA)

An enterprise Design Product servicing over 150 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 ever-evolving online documentation system. The codebase consists HTML, CSS, and JavaScript assets that allow developers to build cohesive and consistent web applications.

  • Date

    Ongoing

  • Client Name

    USDA

See Project

Problem Statement

Our challenge was to develop a modern way of delivering consistent and cohesive digital experiences across all of FPAC suite of products. Development teams were building applications within silos and following a 15 year-old printed style guide. Modernizing the UX and Design practice across the enterprise, was greatly needed.

Timeline

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 developed 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 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 technology agnostic, we have successfully implemented the system into multiple design toolkits, high-fidelity prototypes, and a new Video-based training website for the FPAC Developer community.

  • Metric

    Over 10K Hours saved annually

  • Metric

    Millions of tax-dollars saved annually

Learnings

To gain acceptance across a large government enterprise, identifying the motivating factors of executive leaders ensures success in a "Command and Control" organization.

Contributions

  • UX Strategy & Leadership
  • Strategic Direction for Product
  • Executive Education & Buy-in
  • Gov. Stakeholder Team Facilitation
  • MARCOM Strategy
  • Dev Community Evangelism
  • Technical Delivery of Product
  • Usability Testing & Focus Groups
  • Design Toolkit Integrations
  • Analytics & Measurement