Project Outcomes at a Glance

High Velocity

Streamlined workflows allow even short-term interns to rapidly deliver tactical software and cyber applications.

Multi-Platform

A single source of truth supporting React (Web/Desktop) and Flutter (iOS/Android) environments.

 
Brand Aligned

Codified “Guardian One” values (Openness, Balance) directly into the design tokens and themes.

Project Details

Core Responsibilities
  • Lead UX Specialist
  • Usability Researcher
  • Design System Governance
Tools
  • Figma (Tokens)
  • Zeplin
  • Storybook
  • Directus (CMS)
Frameworks
  • MUI & MUI X
  • React
  • Flutter
Project Documentation
The Challenge: Friction in the Stack

The USSF’s digital ambition was to empower Guardians to build tools—from command-level dashboards to tactical cyber software. However, relying on the legacy U.S. Web Design System (USWDS) created a bottleneck. It wasn’t optimized for the team’s modern React and TypeScript stack, leading to “hacky” implementations and inconsistent experiences across internal portals and mobile apps.

My Role: Building the Foundation

My objective was to refactor Polaris from the ground up. We needed a system that was more than just a component library; it had to be a comprehensive “operating system” for design. This meant moving away from legacy code to a modern MUI X foundation, establishing a strict governance model, and ensuring the system could scale to desktop and mobile native apps.

From Insight to Action

We executed a strategic, multi-phased rebuild:

  • Tokenizing the Brand: We didn’t start with pixels; we started with values. We translated Guardian One values into a semantic token system (e.g., color.background.primary). This allowed us to support Light, Dark, and High-Contrast modes effortlessly.
  • Automated CI/CD for UX: Efficiency was paramount. I designed a pipeline where assets flowed from Figma to Zeplin (for redlining) and then directly into the VS Codebase via API, with Storybook acting as the testing ground.
  • Governance Model: To prevent “wild west” development, I established a clear contribution process. Minor bug fixes were crowdsourced, while major enhancements required system-wide coordination.
  • Data as a Service (DaaS): To support dynamic mission needs, we architected the portal as a DaaS platform using Directus. Content is streamed “on the fly” via custom APIs, allowing real-time data updates without requiring application redeployments.
  • Cross-Platform Architecture: We ensured the token logic extended beyond web, supporting Flutter for native iOS and Android applications.

The Result: A Unified Force

The rebuilt Polaris system transformed how the USSF builds software.

  • Empowered Teams: The system is so robust that Guardians on short-term internships can now spin up fully compliant, accessible applications in weeks rather than months.
  • Total Consistency: Whether a Guardian is on a desktop portal or a mobile tactical app, the interaction patterns and visual language remain consistent.
  • Presentation Kit: We extended the system beyond code, delivering Keynote and PowerPoint assets to ensure the brand is consistent in boardrooms as well as browsers.

Key Takeaways

This project reinforced that a design system is an ecosystem, not a sticker sheet.

Powered by