Modernizing Logistics for the Front Lines

Codename: DefenseSupply.gov is a unified digital procurement platform designed for Defense Force personnel to manage, track, and order official uniforms and gear. In a high-pressure one-month engagement, I established the foundational design system and mapped the core mobile UI flows.

The result was a production-ready component library and high-fidelity flow blueprints that gave engineering a clear implementation path.

My Role

  • UI Design
  • Design Systems

Timeline

  • 4 Weeks

Outcome

  • Production-ready component library
  • High-fidelity core mobile flows
A preview of the DefenseSupply.gov mobile procurement experience

TLDR

System-first approach

Built the foundational design system first, then assembled the final UI flows in with consistency.

Scalability through Design Tokens

Instead of static screen handoff, I delivered a tokenized UI kit, structured as a shared source of truth for design and engineering.

Mobile-first design

Designed for mobile-first for outdoor environments, while keeping the desktop experience in mind as well.

Executive Summary

DefenseSupply.gov focused on modernizing official gear procurement for Defense Force personnel through a unified digital platform. The challenge was to translate strict logistical requirements into a fast, clear, and trustworthy shopping experience while moving from discovery to handoff in one month.

Challenges

  • Tight timeframe: Building a robust Figma component library while mapping end-to-end core flows in 30 days demanded ruthless prioritization and high-leverage decisions.
  • Cross-Platform Parity:Ensure a seamless experience between desktop terminals at the base and mobile devices in the field.
  • Rapid Scalability:Build a system that allows future modules (tactical gear, medical supplies) to be added without redesigning the UI.

The Garrison Design System

Because of the tight one-month timeline, I didn't start with screens, I started with foundations. This system-first approach allowed me to assemble the final UI flows with consistency.

Overview of the Garrison design system with tokens, spacing, and component layouts

Key System Features

  • Accessibility First: Colors and contrast ratios were strictly tuned to WCAG 2.1 AA standards to ensure usability in high-glare outdoor environments.
  • Mobile-first: Designed for mobile-first, while keeping the desktop experience in mind as well.

Core UI Flows

With the Garrison Design System as my foundation, I focused the remaining weeks on high-fidelity prototypes for the critical user journeys.

Field-ready, mobile-first flow

A streamlined mobile flow for personnel to request replacement items while on active duty or at a base.

  • The Entitlement Logic: I designed a clear visual distinction between Allocated items and Self-Funded items.
  • Payment Integration: Integrated secure government payment gateways alongside personal payment options as secondary payment method.
Mobile requisition flow screens for DefenseSupply.govHybrid checkout flow showing allocation and self-purchase states

Order Lifecycle and Transparency

To reduce administrative inquiries, I designed a robust status-tracking component that works across both platforms.

  • Status Tracking: Shows the order status from command approval to Ready for Base Pickup.
  • Returns and Support: A returns and support hub with detailed return policies and FAQs.
Order lifecycle screens including checkout, order details, and manage ordersReturns and support hub screens with return details and FAQs

Conclusion

As Senior Product Designer, my goal was to leave behind a self-sustaining and scalable design system, not a static set of polished screens. The outcome was a practical library that helped engineering move faster with consistency and lower long-term maintenance cost.