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
- Senior Product Designer
- Lead Systems and UI
Timeline
- 4 Weeks
Outcome
- Production-ready component library
- High-fidelity core mobile flows
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.
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.
- Semantic Tokenization:I utilized Figma Variables and created a semantic naming convention. This allowed the engineering team to map the Design System directly to their code hooks, enabling them to build new pages faster than traditional handoff methods. For more context on how I set up the design tokens, you can read my article onSetting up Design Tokens for Multi-themes in Figma
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.
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.
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.