ROLE: Product Design Lead / Prompt Engineer
CLIENT: Military.com (enterprise clients including Delta)
TOOLS: Claude Design (AI-assisted prototyping), Figma, Adobe Suite
CLIENT: Military.com (enterprise clients including Delta)
TOOLS: Claude Design (AI-assisted prototyping), Figma, Adobe Suite
The Challenge
Military.com's Military Skills Translator (MST) matches a veteran's military occupation code (MOS, AFSC, Rating) and sub-specialties to civilian job openings, using occupation mapping built in conjunction with industrial-organizational psychologists, so the matching itself was solid.
The front end wasn't. It didn't work on mobile and relied on a confusing left-rail filter that couldn't flex to match enterprise clients' branding. With Delta, The Nature Conservancy, and other clients waiting and a stakeholder demo set for Monday, Military.com needed a redesigned MST, from concept to working prototype, in 24 hours.
The front end wasn't. It didn't work on mobile and relied on a confusing left-rail filter that couldn't flex to match enterprise clients' branding. With Delta, The Nature Conservancy, and other clients waiting and a stakeholder demo set for Monday, Military.com needed a redesigned MST, from concept to working prototype, in 24 hours.
Impact at a Glance
24 hours
from kickoff to a working, demo-ready prototype
AI-prototyped
built end-to-end, prompt to functioning prototype
6 clients
Locked in and waiting on the redesign, including Delta and The Nature Conservancy
from kickoff to a working, demo-ready prototype
AI-prototyped
built end-to-end, prompt to functioning prototype
6 clients
Locked in and waiting on the redesign, including Delta and The Nature Conservancy
The Solution
The 24-hour deadline ruled out a traditional design process, so I made the call early to prototype in Claude Design instead of building static comps in Figma first, since I needed something a VP could click through and react to, not just look at. I built a style guide template first so any client's brand could drop into the same MST shell without a rebuild, then audited the existing UI against modern job board and filtering patterns to separate what was actually broken from what was just dated, feeding both into the prompts that shaped the build.
The first round was a quick proof of concept meant to get early feedback fast: a branded landing page with light and dark themes and a top nav bar carrying the client's logo plus an easy "back to site" button, basic navigation the old MST never had.
Prompting the Embed Version
Military.com's VP of Product and Engineering liked the direction but flagged that most clients need to embed the job board directly into their own site via iframe rather than send users to a standalone page, so I prompted a self-contained job board version alongside it in the same working session.
Finally Mobile-Friendly
I also moved filtering from the old left rail to the top of the results, replacing dropdown-heavy search with color-coded civilian skill pill tags and a distance slider, which is what made a real mobile layout possible for the first time.
Working this way meant I was directing and refining a real product surface through iteration, not just generating a mockup, which is exactly the kind of AI-driven workflow I've been building fluency in.
Working this way meant I was directing and refining a real product surface through iteration, not just generating a mockup, which is exactly the kind of AI-driven workflow I've been building fluency in.
MST Comparison
Desktop
BEFORE
BEFORE
Desktop
AFTER
AFTER
Moblile
BEFORE
BEFORE
Moblile
BEFORE
BEFORE
Results and Business Impact
On time for Monday's demo.
Delivered both design directions inside the 24-hour window Military.com's VP of Product and Engineering needed for the stakeholder review.
Zero custom rebuilds per client.
The new style guide system lets any client's logo, colors, and fonts drop into the same MST shell.
Unblocked the iframe use case.
Built a self-contained job board that solves the integration model most of the locked-in clients actually need, not just a standalone page.
Same-day stakeholder sign-off.
Both directions reviewed and approved by the VP of Product and Engineering in one sitting, no revision cycles before the demo.
A foundation built to scale.
The reusable style guide and embeddable job board give Military.com a repeatable path to onboard the 24 additional prospects evaluating MST.
Proof AI-assisted design holds up under real deadlines.
A client-facing, stakeholder-approved prototype built entirely through AI-directed iteration, not just a proof of concept, on a timeline no traditional process could have hit.
Delivered both design directions inside the 24-hour window Military.com's VP of Product and Engineering needed for the stakeholder review.
Zero custom rebuilds per client.
The new style guide system lets any client's logo, colors, and fonts drop into the same MST shell.
Unblocked the iframe use case.
Built a self-contained job board that solves the integration model most of the locked-in clients actually need, not just a standalone page.
Same-day stakeholder sign-off.
Both directions reviewed and approved by the VP of Product and Engineering in one sitting, no revision cycles before the demo.
A foundation built to scale.
The reusable style guide and embeddable job board give Military.com a repeatable path to onboard the 24 additional prospects evaluating MST.
Proof AI-assisted design holds up under real deadlines.
A client-facing, stakeholder-approved prototype built entirely through AI-directed iteration, not just a proof of concept, on a timeline no traditional process could have hit.