Ford · UX · UI · Design System

Ford.

Renovate the cathedral while it's open. A century-old American brand, a billion-dollar digital footprint, no platform rebuild on the table, only the components had to change. Built with VMLY&R, eight designers deep.

Visit ford.com ↗

Project at a glance

The pertinent details, what was built, what shipped, what it took.

01 Client

Ford

Component-level UX and UI for ford.com, vehicle pages, configurators, dealer tools. Eight designers, one component system, 20 million monthly visits. Built with VMLY&R / VML.

ford.com ↗

02 Year 2023 to 2024

03 Status Shipped Project closed out

04 Role

Sr. UI/UX Designer

05 Deliverables

UX components
UI page builds
Design system contributions

06 Disciplines

UX
UI
Design systems

The Brief

No rebuild. No greenfield. Just the components.

The headline brief sounded clean. The actual brief was harder. Ford couldn't, wouldn't, tear the platform down. No rebuild. No greenfield. No fresh stack. Refresh the digital experience inside the existing box.

That constraint was the project. Ford.com is a billion-dollar surface area, a hundred-plus model pages, a dealer network, a finance flow, a global footer that touches every locale. You don't get to throw that away. You learn the box, identify the components doing the work, and replace them one by one without anyone noticing the floor moving under their feet.

I joined VMLY&R and Ford's web team for that work. An eight-person design crew, two tracks: UX components for the design system, and UI construction on the pages those components compose. The brand stayed. The chrome got rebuilt from the inside.

How We Worked

The constraint set the cadence. We couldn't redraw the site, we had to retrofit the components running it. So the work moved in two-week sprints: identify a component doing the heavy lifting, study how it slotted into the legacy framework, redesign it to a higher bar without breaking the seams it had to plug into. Demo at the close of every cycle. Hand off, integrate, verify. Then the next one.

8 designers in the room · one shared design system

2wks component to ship · design, spec, hand off, integrate

0 platform rewrites · everything had to land inside the existing box

1brand Ford's identity, untouched, the system extended it

Working inside a legacy box is its own discipline. You don't get to invent your own grid, you inherit one. You don't get to pick the font, you respect the one that's been on every showroom poster and dealer brochure for decades. The craft is finding the moves that still feel new inside that frame.

My split: UX produced the reusable components, system-grade, drop-in for the platform team. UI styled and assembled the pages those components compose. Every component closed the same loop: design, hand-annotated spec, walk-through with engineering, integrate, verify on staging. The handoff was the work. Most projects ship handoffs as an afterthought. On Ford, handoffs were the artifact.

The Components

The components I contributed to the system. Each one earned its place by replacing something Ford was already running, quietly, at the same spot in the page, doing the same job better. Built and hand-annotated in Figma. Spec'd to the pixel. Click any tile to open it.

Expanded Feature

Flex Column Feature

Gallery Trigger Reveal

Gallery Video Tile

Locate a Dealer

Global Footer

Three more components in the system, Next/Previous, Glossary, Sitemap, followed the same sprint-to-handoff loop.

The Specs

The part most case studies skip. When the platform stays and only the components change, the spec sheet is the deliverable, the document that tells Ford's engineers exactly where to cut, what to keep, and how the new piece sits next to the old code that's still running. Every measurement, every state, every responsive break, every motion curve, drawn by hand and labeled.

I didn't design components and throw them over a wall. I drew the wall, with the components on one side and the dev's integration path on the other, and walked across it with engineering each sprint until the new piece was indistinguishable from the existing chassis.

Expanded Feature · Desktop

Expanded Feature · Mobile

Flex Column · Desktop

Flex Column · Mobile

Expanded Feature desktop spec, full size

Components, Composed

This is what shipped. Every page below runs on the components above, dropped into the existing chassis, styled to the brand, verified on staging before it went live.