Case study · via Perficient

Ford

Three workstreams on Ford’s websites. Two were about applying a new brand right the first time, with no rounds of feedback; the third was about fixing how people find a job.

My role
  • UI/UX DesignerPerficient
  • Migration pagesResponsive layouts and components
  • Corporate sitePage design on the new brand
  • Careers siteMainly UX: audit, journeys, wireframes
Workstreams
  • Migration2022–2023 · Bronco, collision, Power Stroke…
  • Corporate site2023–2024 · part of the migration
  • Careers site2024 · mainly UX
Team
  • Sebastián CastilloMeUI/UX Designer
  • Tyson DammanDirector · migration
  • Content strategists and developers
Project
Bronco Wild Fund page: the fund’s green badge over a Bronco in a forest, with an introduction about protecting public lands
Bronco Wild Fund, still running on this design.

01 A migration that became a refresh

It started as a technical migration of several external-facing sites. While the backend moved, each site also had to leave behind outdated design and line up with the brand’s evolving identity.

Working with Tyson Damman, then the director on the project, I led the design of the refreshed pages: adapting the updated brand guidelines into flexible layouts and components that worked across very different domains, from Bronco ambassadors to collision repair, diesel engines, parts and accessibility programs. Every layout was built mobile-first.

Strategists ran a content audit for each site before design. I wasn’t part of the audits, but I worked closely with them to understand what each page needed to say. I also picked most of the imagery, except what the content and legal teams provided. Bronco Wild Fund and the other Bronco sites still run on these designs; the ambassadors section went live and was later retired.

Bronco ambassadors page: a Bronco in the mountains, then a grid of disciplines (Snow, Water, Rock & Trail, Bike, Adventure, Creator) with photos
Bronco ambassadors, from the overview to each discipline (later retired). Scroll inside the frame.
Bronco ambassador page: a Bronco at dusk behind a camera on a tripod, the title “Creator”, and the profile of an adventure photographer
An ambassador page: Creator.
Collision Assistance page: a hero about getting help after an accident, certified collision and glass network badges, and an illustration promoting the FordPass app
Collision Assistance from FordPass.
Power Stroke diesel page: two Super Duty trucks in the hero, four engine options and work trucks in a “perfect power pairing” section
Power Stroke diesel engines.
Motorcraft products page: brake parts in the hero, then engine, electrical, and brakes and suspension categories with product photos
Motorcraft parts.
Accessibility page: a hero about accessibility as part of Ford’s heritage, a video, adaptability options for cars, trucks, SUVs and vans, and personal stories
Accessibility. Scroll inside the frame.

02 Built on the design system

With no time to iterate, the design system carried the brand. I worked from Ford’s components, adapted the existing ones to the new look, and proposed custom components where a page needed something the system didn’t have yet, in close contact with developers so everything could be built as designed.

03 The corporate site

The corporate site was part of the same migration. It shared the goals but not the tone: its content and audience called for a more formal, structured approach.

I translated the new identity into a responsive, accessible design: page layouts, modular components and the responsive strategy, in close alignment with development. Big photography and full-width heroes replaced the boxed, centered layout, and navigation cards now lead to the rest of Ford’s sites.

The previous corporate homepage: a boxed hero photo, a centered “Welcome” heading, a purpose video, a quote, recent articles and a “What’s happening at Ford” section
Before · the previous homepage.
The new corporate homepage: a full-width “Welcome to Ford” hero, “Our purpose as a company”, a quote from Bill Ford, and photo cards to Careers, Operations and Social Impact
After · the new homepage.
Our History page: a black and white portrait of Henry Ford in the hero, cards for the company timeline and a heritage of help, a quote, and a section about Henry Ford
Our History.
The corporate homepage on a laptop with the Operations menu open
Navigation with the Operations menu open.

04 The careers site

This one was mostly UX. I joined halfway through to cover a teammate on leave, working with content strategists, developers and the talent acquisition team.

Mapping the existing site showed the real problem: jobs lived on two different career platforms, and professional roles were hidden. To find them you had to click “Professionals”, scroll to the bottom of the page, and find a small “view jobs” button.

The previous careers landing: a “Top Companies” badge, then stacked sections for job opportunities, students and graduates, and professionals
Before · the careers landing.
The previous job search: a plain list of hourly job postings with dense blue links and little hierarchy
Before · job search on a separate platform.
Map of the existing careers site with arrows from each section to the pages it leads to, notes on topics to highlight (veterans, inclusivity, DEI, life at Ford, FAQ) and problem areas
Mapping the existing site: what to highlight, and where it broke.

05 Search first

The new landing puts job search at the top: role type, location and keyword, right under the hero, for every kind of candidate. Culture, purpose and events follow, in sections that can grow with future campaigns.

I created the low-fidelity wireframes for job listings, filters, team pages and the application flow, and designed the homepage on the brand’s design system. If I did it again, I’d push for user testing earlier to validate the job discovery interactions.

Low-fidelity wireframe of the careers landing: a video hero with a job search bar, tabs with an image and text, awards and recruiting events
Low-fidelity wireframe of the landing.
The new careers homepage: “Join Our Team” hero with a job search bar, tabs about working at Ford, headlines and recruiting events
After · the new homepage. Scroll inside the frame.
The new careers homepage on mobile: the “Movers of the world, Makers of the future” hero, a job search form and expandable sections
After · mobile.
The new job search: a “Movers of the world, Makers of the future” banner over a search bar, filters and a job detail panel
After · job search on the new brand.

06 What I took away

With no rounds of feedback, every decision had to be strategic, scalable and grounded in the brand guidelines from the start. Not every process is ideal, but strong foundations and a good design system still get you to great results. And on careers, I learned to jump into a workflow already in motion and make an impact quickly.

Designed at Perficient for Ford with Tyson Damman (Director). Screens come from my design files, some with placeholder text, and from archived captures of the sites. Ford, Bronco, FordPass, Power Stroke and Motorcraft are trademarks of their owner.

More work

All projects
  1. Previous projectConstructora BolívarMobile-first platform for new homeowners’ deliveries.
  2. Next projectMundoFitShopify store, from redesign to monthly CRO and development.