Automotive media · AutoTrader.ca

AutoTrader

Brand stories, inside AutoTrader.

Sponsored campaign pages for Ford, Mazda, Audi and Mitsubishi on AutoTrader.ca, from episode pages to model stories, on every screen.

Role
UX/UI Designer
Scope
Campaign homes, episode pages, model stories, responsive UI
Focus
Brand storytelling, reusable templates, EN/FR
Scroll to explore
Mission

Give each brand a story page, not a banner.

Automakers sponsor experiences on AutoTrader.ca. Each one needed to feel like the brand while staying clearly part of AutoTrader, and to lead shoppers from a story to a model they could look at more closely.

My contribution

I designed the campaign pages and their responsive layouts.

Campaign homes, episode pages with route maps and story cards, model story pages, and the tablet and phone versions of each.

4Brand campaigns
3Breakpoints designed
4 monthsProject length
2021Delivered

A brand story that still feels like AutoTrader.

Each campaign is a full page inside AutoTrader.ca: the brand sets the mood, AutoTrader keeps the frame.

The formatSponsored, and labelled that way.

Every page carries the AutoTrader bar, a Sponsored label and the automaker's logo, and closes with "An AutoTrader Media Experience". The brand gets the space between them.

Bronco Sport episode intro on AutoTrader.ca with the hosts, a short premise and a Watch Now button.
In practiceFord's episode page, inside the AutoTrader frame.

The hosts and the premise come first, then one Watch Now button. Navigation between Ford models stays in the bar.

Five zones, five shopper questions.

Scroll the cards, or tap a marker on the page.

Full Bronco Sport episode page: AutoTrader header with model tabs and the Bronco Sport logo, a video hero with an Up next card, a Route Highlight map, three story cards, a contest banner and Watch now cards for Mach-E and F-150.
Built for AdventureBronco Sport episode, top to bottom
01 / 05

AutoTrader frame, Ford story.

  1. Whose page is this?

    AutoTrader frame, Ford story.

    The AutoTrader badge sits left, the Bronco Sport mark right, and the model tabs between them.

    • Clear ownership
    • Consistent navigation
  2. Can I see it drive?

    The episode plays first.

    One play button over a full-width hero, with an Up next card waiting in the corner.

    • One primary action
    • Continuity
  3. Where did they take it?

    The trip becomes a map.

    Five stops, from Base Camp to Fireplace, trace the episode on one line.

    • Match the real world
    • Recognition over recall
  4. What else should I know?

    Three stories, one Read button each.

    Photo cards with short headlines; only the tall card adds a summary.

    • Scannable chunks
    • Consistent actions
  5. What do I watch next?

    The other models close the page.

    A contest banner, then Mach-E and F-150 cards with Watch now.

    • A clear next step
    • No dead ends

What a shopper asks, and how the page answers.

Pick a question. See the screen that answers it.

Both models on the first screen.
Mazda Joy of the Drive hero with a red CX-30 and a black CX-5 side by side, each with a Know more button.
Concepts · not shipped

Three I would design next. Try them.

  • Bronco Sport saved. Add one more to compare.

    Save models while you watch.

    Save a model
    • Sample CX-3018 km away
    • Sample CX-525 km away

    Filter nearby cars by budget.

    Pick a budget
  • Pick a time.

    Book a test drive from the story.

    Pick a time

Home, episode, and the same template again.

A campaign home picks the model; episode pages tell its story; the template carries to the next model.

Mazda Joy of the Drive campaign home on AutoTrader.ca with the CX-30 and CX-5 side by side.
01 / Campaign homeTwo models, one choice on the first screen.

Mazda's CX-30 and CX-5 sit side by side, each with its own Know more button, under the AutoTrader bar.

Ford Bronco Sport episode page: video, a route highlight map, more Ford story cards and a contest banner.
02 / Episode pageThe episode plays first; the trip follows as a map.

Under the video, a route map, more Ford stories and a contest entry keep viewers inside the campaign.

Ford Mustang Mach-E episode page built on the same template as the Bronco Sport page.
03 / Same templateA second model, no new layout.

The Mach-E page reuses the episode template: video, route highlight, story cards and contest banner.

Branded, reusable, readable on a phone.

Three rules held across every brand.

Clear ownership

Always an AutoTrader page, always marked as sponsored.

The red AutoTrader bar, a Sponsored label and the brand's logo sit on every page, so the brand story never passes for editorial.

Reusable templates

One episode template, several models.

Bronco Sport, Mach-E and F-150 share the same episode page, so each new model is content, not a new design.

Responsive continuity

The same story, top to bottom, on a phone.

Side-by-side heroes stack into one column, and the EN | FR switch and menu stay in the bar.

One series, three ways in.

The Ford hub lists the episodes, each episode opens with its hosts, and every model uses the same page.

Ford campaign home on AutoTrader.ca with three episode cards and Watch Now buttons.
Ford hubThree episodes, one row.
Bronco Sport episode intro with the hosts, a short premise and a Watch Now button.
Episode introWho is in it and what happens, before you press play.
Ford F-150 episode page on the shared episode template.
F-150 episodeA third model on the same template.

The same story on a tablet and a phone.

Side-by-side heroes stack, long stories become one column, and the bar keeps the menu and EN | FR.

Mazda Joy of the Drive campaign home on a tablet, with the CX-30 and CX-5 stacked.
Tablet · Mazda homeSame order, one column.
Audi Q5 Sportback story page on a phone: Designed for Tomorrow.
Phone · Audi storySame order, one column.
Audi Q5 Sportback story page on a phone: Designed for Driver Perspective.
Phone · Audi storySame order, one column.
Audi Q5 Sportback story page on a phone: Designed for Safety and Tech.
Phone · Audi storySame order, one column.

One platform, many brand voices.

The same media framework supports very different brand stories — luxury cues for Audi, family warmth for Mazda, expressive contrast for Mitsubishi — without breaking the AutoTrader experience underneath.

Explore the campaign system behind them: tokens, components, and page templates.

Mazda Joy of the Drive brand campaign hero with CX-30 and CX-5.
MazdaJoy of the Drive

Side-by-side hero comparison surfaces that let shoppers explore the CX-30 and CX-5 inside one branded media experience.

Audi Q5 Sportback Driving Tomorrow brand campaign hero.
AudiQ5 Sportback · Driving Tomorrow

A three-pillar storytelling layout — Styling, Driving Dynamics, Innovation — that scales from a panoramic desktop hero into a single-column mobile flow.

Mitsubishi Eclipse Cross Bold Moves brand campaign hero.
MitsubishiEclipse Cross · Bold Moves

An interactive keyboard-driven exploration with bilingual EN/FR support, bringing Bold Design, Bold Eco-Tech, and Performance For Life into a single moody hero.

Long-form model page

A full model story on one page.

Mazda's CX-5 page runs from the hero through design philosophy and model history, alternating photos and short text blocks.

Full-length Mazda CX-5 model page from the Joy of the Drive campaign.
Outcome

Brand stories that stay inside AutoTrader.

A sponsored page works when the brand gets the story and the shopper always knows where they are.
  • Campaign pages for Ford, Mazda, Audi and Mitsubishi
  • One episode template reused across several Ford models
  • Desktop, tablet and phone layouts in English and French