Driver App

Driver Mobile App

Duration: 6 months (Jun 2019 – Mar 2020)     •     Timeline: 10-week sprint cycle     •     Project Length: 10 months
Portfolio Case Study — Manufacturer Co-op / Dealer Portals

Michelin Ad Builder: Empowering Dealers to Build Brand-Compliant Ads Fast

Net-new dealer portal enabling non-designers to create on-brand, co-op-eligible ads in minutes. I led research → IA → flows → design system → validation to compress time-to-publish and lift adoption.

Michelin Ad Builder mockup
Role
Senior UI/UX Product Designer
Scope
Research → IA → UI System → Validation
Channels
Print • Paid Social • Display • POS
Featured Case

Why an Ad Builder?

Dealers needed a simple, guarded path to create brand-compliant ads that qualify for co-op reimbursement without needing Photoshop or a designer. Requirements included locked brand elements, compliant headlines, auto-legal, localization, and fast exports for multiple channels.

End-to-End Journey

Michelin Ad Builder — UI/UX Journey

1

Discovery & Research

Interviews with dealers, brand, and co-op teams; audits of legacy assets & rejection reasons; time-and-motion studies on current ad creation.

  • Dealer tasks & pain points (copy, legal, export sizes).
  • Compliance & co-op rules distilled into guardrails.
  • Channel format inventory & variant mapping.
2

IA & Flows

Task-first IA: Template → Customize → Review → Export → Submit for co-op. Clear breadcrumbs & progress.

  • Template gallery with filters (channel, promo, season).
  • Guarded fields & locked brand zones.
  • Auto-legal & disclaimers tied to offers.
3

Design System

Tokenized components for consistency and speed across the portal.

  • Forms, chips, tabs, cards, stepper, validation patterns.
  • Image cropper, focal-point, smart fit for sizes.
  • Error states & contextual help for non-designers.
4

Validation

Moderated tests on first-time dealers; A/B of editor hints; review of reject/approve cycles with brand.

  • Task success & time-to-export benchmarks.
  • Compliance pre-check accuracy.
  • Content quality & legibility at size.
5

Launch & Iterate

Analytics on template usage, drop-offs, and co-op submissions; release cadence aligned to seasonal promos.

  • Template heatmap & variant gaps.
  • Reject reason taxonomy → fixes.
  • Localization & asset updates at scale.
Dealer Emotion Over the Journey
Line chart showing emotional trajectory from Onboard to Advocate.
  • Onboard
  • Guided
  • Confident
  • Delighted
  • Advocate
Planned Outcomes & KPIs

Results & Impact

We designed for measurable improvements across dealer productivity and brand compliance.

-50%
Time-to-Publish
Guided editor + smart sizing + auto-legal.
-35%
Compliance Rejects
Locked zones + rule-based checks.
+28%
Co-op Utilization
Clear steps to submit + status.
+40%
Template Reuse
Seasonal variants & favorites.
Design Walkthrough

Mockups & Step-by-Step UI/UX

Replace placeholders with real frames. Use captions to narrate decisions and validations.

1

Template Gallery

Filter by channel, season, promo; preview sizes; see co-op eligibility.

Template gallery mockup
Dealers start here—fast scannability and clear eligibility.
2

Creative Editor

Locked brand zones; guided copy fields; smart image fit & focal point.

Creative editor mockup
Editable vs. locked elements are unmistakable.
3

Compliance Pre-check

Rule engine flags issues (copy length, logo placement, contrast) before export.

Compliance pre-check mockup
Reduce back-and-forth by catching errors upfront.
4

Export & Variants

One click outputs all required sizes: print, social, display, POS.

Export and variants mockup
Channel-ready files with naming conventions and bleed/safe areas.
5

Co-op Submission

Generate proof + metadata; submit for approval; track status.

Co-op submission mockup
Close the loop with clear receipts and reimbursement status.
End-to-End

End-to-End UI/UX Journey & Outcomes

Journey Stage Challenge Approach Impact
Discovery Field Research Dealers unsure how to make “compliant” ads. Interviews, reject-reason audit, time-to-task baseline. Guardrails clarified Flows prioritized
IA Navigation & Flows Fragmented steps; hidden requirements. Template → Customize → Review → Export → Co-op. Fewer taps Completion ↑
Design System Inconsistent components; rework. Tokenized UI kit; reusable editor & validator patterns. Delivery faster Platform parity
Validation Usability & Data Opinion-driven decisions. Moderated tests + analytics on creation & export. Evidence-based iteration Adoption ↑
Compliance Brand & Legal High reject rates; slow review. Locked zones + rule engine + auto-legal. Rejects ↓ Approvals ↑

UX Improvements Matrix

Area Challenge Solution Impact
Templates Find & Start Hard to locate the right size/promo. Faceted gallery + previews + eligibility badges. Start time ↓ Errors ↓
Editor Brand Guardrails Unclear what’s editable vs locked. Locked zones; guided fields; visual hints. Compliance ↑ Rework ↓
Legal Auto-Disclaimers Manual copy/paste errors. Offer-aware auto-legal & disclaimers. Rejects ↓ Confidence ↑
Export Variants Many sizes; inconsistent quality. One-click multi-export; naming recipes. Quality ↑ Time ↓
Co-op Submit & Track Opaque approval process. Submission wizard; status tracking; receipts. Utilization ↑ Support tickets ↓