BRAND IDENTITY • FUNNEL OPTIMIZATION • UX/UI DESIGN

Auto Collision Design System

Engineering high-converting, high-trust digital experiences for collision repair networks

After a crash, drivers need speed, empathy, and zero friction. I architected a white-label lead generation system for collision repair networks—transforming fragmented landing pages into a high-converting, empathetic intake engine.

cms image
cms image

The challenge

Crafting Tactile Luxury Online

Drivers arriving at a body shop website are rarely browsing casually; they are dealing with active insurance claims, vehicle damage, and high cognitive load. Legacy repair shop sites were failing to convert this high-intent traffic due to friction and lack of structure.

As Noor® Living expanded its high-end interior catalog, standard e-commerce grids weren't enough to convey physical craftsmanship. I led the digital experience design, building an interaction-led storefront that translates material texture and spatial design into fluid, high-converting digital moments.

Key initiatives included:

  • Frictionless 2-step estimate funnel: Designed a low-effort intake module ("Takes less than 60 seconds") featuring dedicated damage photo-upload fields to streamline quotes.

  • Empathetic, hero-first positioning: Formulated reassuring, high-impact hero sections ("A crash happened. We’ll handle the rest") paired immediately with persistent tap-to-call and messaging buttons.

  • Modular trust architecture: Developed dynamic UI components for local proof—including geo-personalized headers (Trusted by drivers in [CITY]), live Google ratings, and I-CAR Gold Class certification badges.

  • Multi-theme token system: Built flexible light and dark theme token sets (crimson, electric blue, and deep charcoal) enabling rapid visual customization across regional client branches without breaking layout logic.

As Noor® Living expanded its high-end interior catalog, standard e-commerce grids weren't enough to convey physical craftsmanship. I led the digital experience design, building an interaction-led storefront that translates material texture and spatial design into fluid, high-converting digital moments.

We needed to shift from generic marketing templates to an empathetic, structured design system that enabled instant conversion, trust, and operational scalability across multiple shop locations. This estructure applied to more than 30 brands of collision across US.

As Noor® Living expanded its high-end interior catalog, standard e-commerce grids weren't enough to convey physical craftsmanship. I led the digital experience design, building an interaction-led storefront that translates material texture and spatial design into fluid, high-converting digital moments.

Process & Strategy

We didn’t just re-skin landing pages—we architected a modular, multi-variant design system engineered specifically for local lead generation and white-label deployment.

Key initiatives included:

  • Frictionless 2-step estimate funnel: Designed a low-effort intake module ("Takes less than 60 seconds") featuring dedicated damage photo-upload fields to streamline quotes.

  • Empathetic, hero-first positioning: Formulated reassuring, high-impact hero sections ("A crash happened. We’ll handle the rest") paired immediately with persistent tap-to-call and messaging buttons.

  • Modular trust architecture: Developed dynamic UI components for local proof—including geo-personalized headers (Trusted by drivers in [CITY]), live Google ratings, and I-CAR Gold Class certification badges.

  • Multi-theme token system: Built flexible light and dark theme token sets (crimson, electric blue, and deep charcoal) enabling rapid visual customization across regional client branches without breaking layout logic.

“In emergency services, clarity isn’t just an aesthetic choice—it’s the primary driver of conversion.”

cms image
cms image
cms image
cms image

Strategic Principles

Designing for immediate reassurance and speed Mobile-first actionability: Every component was optimized for single-thumb navigation, ensuring immediate access to estimate forms or direct phone calls from the road.

Architecture-first components: Sections were structured as independent visual blocks—services, FAQs, before/after galleries, and reviews—allowing custom layouts tailored to each shop’s offerings.


Anxiety-reducing content hierarchy: By breaking down complex repair stages into clear 3-step visual breakdowns, we eliminated user doubt around timelines, loaner cars, and insurance handling.

Architecture-first components: Sections were structured as independent visual blocks—services, FAQs, before/after galleries, and reviews—allowing custom layouts tailored to each shop’s offerings.


Anxiety-reducing content hierarchy: By breaking down complex repair stages into clear 3-step visual breakdowns, we eliminated user doubt around timelines, loaner cars, and insurance handling.

Anxiety-reducing content hierarchy: By breaking down complex repair stages into clear 3-step visual breakdowns, we eliminated user doubt around timelines, loaner cars, and insurance handling.

Outcomes

The impact of the new design system was visible across both business growth and user engagement:

01

Conversion Growth

Drove a measurable lift in overall lead volume across quote submissions and direct tap-to-call actions by optimizing CTA hierarchy and placing high-contrast estimate triggers above the fold.

03

Deployment Velocity

Accelerated white-label client site rollouts from weeks to hours by building a modular system of reusable Figma components and flexible design tokens.

02

Mobile First Accesibility

Reduced drop-off rates on emergency mobile traffic through single-thumb navigation, high-speed layout performance, and immediate access to support.

04

Funnel Completion

Boosted completion rates for multi-step quote requests and damage photo uploads by restructuring complex intake forms into a guided, low-effort 2-step process.

01

Conversion Growth

Drove a measurable lift in overall lead volume across quote submissions and direct tap-to-call actions by optimizing CTA hierarchy and placing high-contrast estimate triggers above the fold.

02

Mobile First Accesibility

Reduced drop-off rates on emergency mobile traffic through single-thumb navigation, high-speed layout performance, and immediate access to support.

03

Deployment Velocity

Accelerated white-label client site rollouts from weeks to hours by building a modular system of reusable Figma components and flexible design tokens.

04

Funnel Completion

Boosted completion rates for multi-step quote requests and damage photo uploads by restructuring complex intake forms into a guided, low-effort 2-step process.

My mission is to

From high-level vision to production reality.

Open for remote product design leadership worldwide