McLaren
Designing the McLaren 750S Spider Configurator
McLaren
UI Design Across Devices for an Iconic Automotive Brand
McLaren
UI Design Across Devices for an Iconic Automotive Brand
Website
Mobile App
Design System
Product Workshop
Admin Dashboard
Web App
Website
Mobile App
Design System
Product Workshop
Admin Dashboard
Web App
Website
Mobile App
Design System
Product Workshop
Admin Dashboard
Web App
MY ROLE
UI Designer
TOOL USED
Figma
Zeplin
After Effects (for UI showcase),
Photoshop
TEAM
Product Manager
Developers (iOS and Android)
Web Developers
3D Artist
TIMELINE
3 Months
MY ROLE
UI Designer
TOOL USED
Figma
Zeplin
After Effects (for UI showcase),
Photoshop
TEAM
Product Manager
Developers
(iOS and Android)
Web Developers
TIMELINE
3 Months
MY ROLE
UI Designer
TOOL USED
Figma
Zeplin
After Effects (for UI showcase),
Photoshop
TEAM
Product Manager
Developers (iOS and Android)
Web Developers
3D Artist
TIMELINE
3 Months
THE WHAT
The McLaren Configurator is a highly visual and interactive tool for customizing McLaren’s luxury vehicles. I contributed as a UI Designer for the 750S Spider variant—where users could personalize every aspect of the car, from color and wheels to interior and trim.
This was more than a visual project. It was about translating the emotion of driving a McLaren into a sleek, seamless multi-screen digital experience.
THE WHAT
The McLaren Configurator is a highly visual and interactive tool for customizing McLaren’s luxury vehicles. I contributed as a UI Designer for the 750S Spider variant—where users could personalize every aspect of the car, from color and wheels to interior and trim.
This was more than a visual project. It was about translating the emotion of driving a McLaren into a sleek, seamless multi-screen digital experience.
THE WHAT
The McLaren Configurator is a highly visual and interactive tool for customizing McLaren’s luxury vehicles. I contributed as a UI Designer for the 750S Spider variant—where users could personalize every aspect of the car, from color and wheels to interior and trim.
This was more than a visual project. It was about translating the emotion of driving a McLaren into a sleek, seamless multi-screen digital experience.
THE WHY
High-performance cars deserve high-performance interfaces. The goal was to elevate the configurator experience to feel intuitive, immersive, and deeply premium—on every screen a customer might use.
McLaren’s buyers are tech-savvy, design-conscious, and emotionally invested in their purchase decisions. The interface had to reflect that luxury and exclusivity while remaining smooth and responsive across tablets, laptops, and smartphones.
THE WHY
High-performance cars deserve high-performance interfaces. The goal was to elevate the configurator experience to feel intuitive, immersive, and deeply premium—on every screen a customer might use.
McLaren’s buyers are tech-savvy, design-conscious, and emotionally invested in their purchase decisions. The interface had to reflect that luxury and exclusivity while remaining smooth and responsive across tablets, laptops, and smartphones.
THE WHY
High-performance cars deserve high-performance interfaces. The goal was to elevate the configurator experience to feel intuitive, immersive, and deeply premium—on every screen a customer might use.
McLaren’s buyers are tech-savvy, design-conscious, and emotionally invested in their purchase decisions. The interface had to reflect that luxury and exclusivity while remaining smooth and responsive across tablets, laptops, and smartphones.
THE HOW
I worked closely with a cross-functional team including art directors, 3D artists, and developers at HMX Media. My role focused specifically on building and refining the interface components for:
Color selection
Trim exploration
Real-time wheel previews
Summary interaction flows
We focused on modular UI systems that could scale across devices and localized versions, while preserving the brand's elegant black-orange-white theme.
THE HOW
I worked closely with a cross-functional team including art directors, 3D artists, and developers at HMX Media. My role focused specifically on building and refining the interface components for:
Color selection
Trim exploration
Real-time wheel previews
Summary interaction flows
We focused on modular UI systems that could scale across devices and localized versions, while preserving the brand's elegant black-orange-white theme.
THE HOW
I worked closely with a cross-functional team including art directors, 3D artists, and developers at HMX Media. My role focused specifically on building and refining the interface components for:
Color selection
Trim exploration
Real-time wheel previews
Summary interaction flows
We focused on modular UI systems that could scale across devices and localized versions, while preserving the brand's elegant black-orange-white theme.
RESEARCH METHODS
We began with internal interviews with McLaren’s marketing and sales teams to understand common customer expectations and decision journeys.
I audited competing luxury car configurators from brands like Porsche, Ferrari, and Tesla to spot trends and gaps. This shaped our hierarchy and visual direction.
RESEARCH METHODS
We began with internal interviews with McLaren’s marketing and sales teams to understand common customer expectations and decision journeys.
I audited competing luxury car configurators from brands like Porsche, Ferrari, and Tesla to spot trends and gaps. This shaped our hierarchy and visual direction.
RESEARCH METHODS
We began with internal interviews with McLaren’s marketing and sales teams to understand common customer expectations and decision journeys.
I audited competing luxury car configurators from brands like Porsche, Ferrari, and Tesla to spot trends and gaps. This shaped our hierarchy and visual direction.
INTERVIEW INSIGHTS
Most users spend 5–15 minutes exploring exterior colors.
Mobile usage spikes in showrooms—especially among younger buyers.
Tablet was the preferred mode for sales staff during customer walk-throughs.
INTERVIEW INSIGHTS
Most users spend 5–15 minutes exploring exterior colors.
Mobile usage spikes in showrooms—especially among younger buyers.
Tablet was the preferred mode for sales staff during customer walk-throughs.
INTERVIEW INSIGHTS
Most users spend 5–15 minutes exploring exterior colors.
Mobile usage spikes in showrooms—especially among younger buyers.
Tablet was the preferred mode for sales staff during customer walk-throughs.
KEY MOTIVATORS
Clean UI that didn’t interfere with the car’s visuals.
Clearly labeled option categories (Exterior, Interior, Wheels, Summary).
Fast, seamless transitions between selections with loading feedback.
Easy export or “Save and Share” functions for users to revisit builds later.
KEY MOTIVATORS
Clean UI that didn’t interfere with the car’s visuals.
Clearly labeled option categories (Exterior, Interior, Wheels, Summary).
Fast, seamless transitions between selections with loading feedback.
Easy export or “Save and Share” functions for users to revisit builds later.
KEY MOTIVATORS
Clean UI that didn’t interfere with the car’s visuals.
Clearly labeled option categories (Exterior, Interior, Wheels, Summary).
Fast, seamless transitions between selections with loading feedback.
Easy export or “Save and Share” functions for users to revisit builds later.
THE DESIGN
We embraced dark mode UI to elevate the car's presence. Interactive highlights and accent colors changed depending on the user’s selection (e.g., orange glow for McLaren Orange).
Animations were subtle and purposeful. I designed tabbed sections that could adapt to both horizontal and vertical layouts depending on screen size.
The font hierarchy used bold sans-serif type to feel futuristic yet readable. Icons and sliders were customized from scratch, avoiding generic libraries to maintain premium aesthetics.
THE DESIGN
We embraced dark mode UI to elevate the car's presence. Interactive highlights and accent colors changed depending on the user’s selection (e.g., orange glow for McLaren Orange).
Animations were subtle and purposeful. I designed tabbed sections that could adapt to both horizontal and vertical layouts depending on screen size.
The font hierarchy used bold sans-serif type to feel futuristic yet readable. Icons and sliders were customized from scratch, avoiding generic libraries to maintain premium aesthetics.
THE DESIGN
We embraced dark mode UI to elevate the car's presence. Interactive highlights and accent colors changed depending on the user’s selection (e.g., orange glow for McLaren Orange).
Animations were subtle and purposeful. I designed tabbed sections that could adapt to both horizontal and vertical layouts depending on screen size.
The font hierarchy used bold sans-serif type to feel futuristic yet readable. Icons and sliders were customized from scratch, avoiding generic libraries to maintain premium aesthetics.
Every elements made with love
Every elements made with love
THE RESULT & LEARNING
This was a high-stakes design opportunity for a luxury automotive icon—and a huge learning experience in designing for multi-screen environments and 3D-heavy interfaces.
What I Learned:
Consistency across breakpoints is harder than it looks. You have to plan mobile-first, but refine desktop for storytelling impact.
Working alongside 3D artists taught me how to sync design layers with render timings and maintain visual integrity.
Creating interfaces for a luxury brand requires constant restraint—not over-designing, but letting the product shine.
| “Designing the McLaren 750S Spider Configurator was a lesson in high-performance simplicity—every pixel mattered.”— Bhavesh, UI Designer
THE RESULT & LEARNING
This was a high-stakes design opportunity for a luxury automotive icon—and a huge learning experience in designing for multi-screen environments and 3D-heavy interfaces.
What I Learned:
Consistency across breakpoints is harder than it looks. You have to plan mobile-first, but refine desktop for storytelling impact.
Working alongside 3D artists taught me how to sync design layers with render timings and maintain visual integrity.
Creating interfaces for a luxury brand requires constant restraint—not over-designing, but letting the product shine.
| “Designing the McLaren 750S Spider Configurator was a lesson in high-performance simplicity—every pixel mattered.”— Bhavesh, UI Designer
THE RESULT & LEARNING
This was a high-stakes design opportunity for a luxury automotive icon—and a huge learning experience in designing for multi-screen environments and 3D-heavy interfaces.
What I Learned:
Consistency across breakpoints is harder than it looks. You have to plan mobile-first, but refine desktop for storytelling impact.
Working alongside 3D artists taught me how to sync design layers with render timings and maintain visual integrity.
Creating interfaces for a luxury brand requires constant restraint—not over-designing, but letting the product shine.
| “Designing the McLaren 750S Spider Configurator was a lesson in high-performance simplicity—every pixel mattered.”— Bhavesh, UI Designer
