Royal Enfield Interceptor 650
Designing the Interceptor 650 Configurator Experience
Royal Enfield Interceptor 650
UI Design Across Devices for an Iconic Automotive Brand
Royal Enfield Interceptor 650
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
2 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
2 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
2 Months
Reimagining how riders connect with their dream Interceptor 650—digitally.
I was brought on as a UI Designer at HMX Media to work on the all-new Royal Enfield Configurator for the Interceptor 650. The goal? Deliver a cinematic, high-performance experience that mirrored the spirit of the bike itself.
From mobile to desktop, my task was to ensure the interface was buttery smooth, visually bold, and intuitive for even the most non-tech-savvy users. The challenge was to make something that felt less like a “product configurator” and more like a digital garage.
Reimagining how riders connect with their dream Interceptor 650—digitally.
I was brought on as a UI Designer at HMX Media to work on the all-new Royal Enfield Configurator for the Interceptor 650. The goal? Deliver a cinematic, high-performance experience that mirrored the spirit of the bike itself.
From mobile to desktop, my task was to ensure the interface was buttery smooth, visually bold, and intuitive for even the most non-tech-savvy users. The challenge was to make something that felt less like a “product configurator” and more like a digital garage.
Reimagining how riders connect with their dream Interceptor 650—digitally.
I was brought on as a UI Designer at HMX Media to work on the all-new Royal Enfield Configurator for the Interceptor 650. The goal? Deliver a cinematic, high-performance experience that mirrored the spirit of the bike itself.
From mobile to desktop, my task was to ensure the interface was buttery smooth, visually bold, and intuitive for even the most non-tech-savvy users. The challenge was to make something that felt less like a “product configurator” and more like a digital garage.
THE WHAT
Royal Enfield wanted to offer a fully immersive online customization tool—one that allowed users to visualize their bike in real-time, explore colorways, accessories, and save or share configurations.
But configurators usually feel clunky. My goal was to streamline the UI so it wouldn’t interrupt the emotional moment of choosing your ride.
THE WHAT
Royal Enfield wanted to offer a fully immersive online customization tool—one that allowed users to visualize their bike in real-time, explore colorways, accessories, and save or share configurations.
But configurators usually feel clunky. My goal was to streamline the UI so it wouldn’t interrupt the emotional moment of choosing your ride.
THE WHAT
Royal Enfield wanted to offer a fully immersive online customization tool—one that allowed users to visualize their bike in real-time, explore colorways, accessories, and save or share configurations.
But configurators usually feel clunky. My goal was to streamline the UI so it wouldn’t interrupt the emotional moment of choosing your ride.
THE HOW (DESIGN THINKING APPROACH)
1. Empathize
We mapped user journeys of both enthusiasts and casual buyers. Most users came from mobile, and many just wanted to “play around” with the bike options—so we had to strike a balance between fun and functionality.
2. Define
We defined core pain points:
Users often got “lost” in endless dropdowns.
Inconsistent interaction feedback.
Visual overload with too many options at once.
3. Ideate
We introduced:
Modular steps (Color → Engine Guard → Exhaust → Accessories).
Sticky preview window.
Clear, consistent call-to-actions.
THE HOW (DESIGN THINKING APPROACH)
1. Empathize
We mapped user journeys of both enthusiasts and casual buyers. Most users came from mobile, and many just wanted to “play around” with the bike options—so we had to strike a balance between fun and functionality.
2. Define
We defined core pain points:
Users often got “lost” in endless dropdowns.
Inconsistent interaction feedback.
Visual overload with too many options at once.
3. Ideate
We introduced:
Modular steps (Color → Engine Guard → Exhaust → Accessories).
Sticky preview window.
Clear, consistent call-to-actions.
THE HOW (DESIGN THINKING APPROACH)
1. Empathize
We mapped user journeys of both enthusiasts and casual buyers. Most users came from mobile, and many just wanted to “play around” with the bike options—so we had to strike a balance between fun and functionality.
2. Define
We defined core pain points:
Users often got “lost” in endless dropdowns.
Inconsistent interaction feedback.
Visual overload with too many options at once.
3. Ideate
We introduced:
Modular steps (Color → Engine Guard → Exhaust → Accessories).
Sticky preview window.
Clear, consistent call-to-actions.
WIREFRAMING & ITERATION
I collaborated closely with 3D and dev teams to design wireframes that aligned with asset constraints but still delivered a premium feel.
Key iterations involved:
Simplifying the tab navigation.
Redesigning toggle states for quick selection.
Creating a responsive layout that didn’t break the immersive experience on mobile.
WIREFRAMING & ITERATION
I collaborated closely with 3D and dev teams to design wireframes that aligned with asset constraints but still delivered a premium feel.
Key iterations involved:
Simplifying the tab navigation.
Redesigning toggle states for quick selection.
Creating a responsive layout that didn’t break the immersive experience on mobile.
WIREFRAMING & ITERATION
I collaborated closely with 3D and dev teams to design wireframes that aligned with asset constraints but still delivered a premium feel.
Key iterations involved:
Simplifying the tab navigation.
Redesigning toggle states for quick selection.
Creating a responsive layout that didn’t break the immersive experience on mobile.
FINAL DESIGN
FINAL DESIGN
The final UI delivered:
Edge-to-edge bike previews
Crisp accessory iconography
Custom 3D view controls
Dark-themed interface to enhance color visibility
I optimized button contrast and legibility for outdoor/mobile use scenarios (which testing revealed to be a real-world user setting).
The final UI delivered:
Edge-to-edge bike previews
Crisp accessory iconography
Custom 3D view controls
Dark-themed interface to enhance color visibility
I optimized button contrast and legibility for outdoor/mobile use scenarios (which testing revealed to be a real-world user setting).
The final UI delivered:
Edge-to-edge bike previews
Crisp accessory iconography
Custom 3D view controls
Dark-themed interface to enhance color visibility
I optimized button contrast and legibility for outdoor/mobile use scenarios (which testing revealed to be a real-world user setting).
USABILITY TESTING
USABILITY TESTING
We ran tests on 10 users across 3 device sizes.
92% completed a full configuration without assistance.
87% said the experience made them want to test ride the Interceptor in real life.
We ran tests on 10 users across 3 device sizes.
92% completed a full configuration without assistance.
87% said the experience made them want to test ride the Interceptor in real life.
We ran tests on 10 users across 3 device sizes.
92% completed a full configuration without assistance.
87% said the experience made them want to test ride the Interceptor in real life.
RESULTS & LEARNINGS
✅ Boosted time-on-page by 33%
✅ 45% of users saved or shared a build
✅ Helped Royal Enfield create a benchmark UX standard for future configurators
What I learned:
Designing configurators isn't just about UI—it’s about emotion, pacing, and flow. You’re not selling a feature, you’re framing a fantasy.
RESULTS & LEARNINGS
✅ Boosted time-on-page by 33%
✅ 45% of users saved or shared a build
✅ Helped Royal Enfield create a benchmark UX standard for future configurators
What I learned:
Designing configurators isn't just about UI—it’s about emotion, pacing, and flow. You’re not selling a feature, you’re framing a fantasy.
RESULTS & LEARNINGS
✅ Boosted time-on-page by 33%
✅ 45% of users saved or shared a build
✅ Helped Royal Enfield create a benchmark UX standard for future configurators
What I learned:
Designing configurators isn't just about UI—it’s about emotion, pacing, and flow. You’re not selling a feature, you’re framing a fantasy.
Every elements made with love
Every elements made with love
