Car Configurator
Mazda
Overview
The Mazda Car Configurator allows customers to customise their chosen Mazda vehicle to receive a drive-away price. It’s a key tool in the car-buying journey, helping potential buyers explore models, features, and pricing in a structured way.
The Mazda Car Configurator allows customers to customise their chosen Mazda vehicle to receive a drive-away price. It’s a key tool in the car-buying journey, helping potential buyers explore models, features, and pricing in a structured way.
Background
The original configurator had evolved over time within a desktop-first framework. However, analytics told a different story—mobile usage had overtaken all other device types, with touch-based devices (mobile and tablet) accounting for over 67% of site traffic.
The original configurator had evolved over time within a desktop-first framework. However, analytics told a different story—mobile usage had overtaken all other device types, with touch-based devices (mobile and tablet) accounting for over 67% of site traffic.
Opportunity
This presented a clear solution: the mobile experience needed to be reimagined not just optimised — to meet both user expectations and business objectives.
This presented a clear solution: the mobile experience needed to be reimagined not just optimised — to meet both user expectations and business objectives.
Configurator Overview
Previous user testing revealed several key issues with the existing tool. There wasn’t enough information to help users understand the significance of grades and their different specifications, which created confusion. Participants also struggled to navigate the tab selection, and inconsistent touchable areas made the experience feel unreliable and harder to use.
Desktop Analysis
Comparison
Difficult for customers to understand and compare different vehicle specs.
Tabs
Users failed to recognise the tabs as an interactive feature.
Base Features
Customers couldn’t identify base features per grade.
Scroll Bar
Users often missed the side scroll bar.
Mobile Analysis
Comparison
Customers struggled to compare different vehicle specs.
Customers struggled to compare different vehicle specs.
Tabs
Users failed to identify the tabs as an interactive element.
Users failed to identify the tabs as an interactive element.
Base Features
Customers couldn’t identify base features per grade.
Customers couldn’t identify base features per grade.
Hierarchy
The hero image shifted position and no 360° view was available.
The hero image shifted position and no 360° view was available.
Clickable Areas
Interactive elements moved around as the user progressed.
Interactive elements moved around as the user progressed.
Typography
The tool had inconsistent typography (H1, H2, etc.) and navigation patterns.
The tool had inconsistent typography (H1, H2, etc.) and navigation patterns.
Prototype Usability Testing
Based on assumptions and insights from previous user tests, I built an interactive prototype in Axure to validate the proposed flow. An internal review was conducted with developers and managers to ensure technical feasibility and alignment. Once refined, I presented the prototype to stakeholders to gather feedback and secure approval before moving into prospect interviews.
Insights From Testing
The UX Research team conducted 1:1 usability testing sessions with participants who were actively in the market and planning to purchase within the next three months, ensuring the feedback was both relevant and timely. Testing focused on two key nameplates — the BT-50 (Ute) and the CX-5 (SUV) — as they represented different buyer mindsets and use cases.
The study tracked task success rates through a usability tracker, providing clear data on how easily customers could complete key actions such as configuring a vehicle or comparing specifications. In addition, the System Usability Scale (SUS) was used to measure overall user satisfaction, establishing a benchmark for future iterations.
This combined approach — measuring both efficiency and satisfaction — not only identified usability issues but also validated whether the design changes improved the customer experience. The insights gained formed the foundation for ongoing enhancements across the Mazda Car Configurator.
“This
is so simple”
— Research ParticipantCore Design Principles
① Be Transparent
Clearly show prices, inclusions, and exclusions.
Clearly show prices, inclusions, and exclusions.
② Explain the Benefits
Help users understand why a feature matters.
Help users understand why a feature matters.
③ Stretch Thoughtfully
Highlight premium options at the right moments.
Highlight premium options at the right moments.
④ Confident Decisions
Simplify comparison and choice.
Simplify comparison and choice.
⑤ Design for Touch
Keep controls within thumb reach and patterns consistent.
Keep controls within thumb reach and patterns consistent.
Key Design Updates
Interactive Areas
Introduced clear and consistent selection zones, ensuring customers always knew where to interact.
Introduced clear and consistent selection zones, ensuring customers always knew where to interact.
UI Patterns
Scrollable cards made it easier for customers to compare prices and base features across grades.
Scrollable cards made it easier for customers to compare prices and base features across grades.
Accessibility
Introduced clear interactive elements, with adjusted sizing for accessibility and improved colour contrast to enhance readability.
Introduced clear interactive elements, with adjusted sizing for accessibility and improved colour contrast to enhance readability.
Decision Making
Extra steps in the flow reduced cognitive load and improved decision-making.
Hierarchy
Established a clear hierarchy, leading with the vehicle, supported by consistent typography and positioning.
Guide the User
Added subheadings, contextual information, Next: ‘Action’ label to the button to set expectations.
Cards enhanced usability and provided the content needed for informed decision-making.
Transmission and engine selections were moved into separate steps, making the information easier to digest and the process more user-friendly.
A 360° vehicle view was introduced, giving customers a more immersive experience. The tabs were also enlarged for accessibility.
Before & After
Usability issues were resolved, helping users make
more conscious and informed decisions. Here are some exmples:The grade selection process was overly complex. Customers couldn’t easily compare or change options, typography was inconsistent, and no contextual help was provided. As a result, the page felt cluttered, with elements floating without structure.
The hierarchy of elements was redesigned to provide structure and consistency. The vehicle image always remained in a fixed position, while the interactive area was placed beneath it within thumb reach. I created intuitive cards that allowed for easy interaction and comparison. To further support customers, contextual help and additional information were added where needed.
The colour picker was a clear example of poor hierarchy and inconsistency. Elements moved around the page, typography was misused—the colour name was even styled as an H1—and the vehicle image was pushed down. In addition, the Exterior and Interior tabs were often overlooked by users.
The new colour picker was redesigned to be more elegant and follow the correct hierarchy. Button sizes were increased for easier selection, improving usability on small devices. Instead of hiding Exterior and Interior options, they were split into two clear steps—creating a more engaging experience.
The desktop view wasn’t as cluttered as mobile, but it lacked contextual information. It also attempted to do too much on a single page—asking customers to select grade, transmission, and engine all at once.
The new design helped customers make more informed decisions by clearly presenting the differences between grades. Breaking the process into separate steps also improved clarity, helping users better understand their selections.
End-To-End Flow
Mobile
The redesigned experience guides customers step by step — starting with base feature comparison, followed by transmission and engine choices, and finishing with accessories. Each step was intentionally structured to reduce cognitive load, maintain clarity, and keep the process engaging. This flow reflects the balance between business requirements, customer needs, and technical feasibility.
To streamline navigation and keep the tool intuitive, all selections were centralised in the sidebar, reducing friction for users. The tool was also designed to be fully responsive, adapting seamlessly to desktop, tablet, and mobile devices, ensuring accessibility across different user contexts.
Visual Design
This project was highly visual and largely created from scratch. New patterns were implemented to , while existing elements were enhanced to improve usability, accessibility, and visual alignment—ensuring the tool remained cohesive.
Design Delivery
The final design brought together simplicity, consistency, and visual impact, ensuring a seamless experience across all Mazda models. Working closely with engineers, I refined the prototypes into feasible solutions without compromising usability or design quality. Regular check-ins with stakeholders ensured alignment on both business goals and customer needs, helping us balance compliance requirements, technical constraints, and user expectations. By the time of delivery, the design system had been extended with new components, and the tool was fully responsive, intuitive, and ready for scale.
Results
The redesign successfully aligned customer needs with business goals, transforming the configurator into a key driver of engagement and lead generation.
leads
Users who submitted their build directly to dealershi
most visited tool
The most-used feature on the Mazda Australia website
completion rate
A 12% improvement over the previous build tool
Learnings & Iterations
Complex configurations
Designing a single configurator to support all twelve Mazda models was challenging, as each came with different configurations and edge cases.
Designing a single configurator to support all twelve Mazda models was challenging, as each came with different configurations and edge cases.
Different buyer mindsets
UTE buyers had a different mindset from other car buyers, which added complexity to the experience. Although we proposed changing the data structure to support these differences, the approach was not adopted.
UTE buyers had a different mindset from other car buyers, which added complexity to the experience. Although we proposed changing the data structure to support these differences, the approach was not adopted.
Technical and visual constraints
We had to update background colours because the 360° images came with a white backdrop, and the interior 360° full-screen view didn’t work as planned, so we adapted the design.
We had to update background colours because the 360° images came with a white backdrop, and the interior 360° full-screen view didn’t work as planned, so we adapted the design.
Continuous improvements
Since launch, we added two extra steps—Wheels and Accessories—to enhance the experience. At the same time, we removed the 360° view from the Wheels step due to high retouching costs.
Since launch, we added two extra steps—Wheels and Accessories—to enhance the experience. At the same time, we removed the 360° view from the Wheels step due to high retouching costs.
My Role
- Lead Visual Designer driving the visual and overall experience.
- Created wireframes and interactive prototypes to validate concepts.
- Collaborated closely with the research and testing team to gather insights.
- Presented designs to stakeholders for feedback and alignment.
- Leveraged existing design system components and contributed new patterns to extend the system.
- Partnered with engineers to ensure smooth delivery.
●