Background

McLaren, a British automaker renowned for its emphasis on creating powerful and high-speed sports cars and supercars, offers a diverse range of vehicles designed for both street and track use. The lineup of supercars features models with a wide array of customization options, which can be explored through an online and in-store car configurator software.

The team

On the team at MediaMonks, I played a role as a UX designer and researcher. My job involved shaping and carrying out the project plan. That meant laying out tasks, setting timelines, marking project milestones, and delivering both research and interaction designs.

Understanding the problem

We worked with McLaren to organize and run an affinity mapping workshop focused on identifying the key goals, limitations, and areas of improvement related to the car configurator. By collaborating with stakeholders from different departments, we gained valuable insights into the specific requirements and potential obstacles facing the project.

UX plan

A UX plan is essential in ensuring that the user experience design process is structured, organized, and informed by user needs and business goals. It outlines the various steps and activities involved in the design process, such as research, testing, and analysis, which helps to create a coherent and effective user experience.

1. Goals and KPIs
2. Competitive benchmark and heuristic evaluation
3. Research objectives
4. Semi-structured interviews
5. Informative user testing
6. Wireframing and documentation

Competitive benchmark

In the evaluation of the McLaren Car configurator and its competitors, a thorough analysis was conducted. Four car competitors (Porsche, Aston Martin, Tesla, BMW), two non-car related configurators (Bentley, Honda Motorbikes, and Nike) were reviewed. This approach not only highlighted strengths and weaknesses in competing designs but also explored solutions from secondary product categories. The evaluation offers a high-level view of the competitive landscape, pointing out areas for potential improvement in the McLaren Car configurator.

Browse the competitive benchmark below, alternatively use the following link: CC Competitive Benchmark

Detailed report: Table of Opportunities

Heuristic evaluation

In our heuristic evaluation of the configurator, we identified significant problems related to navigation, information architecture, guidance, sharing, and accessibility. We employed a severity scale to rank and prioritize these issues, developing mitigation plans for each friction point.

Browse the heuristic evaluation below, alternatively use the following link: CC Heuristic Evaluation

Detailed report with friction points and mitigations: Table of Opportunities

Key research objectives

Clear research objectives are essential in UX research as they guide the research plan and methodology. They also help stakeholders understand the value of UX research in developing user-centered products and services.

• Validate value proposition
• Mobile usability
• Context of use
• User goals vs outcomes
• Brand recognition
• Social sharing

Semi-structured interviews

To validate desk research findings, we conducted dealer interviews and user research with a sample size of 5 participants. Dealer interviews aimed to understand customer actions post-configuration, identify complaints, determine popular customizations, and assess how the configurator aids dealer-customer collaboration. The semi-structured interviews provided insights beyond the key objectives, offering a more comprehensive understanding of the subject matter.

Browse the interview discussion guide at the following link: Dealer discussion guide

User testing

In the final phase of our research, we conducted an unmoderated user testing evaluation of the Car Configurator. The objectives were:

• Evaluate user navigation issues.
• Determine preferences between linear nav. and pick & choose.
• Assess preferences for a guided experience.
• Explore mobile user experience with device rotation.
• Identify the most used configurations.
• Evaluate the availability of help and information.

Sampling ten participants from McLaren’s customer demographic (five on mobile, five on desktop), the user testing uncovered opportunities for usability improvements, insights into enhancing brand perception, and highlighted well-received features of the car configurator.

Browse the user testing script here: User Testing Script

Wireframing

To mitigate privacy issues during authentication on shared devices like MARC, we introduced a handover process to seamlessly transfer configurations between MARC and the web Car Configurator using unique codes. Both software systems were updated to generate, store, and share customizations through these codes.

This approach, adopted by competitors, serves as a streamlined solution to enhance the user journey from private device configuration to in-store devices.

See the wireframes below for a quick overview, alternatively open the Figma file: MARC integration.

Project spinoff – Integration with MARC

In the McLaren showroom, customers could use the MARC, a unique car configurator offering a 3D experience on large HD touch monitors with the option to export short cinematics of configured cars. However, the MARC and the web-based Car Configurator in this project were not integrated, causing friction when customers wanted to seamlessly continue configurations between home and the showroom. This led to manual reentry of customisations by the retailer or customers.

The goal of the spinoff project was to enhance both software systems by enabling the saving and retrieval of configurations initiated from different sources, such as the web-based Car Configurator or the MARC.

Desk research

The initial phase involved mapping out the user journey across both the personal device environment and the showroom setting, introducing a new persona – the salesperson’s role.

Drawing insights from our prior semi-structured interviews conducted for the web Car Configurator, we crafted a comprehensive flow. This encompassed the primary persona, the customer, and the secondary persona, the salesperson, engaging with the MARC system in the McLaren showroom.

See the flow diagram below for a quick overview, alternatively open the Figma file: MARC integration flow.

Wireframing

To mitigate privacy issues during authentication on shared devices like MARC, we introduced a handover process to seamlessly transfer configurations between MARC and the web Car Configurator using unique codes. Both software systems were updated to generate, store, and share customizations through these codes.

This approach, adopted by competitors, serves as a streamlined solution to enhance the user journey from private device configuration to in-store devices.

See the wireframes below for a quick overview, alternatively open the Figma file: MARC integration.

Results & takeaways

Following the McLaren car configurator redesign, analytics and user feedback have indicated high satisfaction in terms of usability and brand identity perception. The introduction of code handover between MARC and the web Car Configurator has enhanced the purchase flow, offering a seamless experience between customer and retailer within both software.

Currently, we are actively monitoring the Car Configurator using Hotjar feedback-form integration, regularly evaluating user perspectives for potential improvements.