Competitive analysis
To fully understand how the interactions worked, I had analyzed interactions from competitor automotive platforms like LandRover, Volkswagen, and Ford.
First iteration of the Vehicle Configurator
© 2022 Melanie Wong
FCA Interactive Vehicle Configurator
Redesigning an interactive vehicle configurator
Lead UI Designer
Role
Web
Platform
Year
2018 - 2019
Publicis Sapient + FCA
Team
Our Product Design team was tasked with creating an enhanced mobile-first vehicle configuration component as a part of the Ram 1500 DT vehicle launch in 2018 on the Ram Trucks USA website. The vehicle configurator component is a tool that would encompass all the critical elements and items that are important to highlight for the new vehicle.
Background
I was the lead Visual Designer and worked closely with a UX designer as well as two Ram brand designers to bring this tool to life.
My Role
Design Requirements
Implement new interactions
Users are able to view and play around with the 360 Exterior and Panoramic Interior view as well as learn about the differences between each trim. It is an interactive way to engage users into learning more about the vehicle.
Reduce the complexity
There was too much complexity and an overwhelming amount of options and combinations (trims, bed/cab size, drive).
After analyzing several automotive brands, we gathered requirements and started to run the ideation process. Working closely with the UX Designer, we wanted to provide a consistent user experience across all devices and brands.
Our team gathered the challenges we would face before starting to solution the designs. We determined what we wanted to avoid and what we wanted to highlight in the design experience.
Sketching & Wireframing
After multiple phases of sketching and wire framing, our team created iterations using existing components that have been used across the websites.
We designed mocks to show Developers, QA, and clients the various possibilities of the component that each sub-brand would be able to use.
Process
Second iteration of the Vehicle Configurator
Going back to the drawing board, our team looked at new ways in designing the vehicle configurator within the viewport while maintaining the same experience as it was on the website.
Exterior Tab with a 360 exterior view of the RAM 1500
Interior Tab with a panoramic view of inside the RAM 1500
Highlights Tab with a carousel of highlighted features for the RAM 1500
We were challenged to create a new design to shift the existing content and functionality such as the selecting a trim into the new design. The challenge was to create a new design that would shift the way the existing content and functionality was displayed, in order to make model selection easier.
Since our team was tasked to redesign a vehicle configuration component, we referenced the first iteration that was created on the website. We then broke down the main objectives and began to start designing with few key ideas. We were also tasked to ensure that users were able to view and interact with all of the content within each viewport (mobile, tablet, and desktop).
The Challenge
Redesign the existing component for all brands
Create a new design to shift the existing content and functionality. The vehicle configurator would encompass all the critical elements/items that are important to highlight for the new vehicle. This component would then be used across all the FCA sub-brands.
Users should discover and learn
Consider making the users discover and learn about the vehicles. Provide high level information to get users attention and letting them explore.
Mobile-first experience
Create a mobile-first experience to help users discover more information about the vehicle they are interested in through their phone before they purchase.
Goals
The vehicle configurator is a highly interactive tool on the vehicle landing page, with analytics showing hundreds of thousands of monthly users engaging with that section. Given its importance, the tool was designed to be intuitive and also to allow users to discover the vehicle catalog.
It shows them options that they care for the most in the earlier stages of the purchasing funnel (colours, wheels, and trim options). Users are able to view and play around with the 360 Exterior and Panoramic Interior to learn the differences between each trim.
We designed high fidelity mocks and prototypes to display the interactions to the clients and developers. Below are the final designs of the component, after several reviews with developers and QA verifying that the website functions the way we had designed it.
The Outcome
Three things we wanted to fix
1. Interruption of natural experience funnel
2. Current experience stops the user to explore and understand the vehicle and brand
3. Trims for each vehicle were misleading. We wanted to answer the question: “Is the content on the vehicle landing page for one trim only?"
Visible within the screen size
Ensure that users were able to view and interact with all of the content within the viewport for Desktop, Tablet, and Mobile.
Client Feedback
We received feedback after meeting with the client with our first version of the comps:
The sections should continue in the category even when you are switching the trims.
Experience needs to be continuous
Wanted a completely new layout without using existing components used in our design platform.
A new component
With the feedback
1. Give the users the chance to explore the new model and understand its features
2. Focus on generic vehicle features and highlights
3. Let the user fall in love with the model and features before going into details about configurations and trims
4. Sacrifice content and functionality to reduce confusion and frustration
5. Strong focus on a visual experience, showcasing best-of-all-trims highlights
The vehicle configurator was moved to the bottom of the page to act as a teaser into the Build & Price application and gives users clear next steps. It was initially designed for Ram Trucks because this brand has the most complex and the largest data set. Building the experience around Ram allowed us to design something that's flexible enough to support the other FCA USA brand sites – Jeep, Alfa Romeo, Fiat, Dodge, and Chrysler.
