UX/UI Design for Car Configurators
A quick analysis of car manufacturers online configurators and my take on how to improve user experience.
In this post, we will analyse 5 of the most recognisable brands in the automotive space and their online car configurators.
The criteria used to evaluate the configurators are the following:
- Ease of use (usability, simplicity)
- Information displayed
- Responsiveness
Note: if you never used an online car configurator, this is pretty much a web page that allows you to configure your dream car by choosing engine type, colours, tires, interiors etc.
Audi
The image above is taken directly from the Audi configurator itself.
At first glance, it looks more of a slideshow rather than a configurator with a carousel highlighting some details of the car and the main options just below that.
If we want to select our preferences we need to scroll further down the page and for some categories the page gets quite long, leaving the user to keep scrolling up and down to see the changes applied to the vehicle.
One thing that I liked is the side-panel which offers the user a quick recap of the car but without too many details.
I expected this to be a summary of all the options selected, but this was not the case, instead, you have to click on “Your A1 Sportback” to get a recap.
Moreover, the side panel is not sticky, meaning that it doesn’t follow the user while scrolling up and down.
On the mobile side, the configurator seems to be responsive enough to offer quite the same experience as the desktop website with the major downside of having quite long pages.
Overall the Audi configurator doesn’t shine for great user experience, giving the impression that this is another way to “show-off” the car rather than creating an immersive experience and leaving the users disoriented by moving the attention away and into too many options presented in an uncomfortable layout.
Mercedes-Benz
The Mercedes-Benz configurator opens with a beautiful 360 view of the car, rendered in a modern environment.
What pops immediately to the eye is the extremely tall navbar, followed by an even taller sub-navbar that includes model name and final price, something that in my opinion doesn’t deserve so much space and that could be easily moved out the way(maybe at the bottom) as not necessary and unfortunately will follow us while scrolling down the page.
At the bottom of this section, a clear navigation of customisable options will follow you along with the page in case you get lost.
What I really like is the single pager layout that gives you the impression of scrolling through a brochure.
Unfortunately, that tall grey bar will be there to annoy you by eating a considerable amount of space that could be used to display more information.
On mobile devices, the configurator behaves really well, using images to differentiate between different sections and leaving most of the options hidden into an elegant sidebar that can be used when needed without compromising the layout.
The Mercedes-Benz configurator is overall well thought, giving a sense of premium experience without flooding the user with too many options on the screen and with a simple design/layout which is maintained in the mobile version of the configurator.
BMW
The BMW configurator presents itself with a minimal and clean design which I really like, putting the car at the centre of the attention and offering a 360 interactive view without environment, which blends really well with the minimal UI and moving the options into an elegant scrollable side-panel that doesn’t shift the focus away from the subject.
On a negative note, a very chunky navbar is present at the top similar to the Mercedes-Benz configurator that could be easily moved at the bottom removing the footer, which doesn’t provide any useful information for the configuration.
Unfortunately, the mobile side of the configurator is not as good as the desktop counterpart, removing completely the car as the main subject and focusing mainly on a list of options.
Furthermore, a persistent navbar and footer squeeze most of the navigable view into a small portion of the screen.
The BMW configurator is definitely better than the previous, introducing a nearly full-screen view of the car and a side-panel which feels really light and doesn’t obstruct the view from the overall experience.
Although, it fails when it comes to re-creating the same experience on mobile devices, giving the impression that it was done as a last-minute addition and not being mobile-first since the beginning.
Tesla
The absolute winner and indeed my favourite among all of the car configurators tested, Tesla doesn’t disappoint when it comes to their own configurator.
The interface is simply beautiful and clean, giving the user a sense of premium and minimal design which is reflected in their car design as well.
With plenty of room to breathe between the components, the UI has a similar layout to the BMW configurator but with a slightly smaller car preview.
At the top, the navigation menu gets replaced by the configurator navbar which gives the user a better sense of immersion.
On the left, the car preview lacks a 360 view and in my opinion, could have been a bit bigger, while on the right a scrollable sidebar gives you a panoramic of all the options available.
Finally, at the bottom, a recap of the final price and the option to place the order for your new car.
I personally don’t know how many people would place a car order using their credit card on a website, without going to a dealer before and inspect the car in person, but this might definitely change in the future.
My Design
Despite the Tesla configurator being the closest one to what I had in mind when I started designing my own configurator, I decided to use the information gathered during my research to create my personal take on an optimal car configurator.
The following UI is merely a step above the wireframing phase and I do not consider it a finished product, although could be possibly shipped as MVP.
The main focus is on simplicity, ease of use and a clean interface to make the users feel confident at every step.
Decluttering the space from all unuseful information, leaving the subject at the centre of the interface with a clear course of action from the beginning to the end, these are just a few of the principle used.
Here’s a working example with interactive transitions and an interactive mockup made in AdobeXD
https://xd.adobe.com/view/1f6f921c-17ce-447a-79a2-c8dc2187c6bf-695e/?fullscreen
