Designing a richer car configuration experience

If you've ever thought of purchasing a new car then chances are you'll have had a go at configuring a model on the manufacturer's website. In fact online car configurators have become a critically important tool in the sale of new cars, with customers invariably using them as part of their research process before going anywhere near a car showroom.

Following the redesign of their European territories websites, Mazda Europe were looking to replace their existing Flash based car configurator in order to make it more engaging and accessible to the growing number of customers viewing their website on mobile devices.


Using the previous customer research and analytics collected as part of the redesign project of the main web site, we began by looking further in to the data to analyse what customers were seeking from a car configuration tool and how they used them. To support this we also conducted a competitor review to assess what the rest of the market was offering.

Excerpt from competitor review.

Our findings showed that practically all car configurators focused primarily on the visual aspects of configuration and lacked any real ability for a customer to make informed choices over engine choice, trim level and accessories; the details they really wanted to know about when deciding on what was right for their needs and whether is was affordable.

With this in mind, we set ourselves the goal of finding a way to incorporate a richer level of specification detail into the configurator, but without sacrificing the visual experience.

Working through initial concepts in sketch form, the more promising ideas were moved directly into interactive prototypes.

Prototypes exploring scrolling options for car configurator

This allowed us to quickly test and iterate our solutions and check their suitability across different device types. They also provided a more realistic means by which to present and discuss concepts with the wider design and delivery team.

Following a number of refinements our final design concept was delivered as functioning web and mobile prototypes with supporting annotations to Mazda's visual design and build partners.

Web and mobile versions of Mazda's new car configurator.


Originally targeted just for their European markets, Mazda has now begun roll out of its new car configurator across the globe, starting with Australia and the United Kingdom.

Designed on a responsive framework for both web and mobile, the new car configurator offers customers a better way of exploring all the configuration options available; providing clearer and more detailed descriptions of accessory choices, whilst still striking a balance with the more visual experience.

The mobile view also makes use of the unique capabilities of smartphone devices. By using the ability to recognise which orientation it is held in, we were able to overcome the challenges of presenting more information on a smaller screen-size. In portrait mode the customer can browse configuration options and details, and then by turning the device on its side, view the car in a full-screen presentation mode.

Although possibly just coincidental, a number of other car manufacturers have recently begun the roll out of new car configurators following the same pattern as Mazda's. Imitation is the sincerest form of flattery, or so they say!

Why not try the new car configurator out and build your dream Mazda.

Read next:

Creating a five star banking app experience for RBS