3D Product Configurator Design

Exploring the design, value and landscape of 3D Product Configurators.

Porsche 3D Configurator Part 2 – User Experience



To read the first part of the Porsche 3D Configurator review, click the link below.

Porsche 3D Configurator Part 1 – Visualisation

User Experience

Visually, the Interface is laid out clearly and intuitively.  There are 3 main sections, the visualisation top-left, the price top-right and the customisation options below.  As the eye travels from left to right, top to bottom, this layout flows well.  The graphic design is very clean and white without too many intrusive colours, shapes and borders to distract the eye.


The customisation options are in a wizard style, so you can focus on one area at a time.  The tabs for each of these steps are very clear, and it’s obvious which section you are customising.  There are option buttons within the product visualisation window, and they are easy to see, nicely grouped around the screen in a non-intrusive way and the icons make it obvious as to what they do.

In the ‘details’ section, there are buttons to ‘Open’, ‘Save’, ‘Print’, ‘Play Engine’ and ‘Download Wallpaper’.  These are very clear, with rollover text to explain what they are.

Overall, with a quick scan of the eye, it’s simple to get started and have access to the full scope of the application.

The Visualisation Window

It’s clear that there is a 2D and 3D mode and easy to switch between the two. The 2D view only has a few options available within the exterior and interior camera angles.  You can switch to a full screen mode (which is just a larger image), and it’s all very obvious how to select these buttons.


The 3D mode, gives you some additional options, and as mentioned earlier, these are buttons that are very simple to find, use and understand.  Using the mouse, you can rotate and zoom-in to explore all the angles of the car, but you cannot pan the camera left and right or up and down.  This would be useful because currently you can’t zoom-in on a particular area and study it because some car parts go off the screen.


There is ‘play’ button and this runs through a predefined set of animated camera angles to allow you to sit back and view your selections.  This is not a bad idea for showcasing and discussing your customisation to others.  If you want to use it to have a closer look at certain parts like the wheels for example, unfortunately you are not able to pause, rewind or fast forward to certain parts of the animation.  You have to play it and wait for that camera angle to come around again.

There is an option to go full screen in 3D, and when you do, you get a much clearer view of the vehicle to explore.  This is useful in the showcase mode, and nice to check customisation, but you lose the menus.  It would be nice if you could be at full screen, and have menu options pop in and out like the bike configurator reviewed ealier.


The beauty of 3D visualisation is the ability to go beyond the physical limitations of the world.  For the auto industry, it is quite conventional to show ‘exterior’ and ‘interior’ camera angles.  The general issue with interior views is the limited visual range you get from the camera because of the confined space.  With the interactive 3D view, there is no reason why you can’t have an option to hide car panels to reveal the interior, thus allowing exploration in full from slightly further away.  This is the sort of innovation that makes 3D configurators a real value-add.

Customisation Window

The bottom section of the screen is where all the personalisation happens.  This has a tabbed layout which clearly steps you from left to right through each of the customisation stages.  Although this is just one way to layout and group all the options, I think it is a very good choice because we read from left to right, and it guides us in a simple and logical sequence.  At the far left, you start with the ‘Car Model‘ selection page, and at the far right you end with the ‘Next Step‘.  In between, it’s quite simply grouped in a logical order of ‘Exterior‘, ‘Interior‘, ‘Options‘ and ‘Summary‘.


The ‘Exterior’ and ‘Interior’ sections allow you to select your car colour, wheel type and car seat options in an extremely simple and clear way.  The 2D/3D view visually updates as you make your selection.  The ‘Options’ section is a list of all the optional extras.  At first, I thought this list wasn’t very extensive, but later I discovered that there is a further list of categories to the right.  Each category has it’s own specific set of optional extras, so in total, there is actually quite a large set of possible add-ons.  If the categories were to the left, and not in small grey text, that may have been clearer.


For each category in the ‘Options’ section, you are presented with a list of items with a check box to the left and an ‘info’ icon to the right.  There is a broad range of additional extras and the ones that affect the shape of the car, update the 2D/3D view on selection.  As the 2D/3D view is updating, the visualisation window goes grey while you wait, and then the change is applied.  Some of the changes are quite subtle so it’s not often clear that the change has happened, or easy to compare with and without, but regardless, you can view the update in the visualisation window.

Options3 Options2

If you click on an ‘info’ icon, for most items there is an image and a description to go with it.  To selectively go through and discover or visualise each option, can be a bit time consuming, but let’s be honest, I’m sure most people are happy to take their time building their dream Porsche.  The aim for the future would be to allow you to click an option, and see it immediately change in the viewport so you can add and remove parts in a fluid, enjoyable motion.  It’s worth noting however, that although this is an ideal, it’s a very costly avenue to go down, because each add-on is quite bespoke, and the cost-effectiveness of building a configurator that caters for so many options, lies within finding ways to re-use interface elements.  This is why all the car models have similar ‘Exterior’ and ‘Interior’ options, and the ‘Options’ section is based around a list with a link to additional information.

It is impossible to create a sophisticated solution where every part is simplistic.  You have to prioritise where simplicity is needed, and this is enabled by complexity being built elsewhere.  For more information about this, read Edward de Bono’s, Simplicity.  Due to the diversity of optional extras, technology limitations and budget considerations, the ‘Options’ section is simpler for Porsche to develop and maintain, but a bit more complex for the customer to use in a fluid fashion.


The ‘Summary’ tab is an essential part of the configurator to check your selections, and the associated costs.  Without it, it would be quite cumbersome to walk through all the options and make sure you have selected everything you want.  It’s also a good way to break down the price.  It’s questionable where this summary should live, but in this wizard style tab layout, it doesn’t feel out of place where it is.

Price Section

The top right section shows the summary of the cost, and it get’s updated on the fly as you customise away.  There are also links to more information such as standard features and technical specifications.  There isn’t much to talk about here in terms of user experience, apart from the fact that the information is useful, but because screen real-estate is valuable, does it need this much space?


Overall, a large portion of the screen real-estate is taken up with menus and customisation options.  Due to the technology limitations of this configurator, having menus slide in and out may not have been easily achievable.  If the goal is more about configuring rather than studying the 3D view, then this is a fair enough option.  Usually you don’t want menus getting in your way, but if the menus are the primary focus, then they should take priority.

Porsche 3D Configurator Part 3 – Innovation


2 thoughts on “Porsche 3D Configurator Part 2 – User Experience

  1. Pingback: Porsche 3D Configurator Part 1 – Visualisation | 3D Product Configurator Design

  2. Pingback: Porsche 3D Configurator Part 3 – Innovation | 3D Product Configurator Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s