Well-performing product configurators are a great source of revenue for B2C and B2B eCommerce, but designing such configurators isn’t an easy process. We explored the world’s top eCommerce configurators in search of best practices and examples.

 

ECommerce Trends Study for 2019. Download now >

 

Configurable products are challenging due to their complexity and multiple decision processes. The user often gets confused and resigns from the purchase. We noticed that the longer the buyer’s journey is, the more often the user gets annoyed, confused or even angry, which affects your sales, but also your brands’ long-term image. That’s why in our research we focused on eCommerce configurator ideas that present an excellent UX, clear buyer’s journey, engage users, and guide them to finalize the purchase in a positive atmosphere.

Configurators – best practices & examples

Clear module logic

When presenting complex ideas, simplicity is all that matters. This is no different in configurable products. One of the best performing solutions is module logic based on tiles, which provide neat organization of all the pieces of information.

Tiles are extremely flexible. Icons and short, suggestive descriptions will guide the user through all the offered options. Faded colors can easily suggest to the user which of them are deactivated. Tiles also give the possibility to load a configuration file.

Hager’s eCommerce Configurator

Example: Hager’s configurator allows engineers to create a new project or upload an existing project to order wiring accessories precisely adjusted to their needs. http://hager-konfigurator.pl/

Clear products section

Some configurators use product listing pages as the first step in the buyers’ journey. They should always be clear and concise. Make it easy to skim by giving the user only the most important information about the product, like product name, picture, basic price and links to detailed information.

Links should be visible, but not too distracting. You can use short, intuitive descriptions or basic icons to suggest what’s under the link. Vivid colors will make links more visible and encourage the user to click.

Another great way to build interaction is a product picture that changes or rotates slowly.

Volkswagen's eCommerce Configurator

Example: The Volkswagen product listing is very simple, yet allows users to compare basic product information and encourages the user to explore and customize their future vehicle. www.vw.com

Sorting and filtering

Simple functionalities are often the most powerful ones. This is true in the case of sorting, filtering, and searching features that are frequently used by customers. You can enrich them with basic configuration options to adjust the product to users’ preferences, even as early as the product selection phase.

The North Face's eCommerce Configurator

Example: North Face enriched product listing with a configuration tool so the user can filter the product type, adjust color or size in various products and then pick his favorite. www.thenorthface.co.uk

Clear and catchy product presentation

Your product is unique, so make it look as such. When the user picks the product he’s interested in, let him focus only on that. Product presentation should be clear and intuitive. Big and appealing photos will help you to present your products’ details and the high quality of production. Avoid any distractions, like patterned backgrounds or other product information.

Apple's eCommerce Configurator

Example: Apple always presents their products in a beautiful way: big, high-quality photos and a short description with a clear Call To Action. www.apple.com

Steps of the configuration process

Having steps in the configurator will help your customer to stay on track and control the state of the current position. Also, if it’s working properly, it navigates to the previous/next stages of the online solution.

Volkswagen's eCommerce Configurator

Example: Volkswagen divided each car customization process into five, clear steps, that focus on different features of the car. The whole process can be saved and finished later. www.vw.com

 

Storefront Cloud mobile-first eCommerce platform for your eCommerce >

Visualize the configuration process

Another way to show the steps of the configurations process is to visualize it. This way you will also give the user a sense of participation in the configuration process and engage him more.

Veloce's eCommerce Configurator

Example: Italia Veloce engages the user with strong visual interaction and sense of construction in the bike configurator. www.italiaveloce.it

One-Page-Configurator

Instead of designing customization processes as separate steps (pages) you can build it as one, continuous flow in a one-page-configurator. Clear flow and “anchors” (interaction integrated with the system) will guide the user through the next configuration steps on the same page. This idea works great on desktop but might be risky on mobile devices as the pages can be very long and not-so-convenient.

Stockli's eCommerce Configurator

Example: At Stockli, a customer can easily adjust skis to his height, weight and skiing style. www.scale4you.ch

Modular Configurator

Another idea is a modular configurator, in which all configuration options are built as modules on the same page. Modules can work as dropdowns where the user can select the desired features and see them on the preview.

VOX's eCommerce product configurator

Example: VOX came up with clear page sections – on the right the user can adjust his preferences and preview them instantly in the middle. The section with options dedicated to saving/zooming is smaller but easily approachable. www.vox.pl

Save for later

Whatever the configurator type, remember that some configurable products require multiple decisions for which your user might need some extra time. Allow them to save data from the configurator and to finish the purchase later.

Volkswagen's eCommerce product configurator

Example: www.vw.com

Microservices architecture for your eCommerce. Check all possibilities >