Treehouselogic's Blog

As highlighted in a recent Mashable article, “7 ways to customize your own real life online” and a TechCrunch article “Advice from founders who bootstrapped their way to success,” which specifically highlights the success of online t-shirt customizer, Threadless, many companies are innovating the ecommerce market by offering an online customization experience.  The design-your-own, mass customization approach instantly personalizes and improves the online shopping experience.  Most importantly, online customizers increase sales and differentiate from conventional catalog shopping experiences.

From Mashable:  “Today, scrappy startups and even major retailers are utilizing the web to create totally unique products in all sorts of categories — and you don’t even have to buy in bulk like the old days. If these trends continue, it won’t be long before custom is much hipper than “brand name.””

Thinking about adding a product configurator to your site?  Here’s our primer on how to design a product configurator.

1)   Only show the user valuable options

The first step in creating an effective product configurator is scripting the customer dialog.  The script should reflect the human language that your product expert would use with a customer.  Avoid technical product terms, and provide plenty of ways to self-discover product content like tool-tips and hover-previews.

Users should only see options that fit with their previous choices.  If a user picks a muted, plaid fabric, you don’t want to bother showing them the neon pink trim color.

Moreover if your product expert has a favorite trim color that works perfectly with the muted, plaid fabric, this favorite trim should be positioned prominently
and given a visual treatment to recommend it to users.  If providing a reductive filter for allowing the user to narrow the available choices, disable any filter options that don’t have any choices.

For example, for a build-a-bag customizer like this one seen at Rickshaw Bagworks, a fabric may only have a few recommended binding color matches.  Be sure to guide your customers with assigned defaults and options.   Remove less-desirable options to keep the experience clutter free.

2) Go with the flow

The user should be able to move freely throughout the experience.   Don’t constrain the user unnecessarily by forcing them to answer questions in a certain order or making them go through all steps before being able to add a product to the cart.    The user should be able to change any answer at any time.   Also, consider providing a navigable progress bar so they are always aware of their progress.  

3) Minimize photo assets

Minimize photo assets with composite Images.  Rather than making thousands of static photos to account for every product combination, generate dynamic composite images.  Use 3^rd party color draping/image mapping tools or simple javascript overlays, you can reduce the number of static photo assets and corresponding management issues.  Keep a sharp eye on quality issues.  If image registration is slightly off on overlays, the resulting image may suffer from artifacts.

Video is also important to the self-education process.  Allow users to discovery short but informative video tips throughout the configuration flow.  But, do not auto-play video or force users to watch video.  Video should be optional but accessible.

4) Modularize Content

Try to chunk your content into logical components that can be added into a configurator on demand.  For example, if a user is configuring an evening gown and selects a dress with a low-cut neckline, she should then be offered a choice of long necklaces to accessorize.  If a user picked a high-necked dress, these necklaces would not be appropriate.  By chunking long-necklaces together into a single component, the group of necklaces can be easily shown or not, as appropriate.  Modularizing and including content on demand keeps the client application fast and also allows for easy re-use of modularized content in other configurators.

5) Separate styling from programming
Programming should be done by the programmers and styling by the designers.  If you use web standards, like css and javascript, the styling and programming can be happening in parallel for faster development.  Maintenance is also easier because
style changes don’t require programming changes.

Related, separate model data and the core engine.  The configurator model should be decoupled from the code engine.  Using this approach, the configurator model can easily be changed at any time and re-introduced to the engine.   Separation of model and engine also means you can use the same engine code to run all your different configurators.

Adding a configurator to your ecommerce site has become an increasingly important business requirement because it offers a level of personalization and mass-customization that Internet shoppers demand.    In addition to being well designed, the product configurator needs to seamlessly integrate into your ecommerce platform so that sales generated by the configurator easily pass SKUs to the cart.   As you spec out a configurator project, keep the above recommendations in mind to build out a powerful, easy to use product configurator that will drives more sales.

Filed under: Uncategorized Tagged: | product configurator customizer design build integrate