Once you have your viewer component ready (see Cylindo Curator for a self-service tool to do so), there is one more step to creating an ideal customer experience for your PDP: the product configurator. In this article you will find how to design a product configurator panel to go alongside your viewer.
Layout and position
A product configurator should always be combined with an image displaying the selected variation. Most e-commerce platforms achieve this by default by placing the product viewer and the product configurator panel side-by-side. As it is the most common format, this article will use the side-by-side pattern as an example.
The configurator panel should also not take up more than half of the horizontal screen real estate as one of the most important aspects of a well-performing product page is having large product imagery.
source: interiordefine.com
Features and Options
Designing a product configurator for a simple product with a maximum of 1 to 2 feature types with 3 to 5 options for each is a relatively easy task. We can show all features and options in one place without hiding important information.
But when dealing with more complex products with many feature types and options, the task of designing a good experience becomes a lot harder. By introducing more complexity we make it harder for a visitor to make a purchase decision. Two concepts often linked to this problem are “choice paralysis” and “buyer’s remorse”.
CHOICE PARALYSIS
Choice paralysis is defined as the effect of having too many options – making decisions slower and more difficult with the worst cases leading to abandoned sales.
BUYER'S REMORSE
Buyer’s remorse revolves around the fear of having made the wrong choice due to the amount of options on offer.
As an example, imagine having a sofa with 4 components and various options for each:
- Back material and color
- 20 options
- Seating material and color
- 20 options
- Armrest material and color
- 10 options
- Legs material and color
- 10 options
With all features and options, the sofa has a total of 40,000 different variations, all available for the customer to evaluate and purchase. With that many product variations to choose from and the difficulties associated with such a decision, there are two main questions that must be answered:
- How do you make it easy for your customers to select the right options to avoid choice paralysis and reduce the risk of cart abandonment?
- How do you ensure customers feel confident about their choices to avoid buyer’s remorse and reduce the risk of returns?
There are a few solutions recommended to reduce the friction and cognitive load that a customer faces when making a purchasing decision.
Predefined configurations
Highlight predefined configurations that can serve as a starting point for further customization. This could be implemented as a part of the product configurator panel or in the cross sell section. Another solution could be treating different configurations as separate SKUs.
Decision funnels
Think of decision funnels as a way to guide a user to make the right decision by asking question that make it easier discard the wrong decisions. It’s the same tactic used in many retail stores. For instance instead of asking what color the customer is interested in, they ask about other properties such as materials, size or shape to narrow down the further selection. By asking the customer about other requirements you can narrow down the final selection drastically. How a funnel is designed will vary across different customer segments, but implemented correctly can mean a big difference in conversion.
Show less
Similar to the predefined configurations, it can be beneficial to limit the initial number of options while still allowing the visitor to browse the full catalog. Two common strategies are to either limit the visible part of a scrolling list of options so you only see the top portion of the list, or to simply hide the rest of the options behind a toggle, e.g. “show all options”. For both strategies it’s important that the initial options are optimized for conversion, e.g. a selection of the most popular colors or fabrics.
Hierarchy and separation
By implementing a clear visual separation of your feature types you reduce the visual clutter, and as a result reduce cognitive load. Make use of tabs or a boxed layout to signify the separation. Numbered steps can be added as an additional affordance, to help guide customers.
Visual options
A common tactic is to have a swatch containing a visual representation, big enough for the customer to make out if an option is relevant or not. Implementing visual swatches will make it easy for visitors to quickly scan through all the options without having to click and apply each one.
Dealing with highly configurable products is a hard task especially when having to design an interface that makes finding the right product configuration a relatively easy task. However, when done correctly, you end up with a great customer experience while minimizing the negative effects of imposing too many purchasing options upon your customers.