While there are many use cases for Epicor CPQ configurators, generally they fall into 2 categories:
- Internal - The primary users of the configurator work for your company, and use it as a sales / engineering tool.
- External - The primary users of the configurator are your customers, distributors, or partners.
Why worry about this?
This guide focuses on a subset of the external use-case, one in which your customers are directly using the configurator, typically on a public website.
When customers are the primary user, usability becomes not just a nice-to-have, but an absolute necessity. If your configurator is confusing to use, you will lose leads, frustrate users, and lower your hit rates. A well-designed and usable configurator will do the exact opposite: engage your users, increase your leads, and hit rates will go through the roof.
Best Practices
While this topic could easily fill a novel, we've tried to boil it down to a simple list of underlying truths, and give examples on the way.
1 - Use language your customers will understand
We have seen countless examples of this mistake. Configurators are typically built by engineering or IT teams that are so used to their own product lingo, package names, and part numbers, that it's easy for them to forget that this terminology probably means nothing to the average customer. Every time you use a phrase unfamiliar to a customer, you are requiring more mental work on their part. And the problem is compounded with configurators, because there could many such phrases presented just for one single option.
For example, imagine we work for a construction equipment manufacturer, and we're building an excavator configurator. The first field in our configurator is leading the user to pick one of our 3 primary packages - DPC 1, DPC 2, or CPC 3. So naturally, the configurator admin (who is an engineer), adds a select box field to the configurator that ends up looking like this:
While this language might make perfect sense to the engineer building the configurator, stop and think: does the customer know what these package names mean? If not, you're already starting to lose them. Now they have to use mental cycles to go digest what is in each one of these packages before they can make this decision. Even worse, we're not telling them what is in the packages in our configurator, so now they have to go search for this information elsewhere. Your first thought as to how to improve this design would be to add descriptions for what is inside the packages, ending up with something like this:
Now we are at least giving the user information about what are in the packages. However, have we actually helped the problem? We've taken a few unexplained package names, and described them with further phrases that might be hard for the user to understand. Also, look at the 3rd option in the list, CPC-3, which doesn't appear to be a package at all. It's actually a selection that means "I don't want a package, I want to pick and choose these features". Very confusing that this has what appears to be a part number as if it were an actual package. A closer look at the options also reveals that the only difference between DCP-1 and DCP-2 is that one has an open cab and the other enclosed. Everything else is the same.
Improving from here is where things get more difficult. We really have to put ourselves in the head of the customer, and perhaps question why we are offering packages when there aren't very many options to begin with in this configurator. What if instead of offering these confusing packages, we just let the user pick what individual options they want? Then we can figure out with snap rules which package they fall under.
So now we start out by just asking the user whether they want an open or closed cab:
That's more like it. Now our selection is very easy to understand, and because the user won't be wasting any brain cycles, they'll be more engaged with a positive experience.
We have added imagery (more on this later), and a small snippet for each option about why they would choose it over the other.
2 - Use Consistent Imagery
An image speaks a thousand words, so they say. In the example above, we almost don't even need any text to understand what the options are. This should tell you how important images can be to getting something across in a simple and direct manner.
With that said, we all too often see configurators with inconsistent imagery. This can cause disorientation and confusion in the user, destroying the whole reason you are using images to begin with! So, what do we mean by "consistent"?
- All images in a set should be the same height and width
- All images in a set should have a common perspective
- While the images in a set should be the same pixel size, the products shown in the images should be sized proportionally relative to each other.
- If the configurator includes a 3D scene, consider acquiring images from the 3D scene for field options
- If the configurator includes a 3D scene, consider having the perspective of the images the same as the starting perspective of the 3D scene
- Use a transparent background if possible
Let's unpack these with some examples. First, let's add a field for our excavator configurator on the type of track the user wants, either Rubber or Steel. More often than not, because humans are lazy by nature, we just end up using images we already have. Here's a good example of how NOT to do it:
We've broken a few of our rules here. The images are different sizes, and do not share a common perspective (the angle of the products are different). Also, the products they depict are not proportionally accurate. Following the advice from our list above, because we have a 3D scene, we decide to rectify this by capturing images from our scene using windows snipping tool. This way, we can easily achieve consistency. Here is our final result:
Much better. An added bonus is that we have the tracks at the same angle as our 3D scene is shown in the configurator, so we're prepping the user's mind as to how the 3D scene is going to change when they make this selection. Like this:
Another example for image consistency in a set are the tab icons used for selecting which page we are on. Out of the box, a page will have a pretty boring page icon that looks like this: When you have several pages in your configurator, and they all have the same icon or image, you are missing an opportunity to let the user know something about the selections on that page. One technique we have found particularly effective is to have a simple cartoonish icon of your product, and highlight the different parts of it to correspond to what section of the product that page contains selections for.
For example, for the page where we are selection the track of our excavator, we can use an icon like this:
and when the page is selected, we can change the image to highlight that region even more, so it's easy for the user to tell what page they are currently on. Like this:
The finished effect looks something like this:
Changing the image of the tab when it is selected is easy to setup using the page properties screen in the configurator admin. See how here.
3 - Strive to give the user one ONE thing to do at a time, and make it obvious what that thing is
This could very well be the most important practice on this list. If you give the user too many options as to what to do next, they will get overwhelmed, each possibility competing for your user's attention. And remember, if this configurator is going on your public website, a large majority of your users will be first-time users. They will likely not be using your configurator every day, and do not need power-user type of functionality. They just want to configure their tractor and get on with their day.
4 - Test on real users!
While solutions for this one are highly dependent on your unique configurator, we can learn from some general guidance and examples.
- Use configurator action buttons only if absolutely necessary. Since they are always present in the top pane, they are constantly competing for attention.
- If your configurator has a limited number of fields, consider only have 1 (maybe 2) fields on a page.
- Turn on page navigation buttons (the next and back buttons). They give a clear indicator to the user what to do next.
- Use hotspots with an always-visible target sparingly.
- Use camera animations in the 3D scene when switching pages to focus on the section of the product the user will be configuring. Do not just have the camera 'jump' to the next spot, as the user will likely miss that the view of the product has changed. Eyes are attracted to movement: by animating the camera, we are luring the user into watching where we will be focusing next.
The most effective way to show these practices in action is with a short video of our excavator configurator. Note how the overall experience is very easy to understand. At any given time, we are focusing the user on a singular and specific option, and making it obvious what they should be doing next.
I cannot stress this one enough. Only by testing on target users can you begin to understand where your usability problems are. Time and time again we get blindsided by one little thing in our design, that seemed obvious to us, but that a large percentage of the users get stuck on. Your perspective is tainted by the process of building the configurator: you've spent too much time with it, and can't separate yourself enough to truly put yourself in the perspective of someone who has never seen it before.
The good news is that target users are easy to find. Contact your sales department (who should already have some stake in the configurator project) and have them pass on some customers you can contact to help you out. Our experience is they are more than happy to help. Or, if that's not a possibiliy, test it on friends & family. This is a public facing configurator after all, so anybody can be a candidate for testing.
We recommend at least 3 rounds of customer testing. So the process looks something like this:
- Make your best attempt building your configurator using the advice in this guide.
- Test on users. Document as much feedback as you can. It's best to actually watch them use the software, as you can more easily tell where they are getting stuck. Ask them to describe what they are thinking as they are using the tool. And don't give them help unless they are hopelessly stuck.
- Iterate on your design given the feedback from users.
- Test on users again. Try to use a mix of some of the users from #2 and new users that haven't seen the tool before. Track how the previous user's perspective has changed based on the changes you made. Did it solve the problems they ran into the first time?
- Iterate again.
- Test on users again.
- Celebrate (in a safe and adult-like manner).
In Summary
Hopefully this guide will give you a head start on designing your configurators for customers effectively. Your own configurators will likely have their own unique challenges, but following this advice gives you a system to learn and improve. Now start building!
Related articles