Organizing content into categories is an important design pattern used to create clean and easy to navigate product pages, which contribute to a good user experience. In a CPQ (Configure, Price, Quote) interface, however, there are some differences in design goals and challenges that must be considered. This article will discuss various design options for CPQ category design inspired by a few well-known B2C websites.
Category Design in B2C Websites
Categorization of products can be overwhelming for a company in a large industry. For example, a telecom company may have thousands of products under more than 10 different categories. The ease in which users navigate to the product they are looking for is the key to success for the user experience, and by extension, selling the products.
Below are screenshots from the Top 5 telecom companies in the U.S:
Each company may have a different grouping of their products, e.g. T-Mobile’s devices include Phones, Tablets and Wearables, while AT&T groups their products into Wireless, TV, Bundles, Internet, Home Phone, etc. However, by generalizing their layouts and hierarchies, it can be shown that their reading pattern is simply either top-down or a combination of top-down and left-to-right, indicating the hierarchy.
Left: Top-down layout with two or three levels of hierarchy. Arrows indicate the reading pattern. Right: Top-down and left-to-right combined layout. Arrows indicate the reading pattern.
Category Design in a CPQ Interface
A CPQ interface has its own design challenges. If a lot of information is displayed, the reading pattern may need to differ from the example B2C websites. There are several potential solutions to consider for the category design, which will be presented along with their pros and cons.
In the following scenario, the users of a CPQ interface are call center agents. When a customer calls in to order a product, an agent launches a CPQ interface to process the order. Here is a simple four step workflow for the call center agents.
Call c
For this scenario, the most important design challenge is to manage the complexity of first step, Browse the category. We will begin with a generic two-panel CPQ interface mockup with a standard 1:2 layout.
As seen in the wireframe above, the Cart panel takes up most of the screen real estate and is where the majority of actions will be taken. The Product Category panel is limited to a narrower area on the left side of the screen. With this layout, it is challenging to clearly communicate the product hierarchy in such a limited space.
Below are five approaches to solving this type of design challenge. They include a sample set of telecom products, which are inspired by the example B2C websites. The product categories include Voice, Internet, TV, Wireless and Other, and under each category, there may be additional subcategories. For example, under the Other category, there may be Accessories and Additional Features as subcategories.
Solution 1
The first solution is a straight-forward grouping of the product categories and subcategories. From top to bottom, the category groups are listed in alphabetical order. Under the category header, the top three subcategories are shown with a hyperlink to additional groups in that category.
This design helps increase productivity by showing the top three options. However, it can be very limiting in situations where more than three subcategories are popular or when there is a long list of subcategories, which would require much scrolling.
Solution 2
The second solution is to arrange the category header labels in a vertical fashion on the left, with an option to browse all.
In this design, the labels work as filters. The user can quickly navigate to the products under that group. However, the limitation here is that only two levels of hierarchy can be presented. With all of the products displaying during the initial page load, interface responsiveness and performance could be slow.
Solution 3
The third design is similar to the previous one, but the category header labels are placed as horizontal tabs at the top. A secondary hierarchy is added to this design with a count of items in the subcategories. This approach should have better interface responsiveness and display performance because not all of the products need to be displayed during the initial page load.
The main drawback of this approach, however, is that only a small number of labels can be displayed on the top. It will work if only three or four category groups with short names are required, but it lacks scalability if more top level categories are needed.
Solution 4
This design uses a chevron icon to display a floating menu. Upon clicking the chevron icon, the menu panel will expand and display the top level categories. Clicking on a category will expand the row to reveal the associated product hierarchy as a list tree while simultaneously filtering the product list in the background.
This approach saves screen real estate when the menu is collapsed and is capable of presenting a nested hierarchy clearly by using indentations.
Solution 5
The last approach is an alternate form of the previous one and introduces a double panel design. The main limitation to this approach is that there should only be two levels in the hierarchy. If it is greater than two, the nested panel interactions quickly get out of control.
An additional tip would be to add a breadcrumb in the product list, telling the user where they are and allowing them to go back to the previous level.
Exploration Matters
Trying several design approaches and documenting the process will enable you to reflect on previous experiences and refer back to them when tackling the next design challenge. Creating a good user experience is all about crafting the best solution to a problem in order to optimize user interaction. Designers must keep that in mind when endeavoring to create the next great product.