The New Configurator UI - Workspace

Introduction

The new Configurator User Interface (UI) has been built from the ground up to empower the manufacturing sales roles doing their work in a simple, lean and effective manner. 

The image below shows the new Configuration UI with harmonized areas (Navigation, Commands, Status & Tools in a temporarily activated Side Panel).

Enabling the new Configurator UI - Workspace

As an Administrator the new Configurator must be enabled in the System’s Administration by setting SettingBoolean “Enable Configurator Facelift” flag to TRUE:

Users can also personalize their experience by choosing to switch back to the current / legacy configurator UI in their user's profile settings:

Launch Point

The existing Configurator can still be launched via the line item's position number which is marked by one (1) in the image below. The new Configurator UI can be launched directly from the quote line item’s Configuration icon as shown in the image below marked with the number two (2). 

Navigation

While looking at the process of configuring line items, the navigation concept has been improved. The navigation has been aligned and is found on one real-estate portion of the screen. It allows the user to consistently access navigation-related items on the left-hand side portion of the screen.

Navigation for the system and the line item configuration are brought closer but are still separate from each other.

System navigation

When doing Configuration work, it may be useful to have more space on the screen. Therefore, in our CPQ application the user will find in the Side Panel - View Options an option Main Navigation to hide the system’s main navigation bar based on her / his desire.

Toggling the above results in the following behavior which is shown in the screenshot below:

Once a user leaves the Configurator UI, the application re-applies the system-wide setting which was active before the user had used the Configurator UI.

Configuration Navigation

The concept of Configuration Navigation allows a user to focus and complete a related configuration process in one go. In other words, the user starts with a configuration of any configurable quote line item, manages its required configuration, and then continues the process until all the sub-line items that may have exploded and until all child line items have been configured.

To cope with such a procedural change, the user receives more intuitive and aligned navigation when configuring line items and their subline items.

It consists of the existing backlink to the quote, the configurable line item, and its configurable child items. Each configurable line item allows intuitive navigation through its groups and subgroups and allows the user to jump directly where he or she wants to go to.

The configuration navigation is available to both SaaS applications CPQ and Commerce.

Some examples to demonstrate the behavior and assist of focus:

Configuration Navigation with a configurable line item and configurable child line item.

Configuration Navigation shows errors on groups (next steps for users).

Configuration Navigation shows (finished) material variant. 

By default, the sub-line items (also known as child items) are showing in a collapsed view to show as many subline items as possible within the configuration navigation to improve the focus on the existing work.

The chevrons behind the line item name allow the user to expand and collapse the group categories of a line item without opening and reloading the Configuration UI.

When clicking on the name of the line item, the Configuration UI will load the selected configuration and the respective configuration is loaded and is ready to be worked on.

Currently, active line items and their active group or subgroup are highlighted giving an indication of where and which area the user is currently working on.

Line item IDs can be displayed or hidden based on the user’s preference. This setting is also found in the Side Panel - View Options and can be configured as follows:

Configuration Update

The configuration navigation indicates the user where the user is currently working on the configuration by highlighting the respective position (group and subgroup).  

The tooltip is helping to understand how many and which errors are present in the indicated section. 

Errors and mandatory fields missing are indicated by highlighting the relevant section of the knowledge base. 

The mandatory field must be set”_ indicates an inconsistency error where a field must be configured before the quote may reach a valid state. 

“Error message for attribute: Attribute name”_ denotes the error message of a characteristic that is currently present. 

The user understands _before_ having the relevant workspace section open, what type of errors or inconsistencies are present, and he may decide to either resolve immediately or later, depending on what context is given. This makes the configuration process much faster, since not every section needs to be loaded to immediately see the next steps. 

Focus & Assistance

In order to support the user in performing his / her task in a fast and correct manner, the Workspace provides a few helpers.

Mandatory Fields

Mandatory fields are no new concept; however, this whole feature has been improved in several ways. For any quote, the mandatory fields are the bare minimum of fields that must be defined by all means - to either get a correct base price or a configuration that is valid. Mandatory fields show a vertical red bar in front of the label of a characteristic. It is a permanent visual helper that cannot be hidden.

We have enhanced our model such that the user can directly see that the product has not yet been correctly configured and locate exactly where the mandatory configuration is missing. In the configuration navigation, a group can indicate a missing configuration. Once all mandatory specifications within this group, respective subgroups are finalized, the mandatory flag disappears and indicating that the user has made progress and can proceed to the next step.

And then once you have configured the mandatory fields as shown in the screenshot below you will notice that the flag has disappeared.

Read Only Characteristics (Dynamic Attributes)

Read-only fields are easy to spot with their grey background. Users cannot change the options of these configuration characteristics. 

Default Values

Default values are shown specifically highlighted to indicate the current value (by initial launch or later reset) is a default value for the current characteristics option. 

User vs System Defined Configurations

A totally new concept within our SaaS solution is the usage of User Defined and System Defined inputs. It allows the user to see which configuration was important to the customer once they are talking about the offering. This also works in cases where someone else did the initial configuration and passes it along to a sales representative or manager for example and it allows a great entry point for additional questions to the prospect. Whatever the reason may be, it also helps to understand what configuration is done by the human and what proposals the system has set based on the user input.

System Defined inputs are configuration effects that can be triggered via script or triggers or any other system provisioned change. Such a change can be overridden (if the model does not permit) with user input and will then be marked accordingly.

Fields that have a dotted blue border are the System Defined inputs. The system changed some of the previous configurations due to any other changes based on human interaction. 

 

Fields that have a solid blue border are the User Defined inputs. These inputs come from human interaction.

This works with any control and does not require any set up by an administrator. Subsequently, in the Filter Settings section, we will find a way to also filter according to those input types giving us a great way to look at the right data point at the required point in time.

Product Schema Enhancement

Tagging Characteristics

Bringing characteristics of various groups into the same bucket of process relevancy or business segmentation the characteristics can be marked with certain flags. It allows the user to focus on a portion of the configuration work. Assuming that for example if a user is working on a tender and tries to optimize the pricing, wouldn’t it be helpful to display only characteristics that affect the price or maybe the costs?

Digital Sales Platform supports mandatory, quote, cost, price relevant tagging of characteristics. This allows assignment besides topic-wise grouping of characteristics to set tags according to the sales configuration process. This is a setting that needs to be performed by the administrator of the product knowledge base either via UI Administration or Excel Upload.

Enriching this information to the data model is helping the user a lot doing the right thing.

This allows the user to parse the screen easily and follow the business categories' color. This makes the user proceed with the configuration in a faster manner without having to read every single attribute’s name or label. On the other hand, the workspace can also selectively represent only the desired categories and remove all the “cluttering” fields. All of this can also be done with a single click. 

Side Panels

There are two new major types of assistance that Side Panels now offer and assist the users with their configuration and they are as follows:

• Manage UI workspace & the configuration UI
• Get additional help while configuring

 

Side Panels are launched primarily using the tool icons, where a highlighted tool icon shows which panel is currently opened and active. The side panel will keep the existing configuration open and provides additional assistance or interaction.

Currently available side panels:

Side Panel - Filter & View Settings

This Side Panel combines two functionalities in one panel. On the left-hand side, the characteristics tag and configuration input filters are available. On the right-hand side the view options can be set to match the need a user identifies for his/herself.

View Settings

The user can control the appearance of the UI based on his/her own requirements by either temporarily or permanently storing them in his/her own user profile. In order to save the newly made settings and change the modification to future opening of the configuration UI the user simply needs to set the Set as Default tick box.

Groups & Subgroups

Titles

Users may decide to not show groups, resp. subgroups and leverage more characteristics on the real estate. Turning off titles will automatically turn off images and comments.

Images

Groups images may lead to a more intuitive user visual support about the category of aggregated characteristics. Turning off images will just hide the image. Group images are only available in CPQ.

Comments

Comments, also known as short descriptions, enrich the information beyond the label of groups and subgroups.

 

Characteristics (also known as Attributes)

Attribute Positions

User may show the attribute positions in front of the characteristic’s (attribute’s) label.

Attribute Name

In some cases, experienced users relate more to attribute names rather than a localized label.

Therefore in such a case the data models’ or ERP characteristic’s name is shown besides the localized label one the attribute name is turned ON.

Comments

Comments, also known as short descriptions, enrich the information beyond the label of characteristics.

Filter Tags

Filter tags are shown as coloured bullets next to the label to increase focus of a certain relevancy.

The configuration filter sections shows the user the enabled filters on the workspace according to its selection with corresponding formatting. 

Mandatory 

Filter tag bullet for _Mandatory Field_ has been removed. The mandatory “filter” is shown at the beginning of the label as a vertical bar. The other filter tags are shown as filter tag bullets at the end of the label’s line. The mandatory field is a very important field and without it being filled in or chosen no quote can be formally approved. 

Order Relevant

The filter tag _Order Relevant_ has been added.

Note: Order relevancy is tagging characteristics relevant during the order stage in the sales process, but may already be configured during the quotation phase. Please ensure to understand this concept in order to make the right choice of determining the business phase. All order relevant attributes will not be calculated into the configuration progress (neither on the line-item level, nor on the quote progress). 

 

Layout

Based on preferences and use the layout can be changed with different layout options.

Multi Column Mode

Multi column mode allows users to bring as many characteristics on the screen as the screen permits. The width of the screen defines the number of columns that can be displayed. This view is the standard CPQ view for the users. Multi column mode is turned ON by turning Single Column Mode OFF.

Single Column Mode

Characteristics can be aligned as a single column with various options to cater for all user preferences and gives the user a more configuration web client configurator look and feel. Sales representatives may more likely use the multi column mode. The single column mode is the default Commerce view.

The screenshots below shows the Single Column Mode with left aligned labels:

The screenshots below show the Single Column Mode with the Center aligned:

The screenshots below show the Single Colum Mode with indented labels:

 

 

Pagination

Pagination mode is an existing mode which has been enhanced to provide users with more convenience to browse directly to the next or to the previous group. In case more than 30 characteristics are present in one group then the page with sub-paginated and allows inner-group navigation from the bottom centre area of the workspace.

This screenshot shows that the Pagination mode is switched ON.

Comment and Formatted Help

The platform allows administrators to improve the documentation for better assistance.

Filter Settings

The UI workspace is of utmost value if it can cater to all business processes and data entry. In addition, it always gives the user the option to see what he/she really needs. ​​ Filtering the workspace gives several advantages in doing the right work at the right time. Filtering increases focus and effectiveness touching only the required data points. The side panel portion denoted to the filtering provides a few filter options ready for applying.

The filters may be selected in multi-selection mode. All filtered categories will be displayed. After a certain stage within the configuration process the user might want to see unconfigured (“empty”) fields in order to compile the configuration fully. The unconfigured (“empty”) category is a calculated field representing the difference / remainders of the already configured fields

Filters

Mandatory: Indicates the mandatory fields in this configuration.

Cost:

Price:

Quote Relevant:

Order Relevant:

User Defined: Indicates the characteristics that have been set by a User.

System Defined:

Default Value: Indicates what come from the knowledge base and defines the initial value that is being loaded when opening a new configuration or resetting it.

Empty Value: Indicates untouched characteristics that do not have a default value or are still unconfigured.

Applying Filters

Applying filters is straight forward and enrich the workability on the product configuration. Applying filters on business categorization and configuration-based definition underlie the AND / OR principle. Within one category the filters are applied as OR operation, where as bringing both filter categories together , the AND operation is applied.

Filter does reduce form fields to selected tags. Without pagination it collects all form fields across the product (groups & subgroups). Groups and Subgroups sections display within the workspace are discarded.

The user sees on the workspace also which filters are applied and how many fields are shown out of how many in total within the configurable line item.

With pagination it collects all form fields across the selected subgroup (or in extrema the group or product if the subgroup, resp. group is not present in the KB). Groups and Subgroups sections display within the workspace are maintained (Since pagination allows clear location indication).

Help Assistance

The Help Panel provides documentation with sophisticated rich text and visual content accessible from anywhere in the configuration workspace – by a single click and can be done while the user is configuring a product.

Besides providing assistance, as shown in the image below, the user may easily upload important files via drag & drop and attach those documents in a hassle-free manner to the quote from anywhere during the configuration process.​

Visual Elements

There are several options to visually support the user performing configuration and making sure the choices can be fast. In this section, the new configuration user interface elements are presented. 

First of all, the behaviour of certain controls may change slightly on the operational interaction by the user depending whether multiple or single selection is available. E.g. the Default value search control allows double click in single selection case where as the multiple selection enabled requires the OK button to be hit.  

Default Value Search Control 

This UI control is most suitable for characteristics that have more than 6 values, require search capabilities across the localized range values and their ERP IDs. Normally to be selected where a lot of options and/or more experienced user and/or incomplete visual support is given. 

Tip: <div> The Best use cases to use for this are, <ul><li> Values that will load many range values >> 6. </li><li> Searching the range values or ERP ID will get you done faster. </li><li> Searching across two domains. </li><li> Images are important but are not main selection support. </li><li> Image material may not be too appealing or evenly present. </li></ul></div>

 

Segment Value Control 

Configuration values that do not require image support and usually provide 3-5 static options. 

 

Tip: <div> The Best use cases to use for this are, <ul><li> Values that will offer a choice of a few (more of static selection) short-named options, usually 3-5 options. </li><li> Different options at a glance: e.g. lens diameter, SSD size, RAM sizing, options (small, medium, large, …) </li><li> Images are not supportive in this context. Control is equally understandable by all users. </li></ul></div>

 

Note: <div>Be aware that as an Administrator that the UI Controls can potentially be configured to defeat their purpose.</div>

Image of such an example

 

here either 

• too many values are being offered, or
• too long range values

are defined for the segment control. 

 

Matrix Value Control

Some characteristics offer a few options only and characteristics range values may additionally lead the user when those are being enhanced with images – in short images that are further specifying the options provided.  It offers kind of a webpage experience to the user.

Tip: <div>The Best use cases to use for this are: <ul><li> Offer a choice of a few options, usually 1-9 options. </li><li> The image is THE helper and accelerator and main driver making the right choice.</li><li> For choices that are more commerce presentable.</li></ul></div>

 

Configuration is simple, the administrator sets the optimal matrix column and row count for the optimum presentation of the values. 

Open Display Value Control 

Characteristic that provide variants that are easy to understand and showing those directly within a small portion on the screen. The textual options are clear and easy to consume. 

Tip: <div>The Best use cases to use for this are: <ul><li> Text does it. </li><li> Plain and simple. </li><li> Low real estate usage. </li><li> Text is clear and image or anything else than a list is distractive. </li></ul></div>

Simple Drop Down 

Some characteristics offer a few options that allow to quickly select from a dropdown. The dropdown provides type ahead support and if desired also ERP ID support leading to a enhance further efficiency to search for the term the user knows. 

The form field control allows to type directly and reduce the list by typing ahead. 

Multiline String Control

Some configuration items require several lines of text to be added. The text can be entered with the option to display several lines. The control supports automatic scrollbar enabling.