Vertiv
Role
Lead UX Designer & Lead UI Designer
Quick Summary
Turned around a failing $6M project to design and deliver a more usable Responsive Web Product Configurator and even scored a new contract with the client to deliver the UI
Contact MeBackground Information
As part of a $6 Million dollar project, Deloitte was contracted by Vertiv to replatform and redesign Partnerweb, their product configurator, so that any salesperson would find it easy and quick to customize a Vertiv product. Deloitte had redesigned the configurator using out of the box elements from Oracle's CPQ framework. The problem was that Deloitte's new experience was just as bad, if not worse than the original.
Initial Business Objective
Replace Vertiv's old product configurator and rework Deloitte's version of the product configurator so that it allows sales people to configure Vertiv products in a way that is easy to use, easy to understand, and fast.
Acessing The Current Experience
Having two existing configurator experiences was unusual but very helpful in that there were more opportunities to dig out insights to improve the configurator experience. I decided to analyze both Vertiv's old configurator, Partnerweb, and Deloittes new configurator, to identify potential problems with usability and issues with Vertiv's business goals.
Vertiv Category Page
This is the main page of the configurator for PartnerWeb. The product categories are hidden under a dropdown, if a user is unfamiliar with Vertiv products they will struggle to find anything due to the lack of context.
Deloitte Category Page
This is the main page of the configurator Deloitte made. The product categories are also hidden under a dropdown, repeating the same mistakes as in the previous iteration.
.png)
Vertiv Product Page
The lack of images or product descriptions as well as having an unfamiliar layout design for product pages hurt usability. There is a lot of important content hidden and spread out through tabs.
Deloitte Product Page
Deloitte continues the trend of over relying on tabs. Even worse, they placed the tabs far above the content, which could result in users not knowing the tabs are contextual to the product.
.png)
Discovery & User Research
After identifying several usability and business issues with both configurators, I created a research plan to verify or refute my initial assumptions as well as identify any other issues, especially ones that could impact usability, understandability, and speed. I interviewed stakeholders and users to understand their issues with both PartnerWeb, and Deloitte's configurator.
Who Is Using This Application
The Vertiv Salesperson who works for Vertiv and has a high level of product knowledge.
The 3rd Party Salesperson who works for another company but sells Vertiv Products and has a high level of product knowledge.
The Reseller who sells a broad range of networking equipment and does have the need or time to gain a high level of expertise on Vertiv products.
What Are They Looking For?
The quoting process needs to be easy for novices and robust enough for experts.
The experience needs to eliminate backtracking and follow the IRL quoting process.
The experience needs to account for product-dependent options.
Problems & Solutions
I found several insights but the three largest and most impactful issues were the following:
Problem -
Users Have Varying Degrees Of Product Knowledge But The Experience Only Catered To Expert Users
Solution -
Introduce Help Features & Wizards To Help Novices
I learned that each salesperson asks the same three questions before recommending a product; how much capacity, runtime, and voltage is needed. I created a guided selling experience so that users with little knowledge of Vertiv products could be directed to the appropriate Vertiv product for their customers.
Problem -
The Old Experience Required Too Much Context Switching To Configure A Product
Solution -
Replace Tabs With Dynamic Accordions To Guide The User & Put It All On A Single Page
Users frequently had to backtrack because the content didn't follow the way that salespeople configured a product. Sequencing content in a way that mirrored the actual quoting process created a logical path for users to follow.
Problem -
A Lot Of Configuration Combinations Were Incompatible With Each Other And The Experience Needed To Communicate And Prevent That.
Solution -
Introduce Dynamic Accordions To Facilitate Interdependent Options
During iteration testing, I discovered that not all product options were compatible with each other. For example, Vertiv sells racks in various sizes. Large racks can hold large networking equipment accessories whereas smaller sizes cannot.
The business couldn't allow users to configure products that didn't work together and from a usability standpoint, I didn't want users to spend their time figuring out which product worked and which product didn't.
To address this issue, I designed the configurator as series of cascading accordions. Each accordion presented a selection of choices to configure the product. After the user selects 'next', the accordion closes and a new one appears and opens up a new set of options based on what the user just selected.
UI Mockups
After delivering the updated wireframes, the client gave us a new contract — to turn those wireframes into a final UI mockup. The process itself was fairly simple, since Vertiv had their own design system and because the elements on the wireframes were simple, there was very little adjustments or deviations from their design system that was needed. This was a $6 Million dollar project that went from a total disaster to our firm landing another contract.
UI Mockups
Below are the UI mockups for the CPQ Configurator experience. Because of the robustness of Vertiv's existing design system and the simple design of the wireframes, creating the UI mockup was a straightforward process.
