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.
Vertiv Configurator -
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 Configurator -
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 Configurator -
Product Page
Notice the lack of images or product descriptions as well as having an unfamiliar layout design for product pages. There is a lot of mandatory content hidden and spread out through tabs.
Deloitte Configurator -
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
I interviewed stakeholders and users to understand their issues with both PartnerWeb, and Deloitte's configurator.
Who We Interviewed For User Research
Who Is Using This Application
The Vertiv Salesperson who works for Vertiv 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
The following are the three biggest challenges to usability. Some were found during the discovery phase, while others were found after I conducted iteration testing.
Problem -
Users Had Varying Degrees Of Product Knowledge
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.
Solution -
Introduce Help Features & Wizards To Help Novices
Problem -
Users Were Frequently Backtracking & Interdependent Options Needed to Be Addressed
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.
To address Interdependent options, I came up with a series of cascading accordions to guide users. An accordion is presented with a selection of choices to configure the product. After the user selects 'next', the previous accordion closes and a new one appears and opens up a new set of options that are unique to the previous selection.
Solution -
Introduce Dynamic Accordions To Guide The User & To Facilitate Interdependent Options
UI Mockups
After I delivered the final wireframes, Vertiv gave Deloitte another contract for myself and another designer to create UI mockups.
