Background Information

Project Summary

During my tenure at Deloitte, I was placed on assignment as a Lead UX Designer for Vertiv, one of the largest networking and data center equipment providers in the nation. The project was to redesign their CPQ configurator, worth over $6 Million dollars. This tool was essential for sales people to order Vertiv's networking equipment on behalf of their customers. The challenge was that the products were complex and the clientele was fractured in terms of product knowledge and needs.

The relationship between Vertiv and Deloitte was also strained; they were unsatisfied with the user experience of the product Deloitte had made prior to me joining.

Over the course of the project, I built relationships through C-Level stakeholders, to listen to their complaints and understand their needs. I also talked to several boots on the ground employees. With this insight, I redesigned the CPQ configurator to improve the process of selecting and ordering Vertiv products for both novice and expert users alike.

This was the first time I was entirely responsible for the end to end delivery and management of the entire design of a product. The Vertiv stakeholders and salespeople were impressed with the result and signed another contract with Deloitte to bring myself and another designer to finish the product's UI.

The Business Objective

Vertiv needed a UI/UX designer to redesign their Cost-Configure-Quote Application (Vertiv configurator). The Vertiv configurator allows salespeople to select a Veritv product, configure it and send an RFP to customers.
‍
Vertiv wanted the experience to be  more user-friendly. Vertiv hoped that the redesign could also help in capturing an untapped market, resellers– a group of users that had a lower level of knowledge of Vertiv products.

The Current Configurator

The following screens depict PartnerWeb, the current application that salespeople use to order and customize Vertiv Products. We leveraged the current application to give us additional user insights that helped us build a better configurator.

Deloitte had already started developing an application for Vertiv (Phase 1 Design) without consulting a UX Designer. Vertiv had an issue with the designs Deloitte made, which was why they brought me in. Deloitte’s application had severe usability issues and it would take awhile to not only correct the mistakes that were made but also to win back the client’s trust and repair Deloitte and Vertiv’s relationship.

Before I was officially brought in, I was asked to prepare a deck that detailed my initial plans for the project as well as a rudimentary timeline. In the past, a manager or senior would take care of the strategic aspects of a project so the process of creating the timeline for this project was initially quite difficult for me.

As seen below, the project didn’t quite run as I initially expected. But in the end, it turned out to be a good experience for both myself and the client.

Actual Project Timeline

Initial Research

My first approach was meeting with stakeholders and users alike. The stakeholder interviews were helpful in getting a background information on Vertiv, such as foundational knowledge on database and networking equipment, the sale of such equipment.

We also got a clue as to how the CPQ fits with the sales process and and what users might use the CPQ application. To confirm all of the above and to dig deeper, I set up some user interviews.

Who We Interviewed

Who Is Using This Application

During our interviews we learned that there were primarily three types of people that would use the Vertiv CPQ application.

The Vertiv Salesperson who works for Vertiv and has a high level of product knowledge.
‍
The Third Party salesperson who is similar to the Vertiv salesperson but does not work for Vertiv and may sell a handful of competitor products.
‍
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.

The Resellers will need the most help navigating and choosing products whereas the salespeople needed a power solutions to help provide for their customers. The differences between the salespeople and the Resellers made the design of the configurator challenging.

What Are Our Users Saying?

After conducting several interviews and affinity diagramming several sources including interviews, previous research, and stakeholder interviews we came up with four recurring patterns that had the potential to significantly boost usability and eliminate painpoints.

Users expect an experience similar to the B2C apps they use in their personal life.

The experience should be laid out in a way that follows the quoting process.

The quoting process needs to be easy for novices and robust enough for experts.

Users Expect An Experience Similar To the Apps They Use In Their Personal Life.

Vertiv stakeholders and salespeople constantly compared PartnerWeb with APC, Vertiv’s competitor. Looking at APC, we noticed an unexpected pattern. The process of buying a part from APC follows traditional B2C conventions. Users browse for a product, add options to it, then go to the solutions page to checkout. A user would use the APC configurator the same way they would buy a laptop on Amazon.

In contrast, Vertiv’s current application can be described as anything but familiar. Users select the product via a dropdown menu. They are directed to a product page filled with unorganized tabs. Afterwards, they are expected to navigate to a summary tab that sprouts additional tabs. After the user goes through those tabs, the user is able to buy an item.

I believed that the Vertiv configurator's usability would be greatly improved if it followed a more conventional architecture like APC or Amazon.

The experience should be laid out in a way that follows the quoting process.

HP's gaming laptop product page is a good example of a configurator that flows intuitively. Users make their way from top to bottom adding or removing different options to customize their laptop. This is an incredibly common layout that can be found in many other applications.

As stated before, Vertiv's configurator relied on tabs. The problem with tabs was that it hid too much information. Some tabs were not in a logical order which meant that users were having to move back and forth from tabs several times just to configure a product.

Previous research that Vertiv conducted through another third party said that users wanted all information on one screen. However, our research indicated that while users were simply frustrated with the amount of information finding that was required.

The quoting process needs to be easy for novices and robust enough for experts.

Because Vertiv's userbase consisted of seasoned sales specialists and rookie wholesalers, Vertiv's site needed to be powerful enough to satisfy the power-user but also needed to be easy enough to allow less knowledgeable users to understand the complex process of buying networking equipment.

Design Concepts

After identifying our users and the key pain points that each faced, I created a set of wireframes to detail how the new CPQ application would work. I focused on several major design changes to alleviate the prior painpoints of the last CPQ iterations.

Changed Architecture To Mirror B2C Sites

I rebuilt the experience and modeled it’s structure after e-commerce sites. Users browse for products via the homepage and category pages, make finer adjustments in the product page, and confirm their order in the cart page. I believed that this pattern would be familiar to all users and would make Vertiv's configurator feel much more intuitive.

Changed The Product Pages To Follow The IRL Quoting Process

We saw from previous research that users wanted the configuration options all on one screen, so we laid out the product page in one long scroll page. Rather than in tabs, the product options are grouped in sections.

Added A Guided Selling Experience

Similar to APC, we added a guided selling experience to help Novice users find the appropriate Vertiv product for their customers. Users would be guided toward a series of questions regarding the capacity, runtime, and voltage needed. The products would be filtered down according to how users answered the questions.

Vertiv Configurator Wireframes

Testing & Iteration

In testing, we learned that while users liked most of the changes, including the change to the flow of the application, users felt there were a two areas that needed major improvements to be made. So I reiterated the wireframes and tested again. Below are the results of the second phase of testing.

Who We Interviewed

Remade The Product Page To Flow In Steps

Due to the complex nature of configuring a UPS we learned that it wasn’t entirely possible to mirror a B2C product page exactly. The reason being was due to the number of options and that some options were dependent on one another.

To remedy this issue, I remade the product page so that it would flow in steps.

In the example below, the user chooses the product NetSure 211. The user is first given the option to configure the length and type of shelf for NetSure 211. In this example the user chooses 23 inches with 6 Rec and DUs for their NetSure 211 Shelf configuration.

After the user clicks next, a new drawer with new options appears. In this step, the user chooses the type of mounting option for their NetSure 211 product.

Note that if the user selected a smaller shelf size, like a 19" shelf, then a different set of options would be shown, as a NetSure 211 19” shelf cannot be mounted via flush or relay styles. Interloping options like the aforementioned example are what made the truncated design necessary.

During testing, we found that users were able to successfully complete configurators with and without nested options. They also believed the new design made it easier to understand how to configure a Vertiv product due to the step by step nature of the application.

“I like the idea and it simplifies everything if we get the requirements. I’m critical of myself and everyone else, I hate the complexity of these things [the original configurators]. If I can’t figure it out then how the hell is everyone else going to understand it?” ~ Vertiv Product Owner

Other Feedback

[Regarding the guided selling experience]
‍
“Once these product filters are picked, you get a few other choices, that’s really cool, that is how we’ve been doing things.
~ Third Party Salesperson

[Regarding the general experience]
‍
Some of us [3rd Party Salesmen] we get these random one off configurations one to two times a year that usually aren’t in our particular vertical. Having descriptions or other helpers would make things easier. ~ Third Party Sales Person

Final Wireframes

UI Mockups

Vertiv asked us to continue working on the application, this time wanting UI mockups. Myself along with another Deloitte teammate delivered the final UI mockups. The process of designing the UI was fairly simple since there Vertiv had a design system that they had just released.

Project Debrief

Results

Vertiv was extremely happy with the results but how well did the application help its users? Based on the feedback sessions, I believe we could've had more input from novice users. Features like the guided selling should be a focus for the next testing sessions. Nonetheless, below are some of the results from our feedback sessions, benchmarked against the user painpoints that we identified earlier.