Vertiv is one of the largest networking and data center equipment providers in the nation. They needed to redesign their CPQ configurator. This tool was essential for sales people to order Vertiv products on behalf of their customers. The challenge was that the Vertiv products were complex and the userbase was non homogenous in terms of product knowledge and needs. What was more challenging, were rumors that Vertiv was considering dropping the consulting firm I worked for, as they were unsatisfied with the user experience of the product Deloitte had made prior to me joining.
After I was brought in, I was able to redesign 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 responsible for the end to end delivery and management of the entire design of a product. After a rought start, the Vertiv stakeholders and salespeople were impressed with the result and brought in Deloitte for another UI project, of which I also participated in.
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 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.
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.
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. He strives for accuracy and customer excellence.
The Third Party salesperson who has the same function and role as a Vertiv salesperson with the difference being that this persona does not work with Vertiv. While they specialize in Vertiv products and may sell a handful of competitor products.
The Reseller who sells a broad range of products and acts similar to a wholesaler. These are users that do not have the need or time to gain expertise on Vertiv products unlike the other two personas. The Reseller needs something quick and easy to remain competitive in their field.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 above, 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
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 LVOs 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 (LVO)
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.
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.
While none of the interviewees in the usability session mentioned anything related to the site architecture, none of the interviewees had issues navigating the application.
Users felt that the new product page was helpful in guiding the users through a configuration, which helped offset some of the complexity that came with Vertiv's products.
While we were unable to talk to novice users during usability testing, expert users told us that they felt like novices when they were asked to order a Vertiv part that was unfamiliar to them. Of which they said that the product descriptions were helpful in guiding them to a product.
This project reinforced the value of collaboration, this project wouldn’t have been successful without the business analysts, the developers, and the client.
I learned that it is ok to ask for help and to push back when either scope creeps up or the bandwidth gets unmanageable.
I learned how important understanding code is and why technical limitations should be considered when designing applications.