Calabrio
My role on this project
Full time Senior UX Design lead at Calabrio - August 2017 to July 2019
I joined Calabrio as the lead UX designer for their Business Intelligence unit in Vancouver, and later also consulted for the Work Force Management product group based in Minneapolis. Calabrio makes call centre workforce management and optimization software. When I joined the company they had about 550 employees and had just entered a hypergrowth phase.
About the project
I worked with a product owner, project manager, and front end UI developer to add new functionality and an updated look and feel to the single most used interface in CalabrioONE - the customer contact centre. My work included discovery, user research & analysis, some great discussions with the UI dev team, wireframes, and final design.
OVERVIEW
The "customer contact centre" is the heart of Calabrio's quality management solution, offering unprecedented control to supervisors needing to review hundreds of calls a day as well as monitor and assign training to the frontline agents who support customers.
Problem: Customers complained that user interface for reviewing calls couldn't display all the different kinds of data they needed to see when analyzing calls.
The existing design had no space to spare: Supervisors clicked on a call (table row) to play it back, and could select from six different tabs mid-screen to examine various call and customer details.
DESIGN
The team (product owner, front end engineer, and me) decided that we could provide more real estate for additional data if we turned the playback bar on its side. Also, we would replace tabs data columns that users could hide, show, or even drag over to a separate monitor to expand and examine.
RESEARCH
Usability concern: Was a vertical scrub bar going to be a problem for our customers?
We needed to validate our innovative vertical playback bar with customers. Calabrio didn't have a budget for UX research, so I put together a quick validation test that could be done internally with staff who weren't familiar with this part of the product.
Top research findings
Thankfully, no participants had a problem with the vertical playback bar.
However, two other areas of concern emerged:
1 - Not all participants identified the location of the playback controls right away. This mattered because we didn't want users to waste time hunting for the controls.
Resulting design change: I enlarged the size of the playback button, centered it horizontally, and increased contrast between the button and the bar in which it appeared.
2 - Some participants were confused about what parts of the UI would actually respond to the playback controls. This mattered because not all parts of the UI were dynamically synched to the call playback location. Some elements, like the customer detail panel, were static.
Resulting design change: I added a red outline to highlight components linked to playback (transcription, audio, sentiment, phrase hits, apps in use by agent, and video recording of desktop - not shown in the example). The highlights update location as the call plays back, creating a "red line" of data related to playback location.
User feedback went a long way toward helping the team understand potential problems with the new design. If I hadn't found a way to put our initial designs in front of users (even tho' all we had were internal participants and not customers), the team might not have caught these issues.
IMPACT
The new design was very popular with Calabrio's customers.
Feedback from existing customers was overwhelmingly positive
'New customer' sales of CalabrioONE jumped significantly following the new release.
Calabario's VP Product proudly referred to the new interface as "the jewel in the crown of our quality management solution"
Comments