Case Study: Call Center Troubleshooting Wizard

The Challenge: How to prevent a high turn-over in Customer Support

Customer Representative Troubleshooting Wizard

My Role on the Team:
Information Architecture (with developers)
Interaction Design (frequently reviewed with the team and stakeholders)
Work Flow
Usability (continuous testing)
Visual Design (also defined a style guide for apps like this)
Prototype Engineering (HTML, CSS, JavaScript)
UX Research, User Interviews, Wire Frames, Front-End Development

Customer Support representatives get a lot of abuse throughout a typical day. Having easy access to information and being able to consistently provide the same solutions for specific problems would drastically cut down on misunderstandings and disgruntled customers, some of whom might call up to three times a day, and end up getting four different answers. It's frustrating to the customer, and it is frustrating to call center customer representative.

After several meetings with supervisors and managers from Customer Support, I knew what the directive was. Then I spent a few days, sitting right next to various customer support reps and listened in on their phone calls, watched what they were doing on the computer, saw them go back and forth between 3-5 forms with information in Salesforce and web browsers...and I knew that what we currently were doing was not working.

To make a long story short, I sat down with some of the best customer support reps and interviewed them. I was careful how to phrase my questions, because I wanted answers from the reps, and not a validation of my own points of view. One of the most powerful questions I asked was, "I've seen how painful it is to find information for customer service reps, how do you find information so much faster than most of the other reps?" After that, I received plenty of information to come up with various designs that we adjusted and fine-tuned as a team.

For example, there had to be a clear indication of the history with any customer who called in. How often had they called in? Was it about the same issue every time? Or was it about a number of different issues? There had to be easy access to the notes that customer service reps had taken during previews calls. Here is the solution I came up with. The breadcrumbs indicated how we arrived at this page, and customers were identified by case numbers (the bold case number at the top was the original issue, and upon expansion, the associated issues would show and were linked to detailed notes about the case history).

Customer Representative Client Call Log

At the top of the requirements, was a global search integration to access all the knowledge base articles about any piece of equipment, problems with that piece of equipment and how to solve them. We also needed a "Top 20" list (give or take a few) of related topics or the most trending issues, easily accessible by clicking a button and looking up information about how other customer service reps had solved those issues. For example, a special request was to allow the customer representative to search for a topic and immediately get a real-time number of most recently related topics that other customers had used recently to resolve similar issues:

Solutions Wizard Search Engine

Another important requirement was to provide a visual approach to drill down by type of product or service. That way, even customer reps who weren't particularly good at finding things otherwise could click on a category (say, sensors) and quickly find the product the customer was calling about in the first place. (Note: The black-and-white product category visuals were handed to me from the Corporate Marketing and Branding team.)*

Solutions Wizard Visual Search Engine

*The various black-and-white icons and visual representations of products were controlled by Marketing and Branding.

Breadcrumbs. I also wanted to make sure that—at all times—the customer rep knew (1) where she was, (2) where she had been and (3) how to get back to a previous step. You may think that this would be something common but it was non-existent in any of the tools the customer support reps were using. As a result, they were absolutely thrilled about such a "small but helpful feature."


The creation of a troubleshooting wizard for a specific audience is rather demanding. Every supervisor, manager and even the department manager want to see a number of features in this tool. At first glance, you may wonder, "So what?" Nonetheless, to the audience for which I designed and prototyped this web app, those small changes and big improvements were dreams come true. Finding the right balance and being tactful in meetings and other negotiations is the key to finding consensus with the various stakeholders. Although a lot of people had lots of good ideas, in the end it was my call to decide how to present the information and to determine a smooth workflow.