Project Description

Please note: I am unable to share any wireframes or finished designs due to the commercially sensitive nature of this work.
Helping a utility provider to make fast UX improvements to their call centre system, as a bonus while doing a branding update

An interesting project; we were making some changes to the backend of this system and had the opportunity to deliver some front-end changes too. This was mostly a re-skin, but one of the screens – the main customer overview – could have some UX work done on it. An added bonus: if possible, could we make it work well on tablets, so staff on visits could use it.

The first step, of course, was to find out what the users wanted. I was given a specification detailing every icon, button, hover, etc – and what these all meant, did and represented. It was clear the original design had worked on the following principles:

  • There is a lot of information that users might need when on a call with a customer;
  • Users don’t like scrolling;
  • If everything is on a single view, the user doesn’t have to click elsewhere and they can see everything as soon as the screen loads.

Hopefully, you are raising an eyebrow. But it was true that these were expert users, on the system every single day, for every customer – if they do indeed need all of this information for each call, and they know at a glance what all of the icons mean, then it’s worth the trade-off of having a bit of extra training at the beginning.

I was permitted to pop into the office to meet with expert users. While not ideal, it just wasn’t possible to visit their call centres around the country and interview different users, especially not for a short, minor-improvement-sort-of-project, so I made sure that there was a mix of job roles. I learned the following.

  • Yes, they are used to all of the icons and keys and it makes sense to save space by doing that;
  • No, they don’t mind scrolling and welcome it for a well laid out system;
  • There are some really obvious groupings for data that have so far been missed (I did some card-sorting after hearing this);
  • There’s a lot of information they rarely use;
  • There is a real accessibility problem in that the current design breaks if you zoom in.

Images have been purposefully reduced in quality to obscure sensitive information

So, I set to work redesigning the thing – trying not to get carried away, due to limited development resource. The main changes were:

  1. The implementation of tabs for the customer information. The details were broken up into sensible blocks from our card-sorting exercise, and the most used / important ones came first. The user could then either use the tabs to jump to a particular section of data, or on a touch-screen device they could just swipe left and right. Information that had previously been hidden in pop-ups and under tabs was now surfaced and readily available.
  2. The interaction panel (a panel down the right hand side of the screen that showed any calls, letters, system events, and so on) could be hidden. We had been told this was only used at the start of the call (and occasionally during) to see if there had been any recent interactions. Adding the Hide/Show functionality to this meant that the rest of the screen could act responsively.
  3. Everything was responsive. While the users all had exactly the same sized screens, the responsiveness meant it could be used on tablets but also allowed users to zoom in without breaking the design.
  4. Finally, we had an old-fashioned tidy up. There were several fields that had either never held information, or hadn’t been updated in a while because they related to an old promotion.