A case study

Deutsche Bank

Global Service Desk portal for Deutsche Bank needed to reduce direct contact to the help desk via phone.

The brief

Deutsche Bank needed to reduce direct contact to the help desk via phone. This service was proving to be very costly and it was a system that they had no control over. Staff would pick up the phone to get support, even over the smallest matter, without trying to solve the issue themselves first.

Our small team were challenged with finding a way to build an alternative system that would give back control to the bank and reduce the costs for a worldwide service desk.

A few things to consider

The system had to be ‘usable’  and one that users would turn to immediately, rather than picking up phone on a whim.

Due to the bank being a large organisation, with many key decision makers and stakeholders, we knew that we were going to face a ‘design by committee’ scenario, often from people who were not qualified in design, but insisted on having some input.

The bank had been toying with the idea of utilising the Service Portal within a third-party service desk product called ‘ServiceNow’, which, for us, didn’t tick any boxes, when it came to both the user interface (UI) or user experience (UX).

How we did it

Having started in the web design industry in 1997, I am no stranger to the world of user experience (UX). Having lived through the ‘Flash era’ when there were some extremely bad and unusable sites, I knew that we had to make UX a priority.

Empathy

Empathy for the end user was especially key here, considering the nature of a service desk and the harsh world of cold technology. When developers are under pressure to deliver, empathy is the last thing on their minds. We had to provide added value to ensure users came to us first.



Personas

We engaged senior management, held many research groups with a broad range of users and compiled a series of ‘personas’ that we could measure against. 

Faced with having to use ‘ServiceNow’ as the back end engine we looked at creating a bespoke front end, to give our team total control over the UI.

Paper prototypes

I always start my ideas on paper first so I set up and ran a few ‘paper prototyping’ sessions which uncovered some interesting and unexpected ways in which different user groups approached using a service desk. Some went straight to the ‘search’ box, others clicked through the navigation, etc. Paper prototyping was a fun way to engage potential users and was quick, cheap and effective way to get the ball rolling and conversations flowing.

Digital wireframes

Our next step was to create wireframes (using Balsamiq, and later, Axure) to quickly generate digital versions of the paper prototypes.

User journey maps

This allowed us to create some user journey maps drawn from that initial research, which we could map against our ‘personas’, allowing us to tweak and hone the aesthetics of a potential user interface.

Final design and prototypes

Once we were certain that the wireframes were working, I then created the ‘look and feel’ using Adobe Illustrator and Photoshop. This enabled me to ensure that the UI I designed adhered to the strong Deutsche Bank branding, which carries the essence and spirit of the of the organisation.

We created prototypes using Adobe XD and Sketch which we could use to show how the system worked on various devices and also communicate to developers how we wanted any animation to look.

Style guidelines

I worked very closely with our small team of developers, ensuring that all graphical assets were provided and that consistency was maintained throughout. I created a set of branding guidelines specifically for this project which included all the UI elements whilst encompassing the overall Deutsche Bank branding ethos.

Development

The front end was built by our small team of in-house developers, utilising ServiceNow with a bespoke API talking to Angular 5. The front end framework uses Bootstrap 3 which was crafted to stay true to my designs, prototypes and style guide. CSS & HTML response for mobile. Compiled with Grunt and NG build.

Here are some screen shots of the final project showing how it looked on various devices

The numbers

The result was a highly extendable and visually rich system with a strong search engine, a direct click to chat system, plus very rich knowledge base. We included a feedback system which allowed users to rate their experiences, which in turn, allowed us to improve areas of the system as time went on. We added features like self-service password unlocks etc.

People could help themselves often faster than getting help via the phone.

Contact to the Support Desk has now been reduced by 272,000 phone calls over the past year, representing a cost-save of over a million euros annually. Utilisation of self-service Knowledge-base articles has increased by over 40%, and the system we created has been pivotal in achieving these results.

  • Service desk agents reduced by over 50%
  • Happier staff – 86%
  • Increased use of the knowledge base 40%