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).
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.
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.
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.
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.
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.
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%