An intuitive and simple to use appointment booking system

Challenge

The old system was cumbersome and took six minutes to book an appointment

The existing appointment booking system was old. It only worked on PCs and could only be navigated using a keyboard. This meant it took Banking Advisers on average six minutes to book an appointment for customers.

To make things more challenging, if a time requested wasn’t available, Banking Advisers couldn’t provide customers alternative options easily. This was frustrating for both staff and customers.

The old system hadn’t been refreshed in years
Navigating was only possible by keyboard

Process

Involve Banking Advisers and customers from start to finish to design a best-in-class booking system

Getting to know users and understanding
what makes a best-in-class experience

Mapping and
redefining the journey

I involved Banking Advisers and customers from the start of the design process to hear about their previous experiences in order to find out what made an ideal booking experience.

A couple of things stood out. Firstly, if a customer couldn’t get the time or date they requested then they wanted convenient alternatives.

And secondly, customers often felt under-prepared when attending appointments  so they wanted a checklist of what to bring (e.g. local driving licence, utility bill dated within previous six months etc).

After working closely with Banking Advisers I was able to map out the existing journey to truly appreciate the complexity of the old process.

From here, I simplified the journey into something based around the needs and wants of both Banking Advisers and customers.

Piecing together the old journey
Redefining the new journey

Wireframing and
prototyping a new UI

Using the newly designed journey, I sketched wireframes and validated them with banking advisers before bringing them to life in the form of clickable (Axure) prototypes. After several designs and iterations we agreed on a version that I took to test with customers.

Early wireframe showing single page form with all info required to make an appointment
Early wireframe showing progressive disclosure via accordions to reduce information overload and focus user on individual sections
Wireflow describing the new journey with multiple appointment types and interactive map
Early interactive Axure prototype used for testing

Testing with customers and
banking advisers

I organised user testing with customers and Banking Advisers (one-to-one) to observe how they made an appointment using my prototype. The feedback was largely positive but I was able to take away some feedback to optimise the experience further.

For example, I introduced a section for customer support needs which meant staff at the bank were better prepared to facilitate vulnerable customers when they attended an appointment.

Medium fidelity wireframe showing tooltips for customer support information
Medium fidelity wireframe showing customer support information maximum limit

Result

Booking an appointment in 70 seconds

The feedback from Banking Advisers and customers was overwhelmingly positive. My favourite quote from a banking adviser was: “It’s so simple, so straightforward. It’s lightyears ahead of what we have now.”

Although words are flattering, the numbers also told a positive story: the average time to book an appointment was slashed down to just over 70 seconds (an 80% reduction!).

It's so simple, so straightforward. It's lightyears ahead of what we have now.

These were fantastic results, however, there were two other achievements I was most proud of.

The first was introducing increased support for vulnerable customers. This meant Banking Advisers were better prepared to meet the needs of these customers when they arrived for their appointment.

The second was watching Banking Advisers make a booking without prior training or referring to a user manual — a great testimony for user-led design.

Mission accomplished.

70

Average time to book an appointment
Visual guide for appointment availability

To make it easy for staff to communicate time availability to customers, I designed several options which I presented to users for feedback. This was the final design which was refined with the help of a Visual Designer.

Searchable map for branch locations

I introduced an interactive map which allowed staff to locate where a customer lived or worked. They could then see branches within the customer’s locality to offer an appointment most convenient to the customer. I designed the screen to also include helpful information regarding branch facilities such as wheelchair access.

Appointment confirmation details

An early improvement that I identified was that customers wanted detailed information about their appointment. So to make them feel adequately prepared, I introduced a printable confirmation screen showing the branch location and a check-list of what to bring to the appointment.

Cancellation prompt and notification

One of the major frustrations for staff was that they didn’t get notifications of appointment cancellations. I introduced a mandatory prompt at the cancellation stage which sent an email notifying Banking Advisers and a text message to customers.

https://www.youtube.com/watch?v=K_YAqEhKUlQ

Watch a Video Demo