Making Appointments Easy @ KBC Bank

About This Project

Making appointments easy @ KBC

Introduction
For this project we had to rethink appointments and the appointment process starting from the different channels. Requirements were to make appointments with KBC easier in general, while catering to the business wish to “push” the KBC Live online appointments without interfering with the general customer experience. The standpoint was that online appointments are just as good as regular branch appointments, but the concept was unknown to most clients. Other requirements from business side were that the bank was closing branches and downsizing the employee base, meaning not every bank branch had the experienced experts for every topic. This could mean clients could be redirected away from their own branch for an appointment.
Analytics
We started from a data report that analysed our site visitor behaviour. Through analytics, page bounces and heat maps we were able to draw conclusions about the user behaviour.

Personas and Customer Journey
After gaining quantitative insights, I designed persona templates for our users. Since a banking application is used by a wide variety of user profiles I had to create a wide range of personas, ranging from digitally illiterate grandpas to young women who prefer the personal experience of an appointment, and from people that spent tons of time with digital products to people who don’t own a smartphone.
After validating the persona’s with some stakeholders I built our painpoints overview and set up customer journeys maps. These have been adopted to be used in every project. These customer journey maps are especially important and interesting because they give you a generally broader empathic insight in the clients actual mood or experience over several touchpoints, and not just what his goal and emotion is in the current interaction with the process. He might start on mobile, continue on iPad, and finalise on desktop. This cross touchpoint interaction is way more common today than it was before 2007, with only the pc as a digital touchpoint.

The current pain points of the appointment process and their solutions (shortcut)
  • The entries to this process are plenty and not alwas easy to find
    • We covered entries and made mockups for improved access on all channel pages, apps, contact page, product pages, and website homepages.
  • High number off users leave process before completing
    • linked to the reasons below
  • It’s unclear whether to choose “my contacts” or “make an appointment” for a certain question
    • Solved this by reformulating the questions to “quick question” and “make an appointment”
  • Promote and highlight online appointments (business requirement)
    • online appointments are easy but not well adopted, research shows people are open for this, highlighting and promoting should help with awareness.
    • Showing office appointment times and online appointment times next to (on top of) each other with horizontal scrolling (adding gestalt effect) increases visibility of available times slots, promotes online appointments and increases awareness of this option without being intrusive
  • Notifying the client that “an expert is not available at their branch” (business requirement)
    • Finding a good solution to communicate that the client should select another branch for his offline appointment
  • How to change and choose different branches when you are not making an appointment near your own branch (option didn’t exist before)
    • A branch finder solved this issue, and is linked to the previous point
  • Selecting the proper time block isn’t clear
    • Improving the comprehension and readability of time slots
  • Comparing agenda’s for relationship managers (business clients) should be easier
    • easy overview that shows multiple relationship managers and their location during the different weekdays (business requirement of flexible workplace and knowledge pools)
  • the vertical progress bar is mistaken for a dropdown
    • A horizontal progress bar was already under development company wide
Information Architecture and process flow

Consequently I restructured and rethought the ideal flow and looked at ways to redirect users from all possible entries with the least friction as possible. It also involved breaking loose from current assumptions and the current process steps. In the process map below you can see the colored bars, these represent persona’s journeys through the process. Below the graphic is a button where you can see the complete graphic. It includes technical points, technical question marks to be checked with the dev teams, where to include cookies, location data, sign in and registration gateways, access to branches in different language regions in Belgium (those are branded differently), etc.

Obviously there were many bottlenecks and edge cases that came out of this schema. Trying to resolve every one of them was utopian, and we handled all issues with the 80/20 rule, meaning we improve 80% of the problems with 20% of the resources, and are picky on the final 20%, as this often requires a lot more work and doesn’t benefit that many users, making the cost/benefit not always attractive.

Early wireframes

From this scheme I wireframed screens in this process for mobile apps, iPad apps, website and mobile web. I wireframed different ideas and iterated on learnings each time. These included a quick selection of the next available time slot at a certain channel, different ways of organising the “appointment”-button structurally, different ways of time slot selection, the concept of time or location prioritisation, etc.

Take into account that the processes of wireframing of mobile screens, organising user testing, making high res prototypes for testing en desktop wireframes were all intertwined based on learnings and deadlines, so not all these steps are perfectly chronological.

Presenting and defending wireframes

Every iterative round was concluded with a presentation at the Customer Experience Design Board, represented by stakeholders like App owner Mobile, App owner Desktop/Ipad, the head of UX and design, Design Team Lead and business representatives of corporate and commercial banking. During this meeting feedback was given on the process maps, wireframes, components and designs repeatedly along the course of the project. For this process, which was an exceptionally large and complex one I had 11 CEDB sessions before concluding the project.

User testing on prototypes (Agile qualitative research)

Part of the iterative process was validating the technical possibilities of ideas with the dev team and testing customer needs, desired structures and potential interface ideas through guided on-site user tests on prototyping, card sorting exercises and qualitative interviews about personal experiences with making appointments. This way we gained insights on how people experienced and reacted to certain concepts or the current flow. We did a total of 4 day-long user tests (uLabs) where we adapted our prototype with some learnings after each session. I made all these prototypes according to the brand guide and with the intended components, to give the most realistic experience to the user.

The first two days were more exploratory, the last two days were more for refining the decisions we had made from the learnings from the first two days. Especially interesting evolutions were the research and testing around putting location or time preference in the front of the process for off line appointments.

The main thing I wanted to try out is to see weekly structure and rhythm affected making an appointment. After all, many people only have availability on eg Wednesday afternoon, only on Saturdays, or they work 4/5 and are free every Friday. This led me to design a quick selection that gave people the opportunity to show “only mornings”, “only afternoons” or “only in the evening” and based on this could propose them the next available slot in their preferred channel.

The main learning here was that if we couldn’t show them an ideal slot, users did prefer to have an overview of a calendar where they could see all available time slots. There were too many differentiators between people and it was difficult to actually pinpoint what the main driver was for making an appointment. Whether it was urgency, location, or specific time period is dependant on the specific situation of the user. That form of flexibility would only be possible if you offered a smart conversational interface that could analyse the line of questioning and determine what specifically the priority of the client was.

Business limitations

After learning that most people still preferred to get a visual overview of their time slots before making an appointment, we looked at the mobile story. One of the limitations was that we were bound to 30minute time slots as some appointments covered 1h and some 1h30. We experimented with the giving the client a visually attractive screen and tried improving the visualisation of different meeting durations. Obviously this wasn’t ideal in my view. Thats why I tried a fresh design where multiple time slots of 30 minutes collapsed when selected showing you the total durations of your appointment. Eventually this feature was considered too far from the current view and thus too expensive to develop.

Other business limitations included the downsizing of bank branches with the result that customer sometimes had to drive a bit further to find a bank where they could make a specific appointment. This presented me the challenge of communicating this limitation in an acceptable way, since some customers wouldn’t be able to get an appointment at their local branch anymore. A slightly adapted version was set up for Website as some vital info included in the authenticated app wasn’t available.

The conversational interface brainstorming days

Because of the duality around the preference of time or place I decided to organise a two-day hackathon style brainstorming session where I invited a group of UX and UI designers and app owners to participate. The main goal was to see if it would be beneficial to develop a conversational interface to be more flexible towards the users needs.

Behind this was the logic that persona A would have a sense of urgency for an appointment and didn’t care about location and whether it’s on- or offline. Persona B would be very tied to the relationship to the bank employee. Offering this flexibility without initially showing intent would only be possible by “reading between the lines”.

When a user types “I want an appointment on Saturday morning” we could assume that the initial focus is on the time of appointment, when he types “i want an appointment on Saturday in my branch” we could assume there might be more focus on the location, and when he typed “I want an appointment in with my branch” we could assume the location would be most important.

The results we came up with was an intelligent interface with smart components (following the component library and brand guide) that could react to the clients questions, and thus needs. This would have been a perfect and flexible solution but unfortunately estimations and budget within the initial scope of this project inhibited us from executing on this idea.

High res wireframes

Even before the Ulabs I already made several iterations of high res wireframes and prototypes. Then iterated upon them until they were final.

Designs

with the learnings of the wireframe phases, business goals and budget limitations, user research rounds, workshops I went on to shape the final solution. The high res wireframes had been made and now had to be turned into a true design, following the pixel perfect guidelines of the brand guide (atomic design). If we used new components we had to suggest, discuss and approve them and describe them in the brand guide.

We improved the way you choose a specific bank branch in your area, added functionality to change the back branch, improved the search for a suitable relationship manager, added a quick link to select the next available time slot, a horizontally scrolling time picker and time slots for quicker navigation and less loading times while scrolling through dates, included the business logic for lower availability of bank branches. We also implemented improvements for the desktop and iPad apps bringing easier use, proposing replacement branches if yours wasn’t available for an appointment and more.

Conclusion

In the end we improved the interface, not as much or as drastically as we wanted, but within the constraints of the project and budget, while at least having a push and initial discovery for a potential more drastic change in logic.

From all features, as a project team we were glad to have successfully implemented the tough business requirements and especially the time-saving navigating was a great improvement, saving users 3-4 seconds and numerous clicks by allowing horizontal scrolling. We felt like we successfully implemented business logic (lower available bank branches) without straining the client too much (higher opportunity to select a bank branch). We added branch flexibility, and at the same time offered and promoted easier online appointments. A successful conclusion to a project where we were left without a project manager for several months due to a thrombosis.

 

 

Utilised tools:

Personas
Customer journeys
Wireframing (XD)
Presenting at Feasibility Committee
Presenting at Customer experience Design Board
Prototyping
User interviews
Card Sorting exercises
User testing
Agile component based designs according to style guide
Proposing new atomic design components
Presenting at Ready for Roll Out Committee

Category
Design, Service Design, UI design, UX design