Here's a persona
KBC Digital appointment process
Making appointments easy
Introduction
As a UX UI Consultant, I was part of a project team that had the task to rethink appointments and the appointment process starting from the different channels.
🔍 Problem
The requirements for this project 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.
Another (business side) requirement was that the bank was closing branches and downsizing the employee base, meaning not every bank branch had experienced experts for every topic. This could mean clients could be redirected away from their own branch for an appointment.
✨ Solution
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 thrombosis.
🤔 Hypothesis
Online appointments are just as good as regular branch appointments, but the concept is unknown to most clients.
Tools
Adobe XD
Axure RP
Personas
User interviews
Card sorting
Prototypes (in XD)
Customer journey maps
User flows / architecture
Team
1 UX UI designer
1 Business process manager
1 Business analyst
1 IT analyst
1 IT process manager
My Role
Wireframing
UI design
Presenting at Feasibility Committee
Presenting at "Customer experience Design Board"
Presenting solution for "Roll-out committee"
Workshop organization
Workshop facilitator
Timeline
Overall: 11+ months
My Design Process
Analytics
We started with a data report that analyzed our site visitor behavior. Through analytics, page bounces, and heat maps we were able to draw conclusions about user behavior.
Personas
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.
This is a customer journey map from the project
Customer journey maps
After validating the personas with some stakeholders I built our pain points overview and set up customer journey 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 into the client's actual mood or experience over several touchpoints, and not just what his goal and emotion are in the current interaction with the process. He might start on mobile, continue on iPad, and finalize on desktop. This cross-touchpoint interaction map is way more common today than it was before 2007, with only the pc as a digital touchpoint.
What were the pain points and how we solved them:
Problem: "The entries to this process are plenty and not always easy to find"
Solution:
We covered entries and made mockups for improved access on all channel pages, apps, contact pages, product pages, and website homepages.
P: "High number of users leave the process before completing"
S: This problem is linked to the multiple reasons below
P: "It’s unclear whether to choose “my contacts” or “make an appointment” for a certain question"
S: We solved this by reformulating the contact flow question into better wording
P: "Online appointments are easy but not well adopted, research shows people are open to this, highlighting and promoting should help with awareness.
S: We show office appointment times and online appointment times next to (on top of) each other with horizontal scrolling (adding gestalt-effect) increases the visibility of available times slots, promote online appointments, and increase awareness of this option without being intrusive
P: "Notifying the client that “an expert is not available at their branch” (business requirement)"
S: We found a good solution to communicate that the client should select another branch for his offline appointment
P: "How to change and choose different branches when you are not making an appointment near your own branch (option didn’t exist before)"
S: We created a "branch finder" to solve this issue, and is linked to the previous point
P: "Selecting the proper time block isn’t clear"
S: We improved the comprehension and readability of time slots
P: "Comparing agendas for relationship managers (business clients) should be easier"
S: We created an easy overview that shows multiple relationship managers and their location during the different weekdays (business requirement of flexible workplace and knowledge pools)
P: "The vertical progress bar is mistaken for a dropdown"
S: 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 the persona’s journeys throughout the process. 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.
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.
A sample from the large architecture map
Early wireframes
From this schematic, I wireframed screens in this process for mobile apps, iPad apps, websites, 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 organizing the “appointment”-button structurally, different ways of time slot selection, the concept of time or location prioritization, etc.
Take into account that the processes of wireframing mobile screens, organizing user testing, and making high-res prototypes for testing in desktop wireframes were all intertwined based on learnings and deadlines, so not all these steps are perfectly chronological.
Presenting and defending wireframe
Every iterative round was concluded with a presentation at the Customer Experience Design Board, represented by stakeholders like the App owner Mobile, App owner Desktop/Ipad, the head of UX and design, the 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 over 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
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
Qualitative interviews about personal experiences making appointments
This way we gained insights into 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.
Agile Qualitative Reserach
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. Particularly interesting evolutions were the research and testing around selecting location or time preference as a first step of the process for offline appointments.
The main thing I wanted to try out is to see if making an appointment is affected by weekly structure and rhythm. 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 to them the next available slot in their preferred channel.
This is how we tested preferential time of day appointments
Learning from User testing (uLabs)
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 pinpoint what the main driver was for making an appointment.
Whether it was urgency, location, or specific period is dependent on the specific situation of the user. That form of flexibility would only be possible if you offered a smart conversational interface that could analyze the line of questioning and determine what specifically the priority of the client was.
Here's a good illustration of the new progress bar at the top of the page, plus the initiation of appointments starts with "postal code" and "time of day" preference choice (sorry for the low resolution)
Feasibility limitations on the solution design
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 30-minute time slots as some appointments covered 1h and some 1h30. We experimented with giving the client a visually attractive screen and tried improving the visualization of different meeting durations. Obviously, this wasn’t ideal in my view. That's why I tried a fresh design where multiple time slots of 30 minutes collapsed when selected showing you the total duration 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 customers sometimes had to drive a bit further to find a bank where they could make a specific appointment. This presented me with 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 the Website as some vital info included in the authenticated app wa available.
The conversational interface brainstorming days
Because of the duality around the preference of time or place, I decided to organize 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 toward the user's 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 was on- or offline. Persona B would be very tied to the relationship with 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 Solution
The result we came up with was an intelligent interface with smart components (following the component library and brand guide) that could react to the client's 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 this idea.
Process map of the conversational interface
UI Design
With the learnings of the wireframe phases, business goals, budget limitations, user research rounds, and workshops I went on to shape the final solution. The high-res wireframes had been made and now had to be turned into a proper design, following the pixel-perfect guidelines of the brand guide (atomic structure). 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
Added a horizontally scrolling mechanism for quicker navigation and less loading times while scrolling through dates
We Included the business logic for the 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
We were successful at improving the appointment process, 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 potentially 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 thrombosis.
Learnings
I've really enjoyed following the entire UX design process during this process and taking time for workshops and ideating the different ways to make an impact.
I grew a lot as a designer, especially in taking ownership, showing leadership, and dealing with difficult project environments as our project manager fell sick for 4 months during this project.
One thing I would've loved to be more successful in was building the conversational interface, which could have been possible with AI.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.