Reinventing a banking user interface

In Colombia, many people still prefer to visit bank branches in person to conduct their banking business. However, these branches can get crowded during the day, leading to long wait times. To address this issue, Bancolombia has introduced a new shift scheduling platform that allows customers to book appointments in advance, saving them time and ensuring they receive priority service.

Supported by Bancolombia

Scroll down
Bancolombia Branch

The challenge

In 2020, Bancolombia introduced its shift scheduling platform, which initially functioned effectively during the pandemy. However, a year later, more users returned to the branches and they encountered difficulties in scheduling their shifts. Numerous complaints arose regarding prolonged waiting times at branches, with users expressing confusion over the purpose of booking appointments. Consequently, we faced a new challenge: reinventing the service.
 

  • Digital Tools: Figma, Miro.
  • Main design toolkit: Journey mapping, brainstorming, focus group, co-creation, prototyping, blueprint. 
  • Team: Manuela Mejía, Mayra Ramirez, Valentina Correa and Manuela Rojas.
  • Role: Ux designer.
  • Time: Six months.

The main goal

Background

Bancolombia is considered one of the most innovative banks in Latin America and one of the companies with the best reputation to work. More than 10.3 million customers in Colombia use its digital services. In 2022 the company was recognized as the best digital bank in Colombia by Global Finance. The enterprise was awarded the Best Online Portal/User Experience Design in the country.

Branch

Process

Due to the regulations and intellectual property of the company, I will present the design process in a general way.

Methodology

Trends

Simplicity
Simplicity
Personalization
Personalization
Experience
Experience

Research

First, to identify the problem, we directed co-creation sessions in 5 different cities: Bucaramanga, Barranquilla, Cali, Bogotá and Medellín. We invited customers, advisers and assistant managers and we divided the sessions into two phases: phase one, understanding the user needs and main problems of the platform. Phase two: create solutions and propose what the ideal service would be.

“We are having a lot of problems with the service, the bank should find a way to align all customer needs without affecting us”
Assistant manager
“we are not ready to meet a specific time promise which makes the customer angry .”
Adviser
“I would want to have the control over the service and be informed about everything before going to the branch”
Customer
Focus group
Focus group
Focus group

The users agreed to be recorded.

Analysis of concepts and requirements definitions

Based on these sessions, we analyzed all the comments made in each city. We found five pillars for the experience:


Pillars

Planning of Sprints and releases

With the strategy team, we defined the work plan and the minimum that the service should have in each release based on the pillars


MVE

Service overview

Due to the intellectual property of the project, I can't show the Service Blueprint, then I will present the main steps of the service:


Steps

Collaborative design development

Process Mapping and Functional Design

Wireframe
Wireframe
Wireframe

We designed the minimum viable experience (MVE) through the ideal service journey map. As a team, we started to define the interactions.

Throughout this process, given the intricate nature of the service, we designed multiple process flows and wireflows tailored to each stage. In the forthcoming section, I will delve into the overarching framework of three primary stages of the service while the user interacts with the online platform, elucidated through simple user flows.

The first flow presents the main menu of the platform and how it connects with the other user flows.

Developing a new booking was a critical process as users needed to grasp the significance of this feature and its positive impact on branch visits. Thus, we aimed to simplify the user flow as much as possible. While this overview provides insight into the flow, it's important to understand that all microinteractions, errors, and decisions are considered in a comprehensive flow which is property of Bancolombia.

Users require the ability to manage shifts after creating them, as well as to activate shifts before arriving at the branch. To address this need, we developed a flow enabling users to edit, delete, and monitor the remaining time until shift activation.

Following shift activation at the branch, users typically need to monitor their shift number on a TV screen and wait to be called by an advisor for their appointment. Hemce, this user flow demonstrates how users can conveniently monitor their shift on their phone, eliminating the need to wait at the branch and ultimately saving time while enhancing the user experience.

Usability testing

After the creation of the wireflows we tested the design with real customers of the bank branches, here is an overview of the findings:  

- In contrast to the previous booking system, the perceived advantage of having more comprehensive information aids decision-making and alleviates uncertainty during waiting periods.

- The descriptions of available actions are now clearer, enhancing user understanding.

- With the appointment scheduling service, an anticipated wait time of 15 to 20 minutes after activation is expected.This functionality significantly enhances user time management capabilities.

- Users also experience a sense of reassurance knowing that the chosen destination will be available to fulfill their selected need.

Design critique with experts

After conducting various tests with different user types, we proceeded to conduct a design critique involving experts. These experts included UX, UI, Service, and content designers from various departments within Bancolombia, alongside design managers and team leaders. Their input was instrumental in refining the final details before handing over the project to the development team. 

Some of the changes discussed during the critique session include:
- Adjusting certain messages presented during the user experience to eliminate confusion.

- Rearranging components to ensure compliance with accessibility guidelines for screen readers.

-Incorporating decision diagrams for instances where booking availability is limited.

- Modifying terminology to provide more accessible explanations, such as "Pregnant person," "Person over 60 years old," and "Person with Disability."

- Expanding the scope of microinteractions within the map locator interaction.

Previewing our final concept

Final video

Our redesign aims to emphasize the benefits and opportunities associated with booking shifts at branches. Additionally, we sought to tackle concerns stemming from comments that had adversely affected the company's reputation. 

Create and implement

Now, we are in the development phase. We are a group of professionals who are improving the user experience more and more. Our main metrics to qualify the performance and success of the service are: satisfaction, success, effort and loyalty.

Check the website here


Image

Learnings

Designing something impactful for a company involves a blend of structure and insight. Service design emerged as the perfect fit for our challenge, serving as the cornerstone to immerse ourselves in the context and understand the core issues. However, I believe it's crucial to complement service design with interaction and visual design. This holistic approach enables us to unearth and address problems systematically and with meticulous attention to detail, ultimately paving the way for sustainable solutions.

If you can, try to follow the complete design process.

Next steps

Review and monitor: Qualify the performance and success of the platform.

Back to Home
Next project