Banking Digital Product

Banking
Digital Product

Overview

Role

Banco Bisa started a new Innovation Program focused on digitizing and creating easier, simpler, and intuitive products.

The goal of this project was to design two digital solutions: Online Savings Account Opening and Online Credit Card.

Due to a non-disclosure agreement with the company, some information shall remain confidential along the process.

UX Leader

User Research, Interface Design, Prototyping, Testing

November 2020 - February 2022

Background

Bisa Digital Program was born as the in-house Innovation Center for Banco Bisa, one of the biggest banks in Bolivia. The goal of the program was to create a wide range of digital products focused on giving the clients the best user experience possible.

Working under Agile Methodologies, our structured consisted of four different agile cells: UX, Digital Marketing, Online Savings Account Opening (OSAO) and Online Credit Card (OCC). I led the UX cell, which gave transversal support to the remaining three cells: Digital Marketing, the OSAO, and OCC.

During the first phase, our main goal was to design the interface for both, the OSAO and OCC cells.

My UX-Process

There’s not a unique UX Process. It really depends on the type of product you’re designing. Different projects require different approaches. Nevertheless, Design Thinking is a great approach to problem solving in order to create or improve products. This process has five stages in it: empathize, define, ideate, prototype, and test.

In my personal UX Process, I modified the classic Design Thinking process, coming up with a four-stage hybrid process:

UX-Process │ Discovery & Empathy Stage

Service Blueprint

The first thing that we did was use a Service Blueprint to map out the entire process and understand what it takes for the bank to:

Create a savings account (OSAO cell)
Get a pre-approved credit card (OCC cell)

What is a Service Blueprint?

A Service Blueprint is a diagram tool that displays the entire process of service delivery, by listing all the activities that happen at each stage, performed by the different roles involved.

Using this tool gives us a detailed overview that helps us identify the following insights:

The pain-points that the user may encounter along the way
Activities that are waste or duplicated
Process stages that can be improved
Processes that can be optimized
Manual tasks that can be automated or digitized

Now that we have a clear understanding of how many tasks need to happen for the bank to successfully open a savings account or request a credit card, we can identify problems that can be solved; we can think of solutions to create great user experience.

This is the Service Blueprint that we used to thoroughly understand what needs to happen to achieve each of the cell’s goals. In this example, we can see all of the tasks to get a pre-approved credit card, for the Online Credit Card cell.

UX-Process │ Define Stage

Now that we mapped out the tasks and chose the trends that we wanted to follow, it’s time to start defining our current problem and come up with potential solutions. Due to national regulatory constraints, the onboarding process for both cells (OSAO and OCC) must include several questions, which led to a very long and boring process.

Problem statement: The onboarding process to create a savings account or obtain a pre-approved credit card is long which leads to a high rate of abandonment.

Based on this definition, we needed to come up with ideas to solve this issue.

UX-Process │ Ideate & Prototype Stage

Now that we defined what the problem statement is, we need to start coming up with ideas to solve this use. The main challenge that we faced was the many regulatory questions that needed to be asked in the onboarding process.

UX Trends

We needed to create an interactive, easy, and intuitive process to make this happen. That’s why we researched for UX Trends that could help us succeed.

There are many trends every year; the digital experience is constantly changing. Among the many UX trends, we chose four tendencies that could make the onboarding and overall experience better: Illustrations over images, micro-interactions, storytelling or UX Writing, and minimalism.

Illustrations

We chose to use illustrations over images not only because they add a pinch of style and artistic harmony, but because they can explain complicated concepts of your product. You can try explaining an instance or an action with words and information, but an illustration is a very powerful tool that can influence the user’s decisions. On the other hand, humor conveyed in the illustration constitutes its significant part: it can motivate people to perform certain actions.

Micro-interactions

They are design elements and their purpose is to delight the user by creating an engaging moment that is welcoming and, let’s say it – human. In the UX/UI world, micro-interactions are the powerhouse when it comes to communicating with the user

They improve navigation
They make the user experience much more rewarding
They direct users’ attention
They make your product more emotional
They make it easier to interact with your site

Storytelling - UX Writing

I strongly believe that one of the most underrated practices in the user experience world. It’s the act of thoughtfully crafting every copy in your digital product, from CTAs, product descriptions to copy used in chatbots and voice interactions, so that language feels natural and conversational. Communication is crucial, especially if we want to have a human interaction with the end-user.

Minimalism

Applying a minimalist take on design can actually help to improve a user’s experience by reducing the distractions surrounding their ability to complete a task or make a decision. Cutting out steps in the process to make a task simpler or faster goes a long way in creating a positive experience.

Wireframes

By using illustrations, micro-interactions, and storytelling, we were able to design a user-friendly process, including all of the regulatory questions that were required. Before even designing the low-res wireframes, there were certain guidelines that addressed our problem statement:

We grouped the questions into coherent steps, creating a flow that is easy to follow.
We used micro-interactions in order to improve the navigation and make the UX more rewarding.
We incorporated illustrations to portray complicated concepts and make the interface friendlier.
We communicated with very concise phrases and used easy vocabulary. We wanted to have a conversational communication to make our process human
We simplified each screen as much as possible. By reducing potential distractions, the tasks were much simpler and the process was faster.

Here are some of the first wireframes I designed to map out the process:

Design System

In order to have a unique brand identity, I coordinated with the Digital Marketing Cell to create a personalized graphic line, which included custom-made icons and illustrations. Once we approved the graphic assets, I created the program’s first design system. Using reusable components made it much more efficient for the development team to develop.

It’s also important to highlight that the design system was designed using the Atomic Design methodology. If you’re not familiar with it, here’s a quick overview on it.

Atomic Design is a methodology seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy. It’s called Atomic Design because its very idea is founded in that of Chemistry, and the study of the composition of matter. The universe is made up of a fixed set of atomic elements. These elements are the building blocks of everything around us.

UX-Process │ Test & Validation Stage

Pilot Test

For the last phase of the UX Process, we needed to test our design hypothesis and truly see if it worked or not. Before launching the two new digital products, we had a series of pilot tests with different users.

The main goal was to get truthful and honest feedback, so we led users to experience our digital products without telling them what to do, or what to expect. The pilot tests were conducted via Microsoft Teams and were 100% digital. We had permission to record the sessions, which helped us identify some pain points we didn’t see before.

This exercise is crucial if you want to improve with real-time feedback. I highly recommend doing this before product launch, as it helped us improve and optimize some parts of our process.

Launch

After making some changes with help of the pilot test’s feedback, we were ready to launch the product. Because this was our first MVP, we launched the new products only to a targeted segment of clients.

Here are some of the final designs:

Key Takeaways

Understanding the product

It was very important to take a deep dive and fully understand the internal processes that were necessary to understand what it takes for the bank to:

Create a savings account (OSAO cell)
Get a pre-approved credit card (OCC cell)

Rather than jumping into the ideation & prototype stage, we put a lot of efforts on the first stages of the UX Process.

Using UX Trends to simplify your product

In order to build a great user experience, we needed to make the onboarding easy. By grouping certain questions into coherent steps, we created a flow that wasn’t difficult for the user to fill out. Using UX Trends such as Illustrations, Micro-interactions, UX Writing, and Minimalism, we were able to create an intuitive and simple experience.

Communication with Development Team is Crucial

In order to create a great product, teamwork is a must! Constant communication with the engineers to understand the viability of certain design parts is important. Not everything you see on Dribbble or Behance is realistic, and it’s important for us, designers, to meet halfway with the development team. Yes, User Experience is important, but we also need to know how prioritize certain aspects of the product.

Testing never stops!

Testing and feedback are always welcome. By constantly monitoring the User Experience we may be able to find blind spots that we may have not seen before. Testing, and using tools such as Customer Journey Maps, will definitely help us optimize our products and services