Transforming Bank Al Etihad's User Experience

Designing a Modern and Effective User Experience

Getting to know the audience

The most important part of UX design is always understanding the user. This is especially true when you are designing for people in a different country. 

So, naturally, our first step was familiarising ourselves with the way banking works in Jordan. If we were going to go above and beyond with our UX, we needed a confident understanding of Jordanian banking, and what users want, need, and expect from their banks. 

Through workshops, surveys, and interviews, we got a clear picture of the processes and expectations involved in local banking, and the ways they differ from the West. This research gave us a solid foundation to create a user-focused and region-specific experience.

Working towards a flow state

When designing the new interface, our goal was to elevate the user experience to something that felt smooth, effortless, and pleasing to use. 

A central component in creating this type of experience is the concept of “flow state”. 

A “flow state” is a state of mind also known as “being in the zone” – where someone is energised and focused on the task at hand. It is characterised by being fully involved in the process and enjoying it. 

When crafting an experience, we want to help the user achieve this flow state, letting them accomplish their desired tasks in a way that is intuitive, engaging and rewarding. 

Designing a fluid, effortless experience

One of the first things we set out to do was to streamline the user flows in the banking dashboard. We found that there were redundant elements that were causing friction in the app’s usability.

For example, when users wanted to take an action such as making a payment, they had to fill out a form that was spread out across multiple pages. This kind of sprawling user flow can make a process feel longer and more complicated than it actually is. 

We solved this problem by finding areas where we could condense the process, combining multiple steps into single elements.

This accomplished a number of things:

1. Reduced the amount of disruptions to the user’s process. 
   • Achieving a flow state requires the user to be immersed in, and focused on the task. By reducing the pages they had to click through, we cut out interruptions, allowing a greater level of focus.
2. Reduced the complexity of the tasks 
   • Part of the problem with extending a process across multiple pages is that it creates an unnecessary degree of complexity. Given that many of the tasks were fairly short, the added step of clicking through screens made the task feel longer and more difficult. 
3. Gave autonomy to the user.
   • Two key elements of flow state are focus and concentration on the present and a sense of personal control or agency over the situation. 
   •  By presenting a process as a complete element, with all the forms in front of them, rather than spread out across pages, it presents the user with a choice. Instead of going through a process in predefined steps, they can approach the steps in any order they want. 
   • Additionally, providing them with a choice requires them to focus on their decision. So, the user is more actively engaging with the interface.

Micro-interactions

Another important aspect of our UX optimisation was implementing microinteractions into the dashboard.

In doing so, we wanted to give the interface a sense of being “alive” – in the sense that it responds to the user, making it more enjoyable to use.

But aside from being fun, the microinteractions serve another essential purpose. By seeing the UI elements essentially “reacting” to them, the user can be certain that the action they’ve just taken has been registered. This can help to reduce any potential confusion, uncertainty, or stress.

As you can imagine, these emotions are quite a big deal with online banking. When it comes to handling money, people want to feel safe, certain, and in control. 

The Atomic Design System – Composable, Scalable, Flexible

Perhaps the most crucial aspect of this project was the atomic design system.

Given the scope and specific challenges of this project, we opted to use an atomic design system. 

This accomplished three crucial goals: 

1. Accelerating our design process for faster delivery
2. Speeding up Bank Al Etihad’s internal design and development
3. Equipping them with an agile design system for the future

Streamlining Design & Development

We crafted a library of components using Bank Al Etihad’s brand guidelines as well as design and typography stylesheets.This ensured that all iterations maintained consistent branding. 

Additionally, we built fully interactive prototypes for every component of the design system. This allowed us to quickly preview how elements would look and feel on the live site. With the interactive prototypes, we had a lot of flexibility when it came to conceptualising the user experience. We could quickly create different iterations of a page to explore different user flows and assess the effectiveness of the components.

Results 

The project yielded significant improvements to Bank Al Etihad’s user experience. Post-launch monitoring and surveys revealed a 33% increase in user satisfaction as well as a 20% increase in engagement stemming from the microinteraction implementations.

A Foundation for the Future

Our atomic design system not only enhanced the design process for our project but also ensured more efficient design workflows for the future.
Their new composable design system has given them a drastic increase in flexibility and agility. Equipped with an arsenal of finalised UI elements, Bank Al Etihad’s design-to-development workflow is now 3x faster and they are able to create interactive prototypes 4x faster than before.