Main_screen_top_1

Concept

Digital Banking app case study

UX & Design, Reinventing the “Caixadirecta” app

Discovery

If I had the option, I would never visit a branch and I would settle all issues exclusively through online banking. It’s comfortable and saves me a bunch of time.
But there is still a blot on the landscape: every time when I want to view my payment history in my account, I can’t find it quickly. It’s because navigation consists of 24 sections and
the banking dashboard completely confuses me.
main_2

The Problem

I took the initiative of redesigning Caixadirecta, the online banking app of a Portuguese bank, which is an app I use regularly to check my account status and payments. My redesign isn’t a complete visual overhaul, but some changes which I think will increase the engagement of the user.

 

In my opinion, banks are acting too slow in digital. On one hand, they could invest a lot of money, but on the other hand conservatism and bureaucracy seriously hamper. It seems like some of them still can’t believe everyday more people use mobile apps or even “worse” — want to use a tablet or wearable for banking. Maybe that’s why not every bank has mobile banking or gives you full functionality through it.

 

Of course, there are some innovative banks, and they have omni-channel digital banking, but another problem occurs — lack of usability.
first_1

I start looking into the first screen of Caixadirecta and straight away I can see there’s too much information. I don’t need all this content. This is a “busy” screen.

1 — Screen of the app currently live
Lots of information, even a share button on the top. Also, it hasn’t been optimised for iPhone 6.
2 — My sketch
On this screen I try to minimise as much as possible, just adding the content relevant to the user.
3 — My final design
My aim was to reduce the noise around and focus on what is really important: login for companies / personal account. I have also added the geolocation, so this way we can easily find the closest branch.

Wireframes

After the goals were defined it was time to create the wireframes.
wireframes_1

Prototyping

Creating Intro Page Of Banking app

The intro page has to be helpful;

 

Branches & ATMs locator
First of all, let’s make sure that our customer can easily find the nearest branch, ATM or even partner deals without login. And let’s ensure we are giving the best branch option by providing closing times and line wait times directly on the map through nice markers. It will allow our bank to distribute traffic between branches and make our service more pleasant for customers and employees.
logoin

Designing Balance And History Dashboard

So, you are logged in. In my dashboard i have some simple design to make it easy to use:

 

1. Balance statement

 

2. Monthly income

 

3. Monthly expenses

 

4. Money available

 

5. Category applications

 

6. Latest transaction history

 

7. Quick Access menu for every transaction

 

Now 10 seconds is enough to see clearly your balance statement, monthly income and expenses. Another 10 seconds and you have clear understanding of safe-to-spend sum in the category chart. The red and green colours help to easily identify the money in and out.

 

And what about transactions? You don’t need an hour to study navigation and browse sections, it’s all here. Check your latest transactions list, use autocomplete search to find an exact transaction or easily sort them to see only incoming or outgoing transactions.
dash_1

UX Design Of Omni-Channel Digital Banking

And one more thing, it’s important to ensure an omni-channel solution for digital banking. Users must get access to it through any suitable gadget. At this moment, we are talking about desktop devices, tablets, mobile app development and wearable.
watch_all

NEXT CASE

Host and Organising, brand, marketing
Close ()