The Way Digital Banking Interface Should Work / by Gavin Lau

UX Design Case Study: Reinventing Online Banking For Millennials

In fact, banks are acting too slowly in digital. On the one hand, they can commit to it a lot of money, on the other — conservatism and bureaucracy seriously hamper. For example, today it seems like they can’t believe that someone use smartphones and even “worse” — want to use a tablet or wearable banking. Maybe that’s why not every bank has mobile banking or gives you full functionality through it.

Of cause, there are some innovative banks, not so much but they exist. And, yes, they have digital banking, but a bigger problem occurs — lack of usability. We ask people about their most pleasant digital experience, and no one remembered online banking. Only several finance services like Mint and Moven appears. Why is it so?

Banks have their huge budgets and are able to get better UX experts from market to fit their products, but we don’t see encouraging results. Maybe we look at a wrong bank. Anyway, we decide to offer you our team vision of digital banking as it should be for touch screens. Such, that we would be happy to use by ourselves.

Let’s start banking experience reinventing from small research and see some real people pains about banking. Twitter can be helpful to discover that:

 In Twitter there is a lot of pain about banking

In Twitter there is a lot of pain about banking

Next let’s find out what industry experts think about ideal banking. To do so, we need some time and Slideshare. There are plenty of presentations how digital banking should work. We see that future banking has to be based on 7 key principles according to experts:

1. Personalization

2. Transparency

3. Self-service

4. Mobile first

5. Simplicity

6. Aesthetic

7. Holistic

Ok, we will take this into account and rely on it while developing strategy and architecture. Let it be key factors set KPI’s and to check the quality of our solution strategy.

Now we can analyze competitors to find out the list of banking products and possible online banking functions.

 Main problem of all banks is too complex and frustrating navigation

Main problem of all banks is too complex and frustrating navigation

Believe us, if you will try to figure out how the stuff works through 2000 sections of navigation in 20 banks it can drive you mad. But we did it for you, so don’t be afraid and keep reading.

We analyzed many features, but we need something more emotional. Something that will make customers love our online banking, inspire them, and enjoy the experience. Let’s find what their passions truly are. Did a few interviews, found some polls and voila — we know their needs.

 And do you know your customers passion points?

And do you know your customers passion points?

Great. We are almost ready to deliver the delightful user experience. We are millennials, so we will build a solution for millennials. Clarifying all typical characters and drawing some user storyboards. We need to feel our customers, walk in their shoes.

 Knowledge of psychology is your advantage

Knowledge of psychology is your advantage

Now let’s identify red route tasks, we have to understand what people wait from digital banking, how they gonna use it to solve their problems. This is key scenarios that we must ensure the maximum speed and simplicity.

 Identify priority scenarios

Identify priority scenarios

So that’s it. We know our business needs, KPI’s, features list, as well as our customers’ pains, passions, and needs. Now we will put it all together on the User Journey Map. It will help us to generate the path of ideal banking user experience.

 This one is really hard part, we have our own methodic

This one is really hard part, we have our own methodic

And the final step of strategy development is to mapping interactions. Now it is clear how our customers will use the product and fulfill their needs.

 You have to achieve clear vision of how it should work

You have to achieve clear vision of how it should work

So, it’s time to convert all of our insights into information architecture and create wireframes. Prototypes will help us to test usability and get first feedback. After corrections, we are ready to design a user interface.

 Wireframes are schematic screen blueprints that show skeleton of next interface

Wireframes are schematic screen blueprints that show skeleton of next interface

Finally, it’s time to design some cool staff.

 Designers usually use same tools, but result totally differs

Designers usually use same tools, but result totally differs

Our intro page has to be helpful without authorization. So, we decide to put on it:

1. Sign in inputs

2. Bank contacts

3. New user form

4. Branches & ATMs locator

5. Bank products promotion

6. Currency converter

7. News feed

 

Intro page

First of all, let’s make sure that our customer can easily find nearest branch, ATM or even partner deals without login. And let’s ensure branch choosing by providing time until closing and line waiting time 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.

You are likely to browse your app store with the aim to find something interesting, isn’t it? Imagine if it could be possible in banking. Simply enjoy banking product cards browsing and choosing one that fit your needs.

Of cause our users can easily contact the bank in case of some problems, or if they just want to become customers.

You are going abroad or have an international business? Cool, you can see currency history and current rates on our intro page, and you can instantly count up using integrated calculator.

News feed on intro page? Why not, maybe there is a new branch opening near you.

Intro page helps without authorization

So, you are logged in. We have some cool stuff for you:

1. Balance statement

2. Monthly income

3. Monthly expenses

4. Monthly and daily available

5. Category budgets

6. Latest transaction history

7. Quick Access menu for every transaction

 

 First page

First page

10 seconds is enough to see clear and visible balance statement, monthly income and expenses. Another 10 seconds and you have clear understanding of safe-to-spend sum in category chart. This includes the amount that could be spent this month (bill payments already subtracted) and the average amount that could be spent any day of this month. By the way, we don’t like budget pie that every bank uses. Because it’s says nothing. Who cares what my budget percentage is spent on food, more important is to know how much I can safely spend on it right now. So, if you saved previous days budget, a daily available sum will increase.

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. Fast slider-menu for each transaction allow to find similar transactions or make back payment in one-click.

Ready to find more? You will like our short and intuitive navigation with nice icons.

 Financial status on a first page

Financial status on a first page

That’s not all you can get from our banking first page. There are more helpful features:

1. Multi-account and Multi-cards support

2. Quick payment menu for every account

3. Sorting throw category

4. Easy new account opening

5. Access to saving goals

6. Advanced budget management

7. DoD and MoM expenses statistics

 More functions on the first page

More functions on the first page

You can use an endless amount of accounts and cards in our system. Just click on your account to get quick access and switch between accounts and cards (including enterprise accounts).

Wonder your overall account statement? Simply choose «All Accounts» to see overall balance, budget and transaction history. Now you don’t need to spend time in a branch because you are able to add new account right from your sofa.

Quickly access payment form through the same slide move. The system will automatically choose a selected account when creating a payment. You can also send your payment data to friends or service providers in seconds. In the edit menu, you can rename your account, set notifications, transfers and ATM cash out limits.

Selecting a certain category in the budget chart, will filter only transactions of that category in the main window. Do you need advanced budgeting? We have some. It’s included detailed Day-over-Day and Month-over-Month expense statement, budget restrictions, saving goals setting and budget comparing with your average bank user of your type.

 Multiple accounts and cards on one page

Multiple accounts and cards on one page

Ready to go further? If you remember, our customers pay bills and transfer money as a second popular scenario. So, we will deliver it to them. Our three clicks payments will include:

1. Instant access to popular payments

2. Popular payments automatically defined

3. Predefined default bills

4. Private advises from bank assistant

5. Access to video advisory

6. Regular payment reminder

7. Transfer fees

 Payments page

Payments page

First, what you will see, is your favorite payments. Just logged to pay your bills, you don’t have to search them. And you are free to add any transaction to the favorite list manually or it will be added automatically if the payment was repeated several times.

Every bank has predefined payments templates. Our instant access to popular payments have clear icons and allows to make most common payments in 3 clicks. And if you need to find billing account really fast? Simply use autocomplete search.

Of course, you are able to get full information about fees for different payments and transfers.

You will be happy to hear that our system remembers your regular payments and reminds if you forgot to make one.

Don’t be afraid of troubles, because private advisory is always here to help. Customer-centric touch will provide personalized assistance in making or setting payments, financial plans, and goals through chatting and face-to-face remote video advising. The private advisory system also includes notifications and promotions to inform and engage users.

 Access to your favorite payments in three clicks

Access to your favorite payments in three clicks

 Categories, templates, notifications and personal advisor

Categories, templates, notifications and personal advisor

Imagine if you can send after party debt to your friend in 30 seconds. We are sure that it has to be real. We put there:

1. Card-to-card transfers

2. Domestics and international transfers

3. Transfers to Mail, Facebook, Twitter contacts

4. Top up from another bank card

5. Clear transfer fee

 Money transfer page

Money transfer page

The short form allows to make card-to-card transfers clear and fast. You will see instantly what the transfer fee will be. On the same page, you can top up your card from your another bank card.

Most advanced transfer features allow to import your Facebook, Twitter, Gmail, iCloud contacts and choose any recipient right from the contact list even not knowing their payment data. Just send funds to them, and they will receive simple instructions how to get it. Isn’t it awesome?

 30 Seconds to Mars? No, to payment!

30 Seconds to Mars? No, to payment!

Banks not only about balance, history, and payments. The average bank can offer up to 100 different products. So, how to show them all and engage the customer to use them? We have the solution:

1. The online marketplace instead of a list

2. Autocomplete search

3. Offers separation by category and purpose

4. Image based Offer Cards

5. Tailored and TOP used services

6. Social sharing

7. Community support

 Banking marketplace

Banking marketplace

We rethinking banking products promotion through Card UI, as a modern online marketplace which is friendly and familiar for every millennial. Self-service instead of branches and consultants, improve knowledge of financial products, encourages exploration and saves time to costumers.

Primarily, you will see specially recommended and your profile fitted banking offers. They can be added automatically by the system or picked manually by your advisor. We believe it will drastically increase your engagement and knowledge of the bank capabilities.

Let’s make your bank more social. Ask for help from people like you in the banking community, share your experience about bank services, explore actual topics and feedbacks from social networks.

Enjoy future bank transparency and check social proof of service quality. Add comments to the services, share your feedback. You can also spread the word about public products to your friends in social networks.

 

Why not enrich banking experience with integration into social context?

 All bank products at a glance

All bank products at a glance

At last watch this video if you want to see our concept in motion:

And one more thing, it is incredibly 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 and wearable. 57% of smartphone owners have used their device to do online banking in the last year in US.

 iPhone banking

iPhone banking

 Apple Watch banking

Apple Watch banking

We are not a bank. We are user experience design agency — uxdesignagency.com. We are architecting UX design in different industries, and this is our humble vision of online banking that it should be. Thank you for your time and attention.

 

 

 

Source: https://medium.com/@uxdesignagency/the-way...