Improving the e-banking experience
Emirates NBD Bank is a Dubai based bank and one of the largest banking groups in the Middle East. It’s also my bank of choice. But, frequently using their iOS app, some design issues started to be evident — so, I decided to work on some improvements. 1
Let's walk through the process.
The Starting Point
The current app is packet with functionality. You can do everything from the normal day-to-day operations, like checking your credit card balance, to more obscure flows, like getting a que ticket for when you're visting a branch. Not that there's a reason to do it anymore.
Unfortunatelly, with all of the power, the app comes with a lot of clunkiness and confusion. I identified the dashboard, the cards view and the transaction listing as the three sections that I am going to dissect and improve upon.
For reference, this is how the app looks now (Fig 1.).
For the three aformentioned screens, I've set some clear goals:
- surface currently obscure interactions,
- add more affordances for frequent flows,
- make them look as belonging to the platform.
Look and Feel
Let's start with the last step: making the app look good. Now, to be honest, the current app is a design mess. Some of the most obvious issues are:
- it looks like a web interface crammed into on iOS app,
- poor use of iconography (an unfortunate combination both outline, both thick and thin, and solid icons),
- inconsistent spacing and alignment of elements without any logical grid structure in place,
- no typographic planning or use of a type scale.
All of the above make it hard to scan or skim the content and it creates cognitive effort to navigate through the information presented. To improve these issues I:
- updated overall look to resemble a modern iOS 13 app,
- set up a typographic scale to help with the information hierarchy,
- made use of the wonderful typeface Frutiger (like the Emirates NBD logo) to have the look on brand,
- took advantage of the condensed variant of Frutiger and used if for number representations thus saving space in number heavy app,
- employed tools like a grid and a typographic baseline to make the information look balanced and easy to skim,
- made a new set of icons that are consistent and help with branding,
- added intuitive interactios that help the customer create a better mental model of the architecture of the app.
Without further ado, this is what I came up with (Fig 2.):
Sweet! With the looks part out of the way, we can focus on each section's UX problems and what I did to alleviate them.
A dashboard’s role is to give a bird's-eye view of the main health/performance of your relationship with the bank and to surface commonly used actions. The current one starts with a good idea, but it suffers in execution.
Before (Fig. 1):
- Both Account and Credit Card balances are shown as a sum without a clear breakdown between accounts or a way to quickly get to a detailed view.
- Account information and different promotional messages are given similar visual weight creating a poor skimming experience.
- The customization options are very limited.
- The main navigation is under a hamburger menu where usually secondary items are stored, not the prime goals of the page.
After (Fig. 3):
- Has a simple overview of what you have and what you own.
- Account and Card details are surfaced saving you taps.
- The promotional sections are separated, while being enticing.
- Customizable shotcuts.
- Has a tab bar where common customer actions reside.
The role of the screen is to show the customer at a glance the cards attached to their account. This screen serves also as a detail view of the status of the card and different actions one can perform to it.
Before (Fig. 1):
- Not intuitive that the account has multiple, distinct cards.
- Low density of information requiring multiple taps to get to it.
- Poor hierarchy of actions; all are represented with the same importance.
After (Fig. 4):
- A clear visual representation of your cards, with an intuitive navigation carousel. Taking advantage of the peek.
- Improved hierarchy of information: what’s the status of the card, what you have to pay and when.
- Quick glance at your points and other promotional activities like getting cash.
- Surfacing recent transactions for a quick glance.
- Uncommon actions at the bottom of the screen instead of hidden out of sight.
The card transactions screen's role is to show the customer the transactions attached to an account or a card segregated by monthly statements. It also serves as a jumping point for viewing more details and actions for individual transactions.
Before (Fig. 1):
- A lot of poorly used space before the actual transactions
- The fixed header makes for an even more clautrophobic transaction scanning
- Bad information hierarchy as you can't discern the importance of the data shown at a glance
- Impossible to move from current to a previous statement without going to the card view
After (Fig. 5):
- More real estate for the transactions and a header that goes away when scrolling.
- Use of interaction animation to guide the customer's sense of location within the app.
- An easy to switch between the different monthly statements.
The above work is just the first step in revamping of the Emirates NBD iOS app. But I am just an outsider. I believe that good design requires effort and intentionality. With proper design leadership, mindsets can change. That's when we, the customers, will have a better and easier experience interacting with the everyday things.
If you want to play with the design yourself, you can download my Sketch file.
If you want to send some feedback or maybe want me to look at your app, don't hesitate to contact me.
- I am not associated with Emirates NBD Bank Group in any kind, except being a client. This work was not commissioned by them and it does not reflect the view of Emirates NBD. All logos are trademark of Emirates NBD. The work is based on how the version 4.4.2 of the iOS app, available for download from the App Store in October 2019.