With the number of mobile banking users increasing rapidly, banks need to focus on their mobile strategy or risk losing customers to competitors. Mobile banking follows vastly different design principles from desktop banking; in this blog I will discuss the design patterns required to create an optimal mobile banking app.
Money transfers are a commonly-used feature, and should be part of a mobile banking app.
On most websites, the transfer option has a dropdown menu of account names from which to select. On mobile devices, however, these dropdown menus would be cluttered if they displayed the kind of information they do on desktop, such as account name and number.
Instead of using a dropdown menu, a simpler alternative is to implement a wizard flow, which splits up the process onto different pages, and displays users’ current status in the process with a progress bar.
The main drawback of the wizard flow is the perception it requires an increased number of user taps to navigate through the process. However, the number of taps is often similar to dropdown menus; moreover, the merit of the wizard flow is in its simplified screens. Users can focus on what’s required immediately, and not be overwhelmed by having account selection, amount transferring, and the memo field, all available on one long screen.
Naturally, caching often helps optimize page load times. More interestingly, you can also try to use split views instead of creating completely separate pages in this flow in order to speed up load times.
For a real-life example of a banking app with a great wizard flow design, check out the ANZ Banking app.
Group Related Features
Mobile users have limited time: they often open an app to perform only one function. Avoid potential confusion by grouping related features together. For example, a Pay page could host three functions: Pay Another Account, Transfer, or Pay Bills. In this case, it makes sense to users: it’s all money going out.
This contrasts banks’ usual method of grouping services based on function. If you’re designing for a bank, you need to start considering how the consumer thinks, and not how the service is offered. Don’t group features according to department; group them together based on what the consumer is using it for, and what the consumer is expecting.
One applicable method to speed up the grouping of related features is to set artificial restrictions. Steve Jobs made it mandatory that users be able to navigate anywhere in the iPod within three clicks. Similarly, when a customer comes into the app, and they could only do one of three things, what would these three things be?
Show Real Objects
Security is always on users’ minds. Users don’t always understand the measures we take to guard their information. Instead of overwhelming them with technical information and data (which might do little more than annoy them), it’s preferable to use real images and photographs in order to set their minds at ease about security, as well as enhance their retail experience.
For example, showing a photograph of a credit card and customizing the digits to the user’s is a great idea to enhance their experience. When users input their PIN codes, show them photos and animations of a real safe or lock enabling access to a vault.
With banking apps, mobile users just want to get into the app, perform a task, and then get out. One way to expedite the task is to build an intelligent app. If the app can track and adapt to previous usage, or if it can refer to a default account, shipping/billing address, country list, or transfer recipient, then it will require fewer steps from the user. Use prediction to minimize the time the user needs to spend in the app.
For example auto-suggest names when using the email transfer feature or when paying bills provide easy options for date selections (today, tomorrow, next Friday, etc).
Dealing with Data
Many mobile banking apps still display transactions as they do in the web view: they display large tables showing date, transaction, and amount. However, this can often be overwhelming in such a small viewport.
Instead of using these tables, I recommend grouping and categorizing transactions according to date. Timeline also takes advantage of predictive loading, which could help users navigate to large transfers or something else they would likely be looking for. This also cuts down load times in the app, as it only loads select transactions.
In case the Timeline does not display the transaction a user is looking for, you can build in a comprehensive Search function, which can sort by time frames of when the transaction occurred, or categories.
This approach also borrows the user experience from other popular apps such as Facebook or Twitter that have popularized the timeline view.
Banks can no longer afford to neglect mobile transactions. Mobile banking helps save costs by bringing users into the mobile world, away from the physical locations.
It also helps increase revenue by increasing the number of bank transactions, because the method is so dead simple. Instead of rattling around their briefcase or handbag for a chequebook and filling out multiple fields by hand, bank customers can simply tap their screens a few times.
It’s no longer feasible to transfer the clunky interfaces of desktop websites onto mobile devices and expect customers to use it. The advent of mobile banking offers cost reductions, increased revenues, and customer retention. The ROI has been proven: focus on designing better user experiences.
Connect with Ricky on Twitter and LinkedIn.