Posted on: 30 January 2015
Visual Design for Mobile Banking Apps
For years I’ve been taking advantage of doing my personal banking online in the comfort of my own home. It was a transition that was easy to make with the prospect of avoiding long lineups at my local branch along with other inpatient clients trying to get on with the business of day-to-day life.
Recently I asked myself, why haven’t I been quite as eager to jump to the next level and use my iPhone for some or all of my banking needs? The convenience of quickly checking a balance or immediately paying a bill is certainly appealing. The more I consider it, the more I realize it has been apprehensiveness over security that has held me back. I imagine I’m not alone in this feeling among the late adopters in my generation.
To get acquainted with the convenience of mobile banking I did a test run on the applications my various institutions offer. Being a new user, I determined there are some key areas to pay attention to when designing visuals for mobile banking. Let’s zero in on how visual design plays a role in the success of mobile banking apps.
On the Good Side
There are a few things my banks are doing right
The mobile apps were streamlined to perform key tasks users such as myself are most likely to need such as paying a bill, performing a money transfer, checking a balance or viewing account details. Keeping the options limited means reducing complexity and allowing for a cleaner, uncluttered design. I only wish the mobile version of their website had the same clarity but we’ll keep that conversation on hold for another day.
The account activation process was clear with step-by-step instruction and a visual indicator bar revealing the current stage and providing assurance that it wouldn’t be much longer (phew!). Providing this visual cue helps the user feel engaged in what would normally be a dry experience.
New features such as the ability to deposit a cheque by taking a photo of the front and back provides further incentive to use mobile banking and couldn’t be simpler.
Room for Improvement
Knowing security is top of mind for anyone using a mobile banking app, it’s important to keep this as a key consideration in all design decisions. Many factors are at play when it comes to gaining the confidence of clients, including existing conceptions of the institution based on the client’s ongoing in-person and online interactions, and the bank’s overall branding and market positioning. Much like desktop online banking, a mobile app removes clients from the experience of in-person transactions where it’s much easier to leave an impression of responsibility, trustworthiness and understanding. So it’s even more important to design an app with a comfortable and supportive environment.
The biggest design shortcoming I noted in my experience using mobile banking apps was a lack of brand reinforcement. It’s not enough to just use the brand colours at the top and bottom of the screen, there should be an overall visual experience that looks and feels like the specific bank.
A blurry logo at the top of the screen is an immediate red flag. The level of quality of the entire app quickly goes into question. To get this element right use the most simplified version of the logo (no frills) and place it as an SVG (scalable vector graphic) to retain a crisp image.
Another aspect of branding to be considered is the tone. Instilling a human voice through friendly and professional language can go a long way in a mobile app. It reassures the user and reminds them of the one-on-one experience of being at the bank. Many apps forget this element even though it can set them apart from the pack.
I found dated graphic styles such as heavy drop shadows and unrefined typography were working against the more modern print and television ads I’ve seen for the same institutions. Aligning the vision across all media just makes good sense.
The interface design elements can also reflect the bank’s brand. When designing icons and buttons, there should be a consistent style in place and distinguishing features to ensure ease of use. I found myself frustrated when faced with icons I didn’t recognize in a prominent area on one of the apps. A better choice of icon, one that is conventional, or an addition of text labels can resolve this issue. You can read more about the general guidelines of icon design in my previous post.
My much overdue journey into mobile banking has been slightly bumpy but I’m glad to have made the transition. I hope to see improvements in the design in the near future that will continue to make banking tasks more productive, enjoyable and secure.
Siobhan is a passionate advocate for clean, effective designs that speak clearly and with gusto. Through the Akendi blog, Siobhan shares inspirations, tips, and resources for developing clean, harmonious design systems that are a joy to use.