Posted on: January 30, 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.
A graduate of OCAD University with a degree in Advertising Design, Siobhan brings over 14 years of design experience to her projects. A strong proponent of clean and contemporary design, Siobhan’s work creates tangible results with stunning aesthetic foresight. With a keen eye for detail and a deep awareness of project goals, she strives for targeted and effective communication in everything she does. Her long list of clients include Elementary Teachers’ Federation of Ontario, Canadian Filmmakers Distribution Centre, Gallery 44, The Theatre Centre, 407 ETR, Environics, Workers Arts and Heritage Centre and Open Studio among others. Adding to her breadth of skills, Siobhan studied Film at Ryerson University for two years before starting her degree at OCAD U in Toronto, Ontario.
Sign up for our UX Blog
Don't miss an article! We'll notify you of each new post.