Design Tips to Increase Satisfaction in Banking Apps – Part 2 of 2

Design Tips to Increase Satisfaction in Banking Apps – Part 2 of 2

In the first part of these series, we covered examples of best practices that we have seen play a role in facilitating engagement and improving the user experience.

For the second section of this two-part series, we will cover examples of best practices that we have seen play a role in facilitating engagement and improving the user experience.

Got question surfacing as you read? Give us a ring!

Search & Navigation Part 1

Content Part 1

Guidance Part 2

Privacy & Security Part 2

Appearance Part 2

 

Part 2: Guidance

Similar to what we mentioned for Search & Navigation— ease of use is the most important factor in overall app satisfaction. If users need to complete tasks, make sure you help guide them through the process from start to finish. Here are some tips:

 

Related functions not grouped together.

If you have multiple ways to complete the same task, organize the navigation in a way that makes it easy to find all the similar tasks in one place. For example, some financial applications separate sending money via a mobile number from other payment/transfer operations.

guidance search and nav bank apps

Unnecessary steps to make the user get to where they want to go.

Don’t make the user dig for the information they need. Several banks hide useful details behind another tap, and some even request the user to fill out a form before showing them the details they are looking for. For example, some banks don’t provide easy access to view savings accounts and/ or interest rates.

my credit card - showing info

Progress trackers help users understand how many steps it takes to complete a task, what the next step is, and how far along they are in the process.

Providing a stepper is an easy UX improvement in terms of giving a user more guidance in completing their tasks. You’d be surprised how often you see a multi-step process in bank applications that don’t incorporate this simple yet effective guidance method.

progress trackers in banking app

Provide guidance when you are not letting the user proceed to the next step, let the user know why and how to resolve the necessary actions.

If a user is not allowed to transfer more money than their account balance tell them why.

provide guidance for next step in banking app

User real-time validations on field entries

Don’t play “gotcha!” Whenever possible, let a user know right away if they’ve made a mistake or need to correct something.

User real-time validations on field entries baking app

Either indicate which fields are required, OR only indicate which fields are optional.

indicate which fields are required in banking app

indicate which fields are required in banking app banking app 2

Make it easy to contact the support center

When a user can’t complete a task they are trying to perform they are frustrated, and making them look for help will make them even more frustrated. Make it easily accessible at all times.

support center contact banking app

Part 2: Privacy & Security

Generally, only 31% of bank members use their bank’s mobile app. Of this 31%  there are advocates for the app and prefer using the app over visiting a branch, or using the website. If people are enjoying the app so much why is adoption only 31%? The primary hurdle banks need to overcome is trust. This isn’t a surprise to anyone. We are all aware of this hurdle and have seen great efforts in increasing trust. However, there is always room for more improvement.

Biometric login

Some banks have been making the switch to utilize device biometrics like fingerprint, voice, face recognition. These security measures are not only comforting for consumers but easy to use and adoption is high.

Biometric login in banking app

Provide privacy policies in context

When asking for personal information in an effort to make the app more beneficial to the user, explain why you need it and only when you need it.

privacy policies in context in banking app

Bank first, instead of the customer first

Some apps will not provide the interests rate for a product until after the user applies and provides personal contact information. This is a breach of privacy for the benefit of the sale/marketing and not helpful to the consumer. All the user wants to know is the interest rate so don’t hide it from them.

customer first mobile banking app showing loan amount

Part 2: Appearance

components of app satisfaction chart

Appearance is the second most important component that impacts user’s app satisfaction, coming in at just 1% lower than the most important— Ease of Navigating. An aesthetically beautiful app will elicit a positive emotional response to the experience. At Shockoe, we understand how important this is, which is why we value UI just as much as we do UX. Here are a few tips we’ve used to help clean up bank app interfaces:

Poor content hierarchy

Content organization is a role for both the UX of an application and the UI. Determining the type of content display, and the order in which it’s displayed is pivotal in UX design, while UI design will bring that experience to life using visual hierarchy. Visual hierarchy is based on the Gestalt theory which examines the perception of elements in relation to each other and shows how people tend to unify elements into groups using size, contrast, proximity, negative space, and other design techniques.

content hierarchy in a banking app

Crammed screens

Order makes everything more comprehensible. The same works with user interfaces of digital products. Make sure the focus of the UI is clear and minimized. Don’t cram lots of unnecessary text that doesn’t help the consumer accomplish their task. Don’t bombard them with too many actions to choose from.

comprehensible screens for banking app

Illegible text

Accessibility is mandatory. Make sure all content is legible and follow contrast & size guidelines.

illegible text banking app

 

Make sure actionable items look interactive.

For mobile devices, Google Android and iOS have guidelines on how large a touch-area should be so that any finger large or small can tap an interactive element with ease. Make sure these guidelines are being met.

Make sure actionable items look interactive banking app

large a touch-area should be so that any finger large or small can tap an interactive element with ease on banking app

 

Make sure the interfaces have visual cues as to which elements are actionable or not. Keep in mind that depending on the type of action; hold, swipe, tap, etc— that the correct commonly understood visual cues are being used.

What did you think about these design tips? We’d love to hear your feedback!

Ready to increase user satisfaction in your app? Connect with us here.

 

 

Samantha Carbonell

Samantha Carbonell

UI/UX Designer

In addition to traveling all over the world — China, Thailand, Korea, Germany, Amsterdam, and El Salvador — Samantha has experience working overseas in Japan. While living in Okinawa, Japan, she freelanced as a graphic designer for a transportation company, tasked with finding a creative solution for encouraging a younger audience to use the bus system. A graduate of Virginia Commonwealth University, Sam holds a degree in Graphic Design. Inspired by modern, simplistic design, she adds an aesthetic and conceptual quality to all branding material she creates.

Design Tips to Increase Satisfaction in Banking Apps – Part 1 of 2

Design Tips to Increase Satisfaction in Banking Apps – Part 1 of 2

Retail banking consumers now prefer using their mobile devices more than any other bank interaction, which makes a mobile app a primary component of overall customer satisfaction. With greater ease switching banking providers at a moment of dissatisfaction, banks need to place extra emphasis on keeping their customers happy and loyal. This starts by giving customers the best tools available and a user experience that helps them access and navigate their banking needs without difficulty. Read more about our design tips for banking apps below. 

 

For the first section of this two-part series, we will cover examples of best practices that we have seen play a role in facilitating engagement and improving the user experience.

Any questions surfacing as you read? Give us a ring! You can always connect with us here.

 

Search & Navigation Part 1

Content Part 1

Guidance Part 2, coming soon

Privacy & Security Part 2, coming soon

Appearance Part 2, coming soon

 

 

Search & Navigation

search-navigation-components-of-app-satisfaction

According to J.D. Power, ‘Ease of Navigating’ is the key differentiator among top-performing mobile banking apps. If a consumer can find what they need in the app, this often yields a happy customer. This satisfaction can also impact bank operations by reducing calls to support centers with potentially aggravating wait times.

 

Let’s jump head first into some easily-executed ideas to help improve your app’s search & navigation as early as today.

 

Easy Login

 

Biometric logins such as fingerprint, face, or voice can facilitate a client’s access to their account.

easy-login-biometric-one-touch

Personalization Capabilities

 

Some banks give the user the ability to customize their application experience to their needs making each visit one that addresses their specific needs.

personalization-personalize

Using Navigation Icons with Label

 

An icon is meant to be universally recognized, but in many cases, they are not. It’s always a safe bet to provide a label next to the icon to provide clarity.

 

using-navigation-icons-with-labels

Use Plain & Simple English

 

Avoid using branded names that might be intuitive to your company, but not to a user. In short: use plain English when possible.

 

use-plain-simple-english-branded-names

 

Transaction History Search

 

Most banking apps default to filtering transaction history by date. Giving the user the ability to search their account is one more way to facilitate finding that specific transaction they have in mind.

 

transaction-history-search

Appwide Search

 

Few banks offer app-wide search to locate features & information. It might just be what your clients needed to discover new or undiscovered features.

 

appwide-search-my-bank

Clear ‘Back’ Access

 

Avoid using a home icon or cancel in place of a back.

 

clear-back-access-button

Autofill/Type-Ahead Searching

 

We continue to be surprised at the number of banks not make use of this simple yet effective interaction. Your customers will be thrilled to have it implemented.

autofill-type-ahead-searching

Content

 

The content that users access in-app should be concise, easy to find, easy understand, and help them reach their goals—simple right? Here are a few ideas:

 

Key Information Front and Center

 

Some applications give users the choice to view account their account balances before login.

 

key-information-front-center

 

Helpful Services

 

Provide customers with additional services that could help them reach their financial goals.

 

helpful-services

 

Real-Time Alerts

 

Use real-time alerts to keep customers informed on important account updates such as direct deposits, personal information changes, and bill due dates.

 

real-time-alerts

 

Avoid Hiding Information

 

Some banks hide interest rates behind an extra tap or elaborate application process. Be nice to customers and let them know what they need to know.

 

avoid-hiding-information

 

Avoid Jargon-Heavy Content

 

Avoid words such as Debit, Payee, APR — instead use Withdrawal, Recipient, Interest Rate.

 

avoid-jargon-heavy-content

Guidance Part 2, coming soon

Privacy & Security Part 2, coming soon

Appearance Part 2, coming soon

 

Editor’s note: 

We know you’re thirsty for more. Part 2 will be coming very soon! While you wait, check out our latest thoughts on UX Strategy for Banks. 

Have any additional questions or want to discuss what Shockoe can do for you? Click here to connect with us. 

Three reasons why you should design in Sketch versus Photoshop

Three reasons why you should design in Sketch versus Photoshop

It’s been a little over a month since I’ve started designing in Sketch App, versus Photoshop —which is what I’ve used for all of my career.  That is until now.

I finally understand all the hype around Sketch and want to share the top three reasons why I’m glad I made the switch. By no means am I an expert in the tool yet, and there are still features I’m trying to get used to, but overall I am very pleased with these three particular features Sketch brings to UI design in comparison to Photoshop; Symbols & Styles, Exporting Assets, and Plugins.

Before I begin, I want to say thank you to my company Shockoe, for allowing me to take the leap and learn something new despite the risks associated with learning curves. I’m glad I work in a company that is always eager to learn new things in the effort to improve workflow and time efficiency.

At first Sketch was slightly frustrating but this is to be expected with change.  However, in just one month I’ve designed three mobile apps, worked on two prototypes, and exported design assets for the development team. This has giving me a pretty well rounded view on the Sketch.

Reason One – Shared Styles & Symbols

It’s amazing how much time I can save with Shared Styles when making design changes.  Shared Styles also keep design consistency when using various artboards. For example, I start using a hex color blue.  Later along in the design process, I decide to use a different blue. To assist me with this, I create a Shared Style called “Blue Fill” and use this style on any shape/item that needs to be filled with the color blue. If the hex color for that blue needs to be changed, I edit my style “Blue Fill”.  I do not have to select every item using the blue I want to change.  This concept can also apply to a button or other actionable items with all of its various states including but not limited to focused, pressed, and disabled.

Symbols work very similarly but for grouped items, or multiple items that collectively make a whole. One example is a navigational item that might be the same on multiple artboards. Once again allowing you to only edit once versus changing every instance that group is used. The only comparable feature in Photoshop are smart objects, but I would have to argue it’s not as intuitive as Sketch’s Symbols.

Reason Two – Exporting Assets

When it comes to exporting assets for development it’s a fast and easy process compared to Photoshop. You can easily export sliced layers/groups at various sizes or formats, meaning it will save the same slice into multiple files for various screen resolutions with a click of a button! In Photoshop, slicing and saving assets is very time consuming, especially when trying to save an asset in multiple resolutions.  You can also export multiple layers/groups at a time, by selecting “Export All.” Voilà!  All of your assets have been saved at all the various screen resolutions and file types.

Reason Three – Plugins

Another great thing about Sketch is how many Plugins there are to make my life easier. One plugin called Zeplin will take your Sketch file and provide developers with its design specs.  This makes the hand-off very easy for the designer and developer.  The developer doesn’t have to sort through groups and layers to find the specs they need.  This also frees up time for the designer as they did not have to prepare a spec document.  There are a bunch of Sketch plugins and integrations available for mockups, prototypes, spec inventory, and collaboration.