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


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.


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.


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.



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.




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.



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.



Clear ‘Back’ Access


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



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.




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.




Helpful Services


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




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.




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 Jargon-Heavy Content


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



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.