How to Build Digital Banking: Mobile First, Seamless Across All Devices

Mobile First

The rise of mobile in the past few years has been drastic. 85% of consumers say mobile devices are a central part of everyday life. Furthermore, at a number of financial institutions, mobile has now become the primary channel for Millennials and Gen X. For example, BECU in Seattle, Washington shared at our March FinTech Festival that it has found mobile to be the number one channel for members aged 18-44.

For most financial institutions up until this point, the mobile experience is taken into account last minute and often put together with UX duct tape. Typically, financial institutions start with the online platform and work their way down by scaling back and gradually removing content.

However, we know this isn’t the best approach. More than nine out of ten consumers say that access to content is somewhat or very important. Therefore simply removing features from the smaller screen or the mobile app is not going to cut it.

In terms of the use case, we see mobile being the primary way users consume content, while desktop is used for areas that are too intricate to be done on mobile. According to WIRED, “Adding more links, menus, and buttons for people to interact with comes naturally on the desktop. Mobile, however, forces us to reconsider this approach. Gone are big screens that can display lots of user interface controls and the precise mouse-controlled cursors that allow people to use them. In their place are small, palm-sized screens and bulky fingers for input.”

Adding to this, as mobile sites or apps can have one fifth the screen size of a desktop, designers are forced to focus on the core. Designers have to deeply determine the characteristics of their user, their journey and what should be displayed.

One way the desktop-to-mobile experience can be altered without losing content is through the primary navigation. On desktops, navigation is usually displayed as a horizontal row across the top. For mobile it should change to a large menu or ‘hamburger’ button at the top of the page.

Another approach to consider is the ‘Bento Box’ approach, which is “a single multi-purpose screen that unfolds to reveal layers of additional information.” (image from Smashing Magazine)

This can allow financial institutions to give the user highlights of their finances on the home screen, while providing account holders with the option to delve deeper into a particular area if they want more information.

Furthermore, when designing for mobile it can be tempting to use icons. However, icons can be misinterpreted so you have to be careful. Research from User Interface Engineering found:

• Text and images work better than just text

• Text alone works better than images alone

• Icons are learned, but icon positions are learned faster (For example, if an app you use regularly changes icon, you’ll be okay with that; but if someone rearranges your entire home screen and none of your apps are in the same place, you’ll struggle to find what you want quickly)

See the example below, which compares the University of Delaware (icon based) on the left vs. Walmart (text and image based) on the right. This demonstrates that text and images work better than just text:

Lastly, a mobile-first approach moves beyond just design on the screen. Because people are usually waiting in line or are ‘on-the-go’ with mobile, slow latency (load time) can be very frustrating to the user. As Instagram co-founder Mike Krieger put it, “Who wants to wait while they’re waiting?” Therefore removing large images or other media from mobile devices and only allowing them to only appear on larger screens (660 pixels and up) has proven to be successful.

To conclude, as more of your account holders use the mobile channel, how are you designing to be mobile first? Rather than focusing on adding more links and features like you would on a desktop, focus on your account holder’s journey and what they want to achieve in your app.

“The mobile interface has changed consumer expectations and also provided more opportunity for design and design paradigms that customers recognize.” - Carrie Sumlin, Digital Deposits Executive, Ally Bank

Seamless Across Devices

59% of people now own and regularly use three devices, according to a recent study by Carlisle and Gallagher. Furthermore, a study from ExactTarget found 83% of consumers say a seamless experience across all of their devices is important to them — and this number increases to 87% when considering just those who own both a smartphone or a tablet.

Being able to meet people where they want to be met is critical to a great user experience. Whether it’s on a PC, Mac, Android, iPhone, Tablet, Phablet, Smart TV, Smartwatch or anywhere in between, you need to be omnipresent and build little niches. As we get closer towards the ‘internet of things’ or ‘internet of everything,’ consumer interaction across devices is only going to get more fragmented. Therefore, your experience across channels should feel consistent, unified and be future proofed.

Unfortunately for a lot of financial institutions, though, the experience across devices is not seamless. Most of the time there is separate development across different platforms including desktop, Android, iOS, iPad etc. This causes the cost of development to skyrocket and requires a separate code base for each device.

As a result of these challenges, responsive design was born, “Responsive is just another thing you need to have,' Howie Wu, VP of Virtual Banking at BECU, said at our Fintech Festival. According to Internet Retailer, “Responsive web design is a web development approach that dynamically renders a web site to fit the device it is being rendered on.  It uses flexible layouts and design grids in order to present the appropriate content and image sizing along with orientation for each device.  A responsive approach to web design means a singular experience, updated in one location that provides brand consistency across devices.”

Most developers rely on HTML5 for responsive design, which can be hugely beneficial but also has its challenges. According to Kony, when HTML5 is compared to native it is slower, less stable, has fewer offline capabilities and isn’t discoverable in app stores. Furthermore, as you can see below from ExactTarget, consumers are more likely to download apps for online properties that they use frequently. As banking is a service account holders use frequently, it is highly likely that your account holders will prefer to interact with you though an app vs. log into your mobile banking website.

To recap, we’ve said responsive design through HTML5 can help mitigate the challenges of a seamless experience across channels in terms of look, feel and development cost. However, HTML is slower and less stable than native. Users also prefer to use apps instead of the web browser for mobile banking.

What should you do then? One option is hybrid apps that uses the benefits of HTML5 and responsive, while still having a native experience. While it is slower than native, it can still be a good option. This chart from SalesForce explains it well:

From what you can see here, hybrid apps are almost there. However, these apps are missing three key elements of native:

• Advanced UI interactions
• Fastest performance
• App store distribution

The very best solution, therefore, is a mix of native and hybrid capabilities — a cross-platform solution that's built on a base of C++ and then wrapped with a small layer of native code base. The result is an incredibly quick, native UI and UX that can work seamlessly across any device. Check out the MX Helios Framework, which runs natively on over 1000 devices for more on this.

To sum up this section, consumers expect to be able to bank with you, regardless of the device or channel they use. If you want to deploy an experience that is seamless across devices, you need to decide whether you want choose a native, responsive, hybrid apps and native cross-platform experience. As more devices hit the market and consumers' choices become more fragmented, this strategy becomes even more important. You need to be able to future proof your framework, to keep up with consumer demand.