Home / Banking Strategies / Responsive design for digital banking

Responsive design for digital banking


Having a world-class digital banking experience across any device is imperative today, where nine out of ten U.S. adults regularly use some form of online banking and more than half of them access their banks’ websites or applications via their mobile device, according to a recent report from Mercator Advisory Group. With the proliferation of mobile devices of all types and sizes, and desktop use on the decline, banks can no longer focus on a single form factor if they want to deliver that experience. The customer-facing interface must accommodate smartphone, tablet and desktop screens as well as whatever the next hot new channel will be.

This is where responsive web design (RWD) comes into play, as it is all about building a digital experience with one set of code that will appropriately respond to whatever screen or display space is available. Whether a customer is accessing a bank’s website on his or her smartphone or a laptop that’s hooked up to a 65-inch television screen, an RWD-enabled website will automatically respond with the best combination of content and functionality for that particular display size. What this also means is that responsive design saves banks both time and money by enabling feature and content updates to be made just once, and then appropriately applied across all screen sizes.

To be clear, RWD is not about device detection. Rather, it is device-agnostic and detects screen resolution, displaying in some variation based on pre-determined content breakpoints. For example, the common tablet width of 1024 pixels might be one breakpoint, while any display greater than 1024 pixels is designed for the desktop. Another set of breakpoints includes landscape versus portrait display. To determine these content breakpoints, financial institutions must evaluate common display sizes, as well as customer data and analytics, while considering the following questions: How are my customers experiencing my site at these different sizes? How is the navigation used? How is the content or functionality prioritized? How much content is displayed?

Legacy Issue

A common misconception is that it is more challenging to implement responsive design in the financial services industry because of the widespread use of legacy systems. In reality, because responsive design focuses entirely on the front-end user experience in terms of what the customer actually sees on a site, it is compatible with just about any backend system an online banking site is built on.

To realize the greatest impact of RWD on user experience, financial institutions should begin not with a technical conversation, but rather with a business-focused discussion, because successfully implementing RWD is largely a matter of prioritization. Imagine yourself deciding between a semi moving truck and a rented 15-foot box truck. The semi will probably fit everything you want to move without a problem. The 15-foot rental, however, will cause you the need to prioritize. Am I up for multiple trips? Do I need to move the piano now, or is it time to donate it to a music school?

When you implement RWD and begin looking at the smaller screen form factors, you will need to make similar decisions. On a large screen desktop monitor, a rotating hero image feature may make sense on your home page, but on a mobile phone you may need to think more utilitarian. A common example for financial services is a local branch or ATM finder. On a desktop view, the ATM finder might be part of tertiary navigation, but it is often the most-used feature on mobile devices, so it should take priority at the top. It is imperative that bankers work with their agency and business teams to begin to make some decisions that marry the true needs of your customers with the corresponding needs of your business.

Another important decision when implementing RWD concerns are “size breakpoints.” Breakpoints are the screen size points at which the user interface may undergo larger changes and reorganizations of the content and features. Some common breakpoints match the most common screen sizes currently in use: large desktop screen, landscape-oriented tablet, portrait-oriented tablet and mobile phone. However, every organization’s customer base accesses information differently so bankers should leverage their existing web analytics to validate what sizes their customers are actually using.

Keep in mind that customers today are measuring their bank against their digital experiences elsewhere. The competition is not just other financial institutions or other banking sites per se, but rather companies such as Facebook, Snapchat, Amazon and Uber. Therefore, a bank’s digital design should prioritize its content, presentation, functionality and device capabilities against this reality in order to deliver the best digital experience possible. Bottom line: The customer should always be the focus of the digital experience and responsive design helps make this possible.

Mr. Ryan is chief analytics officer for San Francisco-based Extractable. He can be reached at [email protected]