While delivering on pure ease of use, the new BOK Financial online banking experience also incorporates a series of approaches not seen in traditional online banking designs.
Progressive Disclosure & Clear Hierarchy of Information
At first glance most online banking experiences are overwhelming, with a lot of information displayed in one go, and that information displayed in a flat manner with no sense of what piece of information is more important for the customer to pay attention to.
We introduced the idea of progressive disclosure to the experience: that information itself as navigation is intuitive. If you want to know more about something, such as an account balance, just clicking on it will take you to more detailed information about it, such as recent transactions.
By strategically transforming information into navigation, the page’s information density is dramatically reduced, simplifying decision making for the user while still making it very clear where to go for more information. This was taken further by grouping account information into expanding sections, and rolling up balance information. So, checking and savings accounts are rolled up into one balance, but a simple click expands this to show the detail of each account.
The progressive disclosure approach was combined with a strong visual hierarchy on the design. The more important elements on the screen are larger and clearer than less important, or secondary elements with call-to-actions and action buttons clearly differentiated from surrounding content. With this design, a customer can, in a fraction of a second, absorb and take action.
Financial Decision Support Tools
Traditional online banking is a very factual experience, focusing on balances and transactions. This is critical, of course, but it’s only part of the story. Customers use this information to make financial decisions and take action, from day-to-day decisions, such as “should I pay this bill today?” to longer-term financial decision-making.
Understanding this deeper need, we worked with BOK Financial to introduce some new visualization tools to help customers understand their money better.
The first was to add a chart to each account balance, showing the last 60 days information, so that users can see the patterns of their account over time. While a feature common to investment tools, such charting had not been used in online banking before.
The team also added an expanding module (progressive disclosure) that lets customers understand historic flows in and out of each account and what future bills and transfers are already set.
In Place Flows
At the functional core of online banking is bill payment and transferring funds. The goal for customers is to very quickly and painlessly pay one (or many) bills and then get on with the fun activities in their lives. The new designs for the money movement sections of the experience were built on the progressive disclosure paradigm, but also added in the approach of in-place flows. Rather than take a customer through multiple screens to undertake a multi-step task, they can perform it one place with modules that respond to the previous input.
By designing the digital banking customer experience this way, it’s possible for a customer to pay multiple bills at once, some ad-hoc, some repeating, some scheduled, all in one simple page – faster and more accurately than before.
True Responsive Design
Metrics show that customers are using multiple devices, at different times, to access online banking tools. Some customers just use desktop or mobile, but many cross over at different times.
As such, it was critical for this project to deliver both the same quality of experience and depth of functionality to all users, on all devices, with the same design. So, the experience was designed to be truly responsive, fluidly adjusting from larges screens (1,200+ pixels) through tablets to smartphones (320+ pixels).
The principles applied in the design featured a more horizontal template responding to work for every screen and function. On the occasion that a desktop design would not scale elegantly to mobile – the team went back and redesigned that desktop instance so that every user, on every size screen, got the same quality of experience.
Responsive online banking design demonstrated through various stages: desktop, laptop, tablet, mobile.