Case Study:

Project:

Bank of Oklahoma Online Banking

Reimagining the Online Banking Experience

Result:

80%

Online Banking Adoption Rate

BOK Financial prides itself on its customer service, so much so that its seven banking division CEOs list their names and direct phone numbers on their contact us pages. So when the $30 billion regional financial services company set out to redesign its online banking experience, BOK Financial wanted to put its customer needs front and center by delivering a reimagined, world-class online banking experience.

The Challenges of Online Banking

BOK Financial faced the same challenges that all banks face with online banking sites. The fact is, today's online banking experiences are a direct evolution of much earlier paper processes rather than an elegant customer experience, designed from scratch, to give customers exceptional ease-of-use and better financial decision making.

Understanding this challenge, BOK Financial made the bold decision to rework its entire online banking technology stack. This opportunity gave the design team the ability to re-think many of the design paradigms used in the interface and better focus on how customers think of their money.

Breaking the Mold of Online Banking

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.

A Shorter Responsive Design Process

As it turns out, it wasn't just a website we were developing. This project also honed a hybridized agile approach to strategy and design that led to shorter timelines and feedback cycles. Embarking on responsive digital experiences requires an initial time investment in strategy and planning upfront to determine the website's most important features, content hierarchy, and responsive breakpoints before embarking on the build.

Entering the project with clearly defined goals and internal executive alignment, as BOK Financial did, created an efficient decision-making cycle. This, married to an agile design process where UX, content and creative and development work in tandem prototyping across breakpoints, allowed BOK to test the experience and make adjustments earlier in the cycle—which resulted in shortened timelines and a number of project efficiencies that couldn't have been realized in a traditional waterfall approach.

The result? A first-of-its-kind next generation online banking experience. BOK Financial's investment in customer experience and its will to deliver the best digital banking experience possible for its customers has put the bank in a position to grow its business well into the future and its site at the very top of the list of the best in online banking.