Online banking

2019

Image alt tag

OVERVIEW

About the project

I worked with another UX designer to reimagine a client-brandable online banking product. The application provides online banking services to credit union members. The scope of the project was UI updates only without any backend changes, and we only had 14 weeks to get it done.

The problem

The original application was created based on business requirements, without considering user experience or accessible design. Despite having more functionalities than its competitors, the app began to fall behind in the market because the interface hadn't been modernized since its creation.

The goal

Develop an online banking app that allows users to view their account details and transfer funds in a clean and easy to interact with interface.

Responsibilities

Background research, competitive analysis, and visual design

Tools

Adobe XD

Discover
Online Banking

People primarily use online banking to check account balances and transfer funds.

Understanding the users

We started with reading research we could find about how people use online banking. Because of our very short project timeline, we relied on research already conducted internally and externally and leveraged their findings. We took this information into account while developing the strategy and architecture.

Online Banking

Identifying key trends

After some initial research on user behavior, we started reading the 2020 Javelin Online Banking Scorecard. The report evaluates 25 top U.S. financial institutions to identify the market leaders in online banking.

Javelin's scorecard highlights 19 trends and opportunities that showcase innovation and best practices. We placed priority on the features that would make us innovative bus also keep pace with our rivals

Javelin's scorecard highlights 19 trends and opportunities that showcase innovation and best practices. We placed priority on the features that would make us innovative bus also keep pace with our rivals.

  • Build a "view and do" homepage that speeds money movement tasks and improves oversight

  • Simplify transactional records: Make transaction lists easy to read, skim, and amend

  • Pick the right mix of transaction search, sort, and filter

  • Enable customers to find what they need

Online Banking

Assessing the competition

Since there are already many well-established online banking applications in the market, it was important to understand what customers already prefer and value and why. To get answers, we did a competitive analysis of online banking platforms at 4 large banks.

The commonalities were pretty clear. The homepage should provide a snapshot of all accounts as well as make the most common tasks just a click away. Online banking is complex, but navigating it shouldn't be.

Define

Gathering ideas

The research showed us that we needed a comprehensive homepage and an easy way to move money. We began brainstorming how we should start to approach the design by asking ourselves "How might we..." questions.

Online Banking
Online Banking

Wire framing

We began to work through the structure of the pages. Sketching out the design helped us establish how much content would go onto the page and the hierarchy it should fall into.

Wireframes were also a great way to focus feedback from stakeholders on the structure of the app rather than losing their focus to colors and small details.

Design

DESIGN & PROTOTYPE

The design goals

  • Clarity: The UI should have an attractive appearance and be easy to use.

  • Usefulness: Make the most important things fast and easy.

Using a design system

We started building out the main page with components from the company's design system. There was an immediate improvement just by using components that had already been tested for usability and accessibility.

Online Banking

Before and after comparison of the homepage

Online Banking

Lists of scheduled transfers and scheduled payments only show if the user has any.

Comprehensive homepage

Account balances are the core of the homepage. But because of what we learned from our research, all primary app functions are available directly on the landing page.

Our goal was to create a "one-and-done" homepage that would provide users with an overview of their accounts and activity, transfer money, and open a new account. If users need to investigate further, they can click on any of the cards to navigate to more details or view additional options.

Online Banking

Simplified account details

From the homepage, users can select an account to view details about that account. But most importantly, users often come to this page to find a specific transaction.

Having a paired down transaction list that users can easily search and sort through is essential to the online banking experience. We provided the most frequently used search options at the top of the page. In the transaction list, we displayed only 4 types of data to keep the list simple.

Reimagined transfer flow

Since 58% of users log onto online banking to transfer money, we added quick transfer cards to every account page. That allows users to transfer funds from the homepage, transfer page, or any of the account detail pages.

Rather than using just textboxes and dropdown lists, as we saw on other online banking applications, the new transfer flow gives users visual clues to help them transfer money easily and accurately. And to speed up the process, we added buttons for the most common amounts that customers transfer based on our research.

Online Banking

Responsive design

Although people typically use their financial institution's app for mobile banking, designers are responsible for making information accessible at all screen resolutions.

Organizing and laying out content and actions into cards allows for responsive resizing while maintaining a consistent heirarchy.

Design for white labeling

Financial institutions need an online banking application that their customers will love, but they also need to be able to customize the UI so that it aligns with their brand. We designed the structure, but gave clients the opportunity to apply their branding.

From conversations with clients about what they wanted to customize, they primarily wanted to customize the colors and header area. Our design let clients customize the look and feel, while still maintaining the overall structure and positive experience of the application.

Online Banking

Clients can apply their branding by several customization options.

LEARNINGS

  • Keep it simple. Handling finances can be a daunting task for many people. As designers, we have to help people navigate the hard things by creating simplified and enjoyable experiences. 

  • Don't be afraid to break the status quo. Review industry standards, like we did when developing the transfer money designs, and find opportunity for improvement.