People primarily use online banking to check account balances and transfer funds.
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
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.
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
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.
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.
Before and after comparison of the homepage
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.
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.
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.
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.