Mobile banking app

Financial Wellness

Mobile banking app

Overview

With a redesign of the mobile banking app, we saw lower engagement with financial wellness features. This whole ecosystem of products, includes financial tools such as savings goals, scheduled savings transfer, low balance alerts; and new features such as bill management, net worth and net cash status, and spend analysis.

Approach

As part of the push for financial wellness within the Fifth Third mobile banking app, I designed a new landing screen for these features, to give our users access to statistics about their spending habits and income. We wanted to tailor this financial dashboard to the user’s habits and needs, to make them useful, and therefore increase engagement with our customers, helping them making informed decisions, and learning more about their habits in order to provide better solutions.

No items found.

Results

Process

In the process of creating this screen, I considered all current financial wellness features within the app, as well as adding quick, low-effort wins such as notifications for the user. I also created a snapshot area to display the user's current financial picture, comparing their spending habits against their account balance, to show them the most vital information they need to guide their day-to-day financial decisions. In the design process I also needed to consider future features that would be added to this area of the app, such as credit score monitoring.

An example of insights and the actions the user could take to improve their financial health.

Obstacles

While discussing potential designs with our engineers, we determined we need to establish rules of the order in which screen readers read the card-based layout. While they could simply read every item from left to right, and top to bottom, we consulting accessibility experts at Deque University to develop a better experience. We decided the best experience for the user would be the ability to read the header of each grouping, with every swipe going to the follow header. If the user is interested in the content that follows the header, they would then tap once to read everything inside of that group.

I also designed a version of the screen to show the view of the components if the text size accessibility has been set to 200%, the max size that's needed to be considered, according toWGAC guidelines. While we are able to increase the text leading, we had some limitations with our component's ability to also adjust the spacing around the text and images, to optimize the ability to quickly scan the screen. This enables the user to quickly navigate the screen and get to the information they're seeking.

Documentation of the screen reader focus state, as well as the design with text size at 200%

While providing an overall snapshot of finances is important, through feedback from qualitative testing, we learned the information needed to be as specific as possible to the user. Testing also revealed that providing recommendations based on the data we were able to gather from the user added the most value to this feature.

Overall Impact

After extensive UX design work focused on the financial wellness area of the mobile banking app, and reviewing our insights from usability testing, we expect to see significantly increased user engagement and financial literacy amongst our users.

Accessibility features have been integrated to ensure compliance with WCAG guidelines, making the application accessible to users. Beyond design accessibility, the intention of these tools are to empower users, by removing barriers to financial knowledge, this helps our users make more informed decisions about their finances.

View Live Project
Next Project

CORA Trail Map