In order to improve the load time of the initial experience and provide added functionality, our team created an enhanced post-login dashboard view for Finastra’s mobile banking application.
Overview: The User Experience Engineering (UXE) team completed a UI and UX refresh of Finastra’s digital banking offering - which consists of iOS, Android and web applications. For phase one of this redesign, our team focussed on the end user’s post-login experience.
Duration: 6 months from conception to production
Team: The UXE team at Finastra strives to innovate and standardize the UX/UI across all Finastra products serving the financial industry in North American Banks and Credit Unions.
The team consists of myself, a junior UX Designer and mid-level UX Designer/Researcher.
My Role: With my role as Senior UX Designer, I worked as a main contributor to the project by helping to define phase one objectives with Product, conduct user testing and research and to lead the team throughout the process.
The Product: Finastra’s UXE team designs robust mobile and web banking applications. Our apps utilize a framework, or template, which allows for customization per financial institution. Banks and Credit Unions can fully customize the colors, icons and images to match their branding, as well as choose which features are included.
We currently have over 400 financial institutions as customers, serving over 1 million end users.
The Project: Our main objectives were to improve the initial experience of the end user upon logging into the application. Provide shortcuts to viewing account balances, display marketing messages/alerts, introduce widgets for additional customization and increase the functionality of transaction detail information.
Current Experience: Currently, users are presented with all of their accounts, and the transactions for those accounts, at once, and because of this, the load time post-login can be very slow, especially for users with several accounts.
It can also be challenging for users to navigate between different accounts as they have to scroll up and down between selections. This is also an issue for users with multiple accounts and small, shorter screen sizes as sometimes the transactions will be fully below the fold with little indication that scrolling is needed to view them.
The selected and unselected accounts are denoted by color fill, which is also a potential accessibility concern. One last thing to point out, is that transaction details are viewed by expanding each transaction cell.
The Problem: "Our first experience for mobile users is slow and is not intuitive for users who have more than one bank account."
"How might we help mobile users with more than one bank account quickly view transactions and easily navigate between accounts?"
Competitive Research: The first step in our design process was to complete a competitor analysis to collect and compare data from other SaaS providers with similar offerings, as well as leading financial institutions. The main goals was to highlight existing strengths and weaknesses within our product and aid us in making informed design decisions.
During this process, we assessed the User Interface, Key Features offered, recent UI updates and app store ratings. We broke this down further into 20 separate categories and scored each FI against ourself. From here, we assessed areas for improvement and identified major gaps in our solution.
From this research, our main findings were that most financial technology SaaS companies offered some sort of dashboard interface with customization offerings, including Quick Actions and widgets.
Analytics: After completing the competitor research, the next step was to take this data and combine it with findings from our own internal analytics tool. Our main goal here was to dig deeper into customer usage.
What are the main features being used? How often?
How many accounts on average do users have?
How often are users login in to their banking application?
How often are users checking their account balances?
Personas: Based on the data analytics and research, we set up three personas. We referred to them throughout the entire design and development process.
Name
Age
Archetype
Main goals
Touch Points
Pain Points
Sketches & Wireframes: I always start the design process with sketches and low-fidelity wireframes. This is the way I can iterate through many designs quickly without worrying if things are too precise.
The main purpose of my sketches were to brainstorm initial ideas for the dashboard interface and new accounts views and to quickly share designs with the team.
Since the user's main goal is to check their balance quickly upon login, I used sketches to come up with ideas to provide convenient shortcuts.
I went through several versions of sketches before moving on to wireframes in XD.
In this round of sketches, I was exploring differences to the top widget card on the money movement dashboard.
These quick sketches helped me visualize and communicate the different dashboard flows with other team members and stakeholders and helped dictate which versions we moved forward with for prototyping and user testing.
User Testing: I began by crafting our test plan and script with usertesting.com. I utilized moderated testing sessions with 10 testers. The main goal here was to determine which dashboard layout was most useable and intuitive for users and to test the discoverability of swipeable vs vertical scroll interfaces.
Version A: After testing was completed, we analyzed the results. Pros for Version A were that the user had dedicated views for both accounts and widgets. Some testers preferred these isolated views. However, many users had a difficult time seeing the page indicator at the bottom of the screen and 4 out of the 10 users did not ever discover the additional dashboard views.
Version B: For Version B, we found that the vertical layout was intuitive to users and the scroll behavior was expected. 10 out of 10 users were able to locate all of the information on screen. The only negative feedback we received for this version was that some users did not like seeing their net worth presented to them on the first screen. Especially for people in a lot of debt or with a low net worth, they wanted to option to hide or remove this widget all together.
Outcomes: To summarize our findings, Version B was the clear winner however, we needed to solve for hiding the net worth widget. We also needed to refine the account card UI, the number of accounts shown, create the experience for the dedicated account screen and the widget customizations.
Final Designs:
Final iPhone Prototype