FINTECH | BANKING | CASE STUDY

Franklin Templeton Investments App Redesign

01. OVERVIEW

Franklin Templeton Investments provides consumer and business banking to over 400+ banks and credit unions. It’s white-label application allows financial institutions to customise their mobile and web interfaces based on their branding and feature-specific banking needs . Over time, its user base grew and the existing experience couldn’t handle the demands for additional features upon user login. In 2020, we set out to redesign the product to improve the load time post-login experience and provide users access to their most-used financial information features.

MY ROLE

Market + user research, usability testing, lo/hi-fidelity design

THE TEAM

3 designers, 1 product manager, 6 engineers

DURATION

6 months from conception to production

TOOLS

Adobe XD, Balsamiq, Mural, Jira + Confluence, UserTesting

02. DISCOVERY

Competitor Research

The first step in our design process was to complete a competitor analysis of our direct SaaS competitors and leading financial institutions. The main goal was to highlight existing strengths and weaknesses within our product to aid us in making informed decisions during the next stage of the redesign.

Key Findings:

🖱 White-label apps with no customisations

Other SaaS providers used generic templates that only allowed for branding changes.

📱 Quick Action Widgets

Shortcut allows users to access their most-used banking actions (i.e transfers and bill pay) without leaving the dashboard view.

🖥 Dashboards customisation based bank and user preferences

During onboarding, users were given options to customise their dashboard according to their financial needs.

🏦  Detailed transaction information

User accounts included geo-location services and search & filter options when viewing a transaction.

User Research Process

 
 

Persona Synthesis

Once the user interviews were completed, we needed to analyse our data by conducting a persona synthesis. This allowed us to rank each user against several attributes based on behaviour and attitude, to determine which users had similar attribute rankings and discover common traits among them.

Key Findings:

🏦 Users had an average of 3 bank accounts

Users who had five or more accounts were the ones who shared joint accounts with family members.

💰 Checking and Savings are the most popular account types

All users interviewed had both checking and savings accounts.

📲 Transfer is the most-used feature

Users primarily used our banking app to transfer money and to check their account balances.

👫  Load time and missing functionality are issues

Users often compared our banking app with other finance apps they use daily such as Paypal and Venmo.

User Personas

After conducting the persona synthesis, we had enough data to start crafting our consumer end-user personas. These personas were referenced throughout the redesign in order to guide our design decisions moving forward.

Example of one of the three user personas we created

03. DESIGN PROCESS

Rough Sketches

Lo-Fi Wireframes

 Changes Made:

  • Quick action placement either inside account card or as a separate widget

  • Reduced number of accounts in view on both mobile and web

  • Widgets are now in view by reducing the number of accounts shown upon login

User Testing Round 1: Unmoderated A/B Testing

Once the team had two solid ideas for the dashboard interface, it was time to test them out with real users. We conducted A/B testing with 10 users within the UserTesting platform. The main goal was to determine which dashboard layout was the most intuitive for users and to test the discoverability of a swipe-able vs a vertical scroll interface.

    • 50% of users liked having separate views for accounts and widgets.

    • 80% of users had difficulty seeing the page indicator at the bottom of the screen.

    • 30% of users did not discover the additional dashboard views. This was prominent with our elderly testers (aged 65+)

    • 80% of users found the vertical layout intuitive.

    • 100% of users were able to locate all the information on the screen.

    • 20% of users did not like seeing their net worth presented to them on the first screen. This was especially true for users who might have a lot of debt.

User Testing Round 2: Moderated Testing

Based on our findings, we made refinements and now it was time to test the dashboard and account interfaces. I helped my team lead write out a test plan and script to use with the 10 participants inside the UserTesting platform. The tasks asked were primarily focused on navigating from the dashboard into a specific account and seeing if users understood the new interface by having them search and view transaction details.

Key Findings:

  • 70% of users were able to navigate from the dashboard to the accounts screen.

  • 30% of users used the sidebar to navigate to their accounts.

  • 70% of users tapped on the “view all accounts” button to view the rest of their accounts.

  • 80% of users found the top colour line on the accounts card, “an easy way to differentiate between my different account types.”

  • 80% of users found the transaction chips on the account cards screen made no sense because they knew if they expected to view their account transactions by tapping on the account card.

  • 70% of users asked why there was an option to copy and paste their account information.

  • 80% of users said the overall flow was “easy to navigate.”

04. IMPROVEMENTS + FINAL DESIGNS

    • Reduced iconography

    • Logout in the left sidebar is pinned to the bottom of the sidebar. The logout button is now available in both left and right menus providing easy access to securely ending an active user session.

    • Dashboard view will serve as the landing screen in mobile apps by default. This new dashboard contains several new Marketing opportunities as well as a refined view of Accounts.

    • Broadcast Message has been added to the Dashboard view to provide a means of communicating with your users via text without images.

    • Account Cards have replaced the table of accounts in mobile, becoming an object which is reused in subsequent views offering a consistent and familiar home base for account information.

    • Quick Action & Marketing widgets customisable by financial institutions based on their user’s needs.

    • Accounts are no longer shown upon login.

    • Accounts live in their own section and can be accessed through the dashboard or sidebar.

    • Search includes the option to filter by account name, number, or transaction.

    • This view maintains the Account Card at the top of the screen and offers transaction activity in a table view below as well as additional balance and Payment Due indicator(if the account is credit).

    • Options to access Account Details exist and individual transaction details can still be accessed by tapping an individual transaction.

    • In mobile, the transaction details view has become its own screen allowing users to focus on those details.

 

Web Final Designs

05. OUTCOMES + NEXT STEPS

For this redesign, we worked with two financial institutions to beta test the new version of the app and they are currently live in production.

 

One bank has 12K downloads with an App Store Rating of 4.6 stars.

20+ financial institutions are now under new contract to have receive new app

25%

REDUCED LOAD TIME UPON LOGIN

35%

INCREASE IN SALES AFTER SUCCESSFUL BETA LAUNCH

Next Steps

Our team would like to complete more testing with users who have had both app versions and to create additional widgets for the dashboard interface. We will also look at future UI and UX enhancements throughout the rest of the application including our biggest feature — money transfer workflows during phase two of the redesign.