Bank of Montreal*

Brief

A UI/UX product redesign to improve the online banking via mobile app experience for BMO customers.

*This is an unsolicited independent redesign project of the BMO App (as of August 2023).

Project Details

Role: Digital Product Designer
Toolkit: Digital Product Design (UI/UX), UX Research

About

I wanted to investigate opportunities to improve BMO’s mobile banking app (and to improve my own UI/UX design skillset as well!)

As a BMO customer who uses their Mobile Banking App on a daily basis, I had my fair share of frustrations with the app and wanted to explore different potential opportunities to the problems I faced as a user. Below is an unsolicited case study and redesign of the BMO Mobile Banking Application.

Problem

BMO ranked last of the Big 5 Canadian Banks in Banking Mobile App Satisfaction and last of 12 major credit card providers in Credit Card Mobile App Satisfaction in a 2022 study conducted by J.D. Power.

From the 2022 study, the following four key findings were identified:

  • Overall customer satisfaction declines across nearly all segments, with the highest decline being for national banking apps by 17 points.

  • Financial health becomes a serious issue, with a ten-percent drop in percentage of consumers defined as “financially healthy” and a seven-percent rise in percentage of consumers defined as “financially vulnerable.

  • Digital solutions missing the mark on personalization, with only 53% of digital-first consumers saying they have a personal relationship with the bank compared to 73% of retail-first customers.

  • Spending and budgeting tools have positive effect on customer satisfaction, with a significant increase in satisfaction but utilization of tools are flat with just 27-38% of bank and credit card customers using them.

With this preliminary information on the current state of the industry and banking apps at large for some contextual understanding. the next step I took was to conduct research. The objective of my research was to narrow the scope to understand the BMO-specific problems with their mobile app as it was performing significantly below industry standards.

Research

I took a three-step approach to developing an understanding of the BMO-specific problems with their mobile app through (1) User Interviews, (2) reading User Reviews , and (3) by conducting an App Review.

I first looked into understanding the mobile banking user by conducting user interviews to gather a view on their usage habits and motivations behind how they used their mobile banking apps. Then, to narrow the scope to be BMO-specific, I looked into user reviews of the app on the App Store then clicked around the BMO mobile app itself. The intention was to align the sentiments collected from the user reviews with a specific flow or screen on the app. This three-step approach enabled me to identify a few key problem areas to drive the direction of my redesign.

User Interviews

Upon interviewing 5 different individuals, the two key findings were as follows:

(1) The most common mobile banking app use case is to check account balances and verify recent transactions

(2) Individuals aim to be efficient when navigating banking apps with typical visits being less than a minute per day

In the initial scope of the problem, it was clear that all banking apps across Canada were struggling to provide satisfactory experiences for their customers (with BMO providing the least satisfactory experience on average). However, what was not clear was the “Why?”. For my redesign of BMO’s banking app, it was pivotal for me to first and foremost understand the banking customer and the “Why?” behind their unsatisfactory experiences with Canadian banking apps before narrowing in on the BMO app in particular.

Here are some of the questions I asked:

  • How often do you open your mobile banking app?

  • What are the three reasons you open your banking app?

  • Do you feel that the banking app makes it easy for you to do what you wish to do on the app?

  • How long do you typically have the app open for in order to accomplish the tasks you have set out to do on it?

  • What is the most frustrating aspect of your mobile banking experience?

User Reviews

From reading the user reviews on the app store, the two key areas of pain points for users are as follows:

(1) Limited scope of information provided

(2) user interface and experience

First, I dove into user reviews on the App Store. Since the contextual study by J.D. Power was set in 2022, I sorted the reviews by recent to ensure I was looking at reviews for the current (and/or recent releases) of the BMO Mobile App.

Upon reviewing hundreds of user reviews over the span of the last 8 months, here are two key areas of pain points that users are expressing with regards to the app.

Limited scope of information provided

“I click on investment info expecting to see when my investment matures and other details but all it shows is account number … thanks for nothing.
- bambammed (1/5 Star Rating)

No features to make this app stand out amongst other Canadian banks. Poor real time reporting on investments.
- Anonymous (2/5 Star Rating)

User Interface and Experience

Reasons I gave it 2 stars ids because there have been marginal improvements to the app but the interface needs to be cleaned up. The key to a better app for customers is for a better/smoother transitions through the app. - JuniorC12_13 (2/5 Star Rating)

Interactions, design, and consistency are bad and are not on par with the rest of the banks … they are more fluid, their discovery and usability are superior. - AndyRSV (1/5 Star Rating)

It’s unbelievable how amateurish this app is in terms of UX/UI. Just to name a few: filter and manage card buttons waste space, text appears under the notch, clunky scroll animation (especially horrible if scrolling up). - Davidian48 (1/5 Star Rating)

Note that outside of these two main areas of pain points, a majority of reviews mention poor functionality and glitches across the app (i.e., face ID not working, getting logged out, verification bugs). As I do not have access to the codebase and have a limited view of the application architecture of the mobile app, it will not be a a key element addressed in this specific redesign.

Current App Review

I cross-referenced my findings from the app review with the existing context surrounding the problem to craft a set of pillars to guide my re-design of the BMO Mobile App

As a BMO customer, I clicked through the app. Below are some screenshots of the current app with my personal information redacted (besides my preference for Pantry in the PATH in Toronto for lunch).

Below are a few key observations that I made from clicking through the app. I cross-referenced them with the reviews I gathered in the above section to guide my redesign.

  1. Each account type (Chequing, Savings, Investments, and Credit Cards) all have the same identical Transactions / Details layout

  2. There is a lot of text with small font across the app, I had to double-take a few times to make sure I was clicking on the correct item

  3. Visually, it looks like a web app.

Solution

To address BMO’s problem at hand with their mobile app, the following redesign was conducted. In addition to the UI refresh, several new features were introduced throughout the app to provide an improved user experience in alignment with the key findings from our research above.

Generally, the BMO colour palette was adhered to except the blue was used strategically for contrast to draw emphasis towards itself.

Home Screen

The changes to the home page include increasing overall font size for the page to elevate accessibility and legibility, adding the Quick Actions section for a touch of personalization, and altering the presentation of the BMO promotion to garner more attention with the intention to drive a higher click-through rate.

Account Details

The changes to the accounts page include a swipe through carousel to go between accounts (e.g., Mastercard to Chequing) without having to return to the home page, key commonly used account actions laid out upfront to minimize clicks required to complete the action, and a modified transactions view with the functionality to view all and filter.

Transfer

The changes to the transfer screen was a re-organization of existing functionalities from the old app. By including distinct icons (i.e., Transfer and Global Money Transfer on the old screen uses the same symbol) on the blue contrasted bubble and an increased font allows for improved accessibility of these common actions under the transfer tab.

Navigation

The changes to the navigation screen include the switch from it being on third tab of the old navigation bar to a side menu accessible on from all pages. This change allows for a more seamless navigation throughout the application, rather than require individuals lose sight of their current activity to access the navigation menu on the application.

Additionally, the information on the old navigation screen was condensed and categorized to fit the newer, more streamlined menu. For example, the ‘Your Transaction’ options on the old screen was pushed towards the new home page through the Quick Actions and the ‘Add Something New’ options that one previously had to scroll for on the old navigation menu was brought up in the menu.

Investments

The investments page is essentially net-new for the application. From the research conducted, one of the key goals of users when using a banking app was to efficiently check balances—this includes investment account balances. As a result, two views were created on the investments tab that enables users to be able to quickly see the value of both (a) their investment accounts and (b) their individual investments.

Concluding Thoughts

This was my first ever UI/UX design process that I completed by myself from end to end. This was quite challenging but fun at the same time! I look forward to developing my skillset further in product design!