BMO

Retail Investment

Vision & Scope

Challenge was to revamp existing flows and pages for better usability. The pages I updated include the main products page, mutual funds, portfolio hub, AdviceDirect Pricing, Home page for personal banking, and FHSA page. Today we’ll focus on the FHSA (First Home Savings Account) page design introducing the FHSA calculator. The prompt was to take the existing design/flow and modernize it in a way that it’s easy to use and understood by the user. The FHSA calculator didn’t exist on their FHSA page and it was overall just outdated leaving the user with tons of questions on how they can benefit from opening an FHSA account. I was requested to present an interactive prototype and a modern design that includes the calculator workflow.

In this case study, I will elaborate on my design process and how my reasoning and thoughts behind the decision were evolved in this short sprint.

Process Overview

Given the time limit of the project (2 week sprint), I followed the double diamond design process and accelerated through phases including understanding the problem, diverging on the solution, managing stakeholder interviews, decision-making, prototyping /testing, and delivering the result.

Defining the problem

Instead of straightly diving into the user research, I first looked at what other banks were doing with their “First Home Savings Account” page, trying to find inspirations and gaps among existing problems and solutions of online digital banking products. I also looked at other calculators they had for TFSA, RRSP, loans and mortgages, etc.

Secondary research

Although it is quiet straight forward to use a calculator online, the user can have many questions regarding how much they’d save upon buying their first home, or exactly how much they should contribute to their FHSA, or what the expected rate of return should be to learn about their tax benefits etc. With all this information, the user can get overwhelmed when trying to enter their info on a calculator, hence why they end up calling customer service instead to inquire more from a team representative in order to help them do the calculation and then proceed forward with an appointment.

According to existing research, here are some of the main pain points that users are facing when they land on the FHSA page:

  • No easy way to calculate their FHSA and how much it will grow over time

  • The FAQ’s section doesn’t have enough content for the user to understand the benefits of having an FHSA account

  • The page’s layout is outdated

User research

To quickly understand the user insight and find out exactly what they need, I conducted an online survey to collect answers and data. I also utilized the existing user research BMO already had for the FHSA page and calculator from a prior design exploration sprint. Also facilitated discovery sessions with the team, mapping out customer journey etc.

Research Survey

This is the actual form that I created using SurveyMonkey, which includes multiple-choices questions and also open-ended questions because I was also trying to gain as much qualitative insight as possible.

I posted the survey on Reddit and also shared it in the WeChat groups asking for feedback. I also had a few short one-on-one interviews with friends, former co-workers and family who have savings account and bank with major Canadian banks, asking them pretty much the same open-ended questions to find out how they felt about certain features on the FHSA page and how often they’d use the calculator feature.

I was fortunate enough to get over 50 people to fill out the form, here are a few results from the survey which helped me dive deeper into the user problem.

I asked questions about the age (demographics), the frequency, and the functionality. They were also asked if they have any concerns and frustrations when using the FHSA page or any of the calculators on their bank’s website. Here is the summary of those answers:

Based on the result of my user research, I got these key findings:

  • 58% Millennials, 23% Gen Zs, 19% Gen X.

  • 43% use financial calculators online to know exactly how much they’ll be saving and growing their money over time. They mentioned concerns in saving and budgeting.

  • 77% find online FAQ’s useful for TFSA/FHSA/RRSP/loans/mortgages.

  • 68% dissatisfied with the UI and workflow.

  • 33% mentioned they would most likely book an appointment with an advisor to get all the info rather than calculating their savings online or to know if opening an FHSA account is right for them.

CC ANALYSIS (FHSA PAGE) INSIGHTS:

1- Scotiabank:

  • CTA to open an FHSA account with “Special offer” feature.

  • Info on what is FHSA and the benefits of opening an FHSA account.

  • Info on eligibility, registered plan, and contribution limits.

  • FAQ’s

  • How to build your FHSA

  • CTA for “Book an appointment” and “Contact us” with the phone #.

3- Toronto-Dominion Bank:

  • “Book an appointment” CTA

  • Info on how FHSA works, eligibility, benefits, comparison between FHSA, RRSP, and TFSA.

  • FAQ’s

  • “Contact us” section with the option to call or locate a branch.

  • “Home ownership” calculator feature.

2- RBC:

  • “Open an account” CTA.

  • Info on what investments you can hold in your FHSA account

  • FAQ’s

  • Info on account benefits and eligibility

  • “Learn” tab

4- CIBC:

  • Overview of what FHSA is and how you can benefit from it.

  • Eligibility, contributions, investments.

  • Open account online.

  • Book an appointment with an advisor.

  • FAQ’s and a search tab to enter questions.

  • Call and email option available.

CC Analysis (Calculators):

I was fortunate enough to get over 50 people to fill out the form, here are a few results from the survey which helped me dive deeper into the user problem.

Like what the double diamond principle suggests, after going wide, I went narrow and reached to synthesis phase. Then I was able to organize all of those unstructured research findings into structured themes and insights.

The refined pain-points can be summarized into four categories:

  • Personalized experience: Some of the top retailers like Amazon, Netflix, are using customer behavior data and predictive analytics to create a personalized customer experience. Consumers especially millennials choose financial products based on how well they incorporate personalized experiences. So it’s the industry trend to use data analysis coupled with machine learning and artificial intelligence to offer a better user experience. Although online webpages cannot really be personalized, but we can work around the verbiage for the calculator to make it more personalized so the user feels like it was calculated just for them.

  • Straightforward information: According to the survey result, majority of the users are using financial calculators online to find out how much they’ll be saving and growing their money over time, as well as learning more about opening such accounts with their banks using the information provided to them on the site. They also expect FAQ’s and support provided to them online so they can effortlessly book an appointment or talk to an advisor without a hassle.

  • Clearly and intuitively designed UI: A lot of banks face the problem of lack of usability on their websites, and the solutions they offer are mostly outdated and user-unfriendly, which had been mentioned a lot in the response of the online survey. The FHSA pages almost look the same with the same kind of info on every bank’s website.

  • Effortless financial management: Young generations have been used to living in a high-speed environment, so they are more inclined to the user experience of certain digital products that are simpler and easier, especially due to the lack of financial knowledge among the majority of them, the effortless management to banking is very necessary. Therefore, the calculator should be easy to use and straight forward without any complications.

User Persona

I then synthesized all my research findings into two user personas, which I created to make sure I focused on the right user and specified their needs and goals.

Redefining the problem

At this point, based on all the information I got and synthesized, I was able to redefine the original problem into:

Following these structures, I came up with a list of features. Since this project didn’t request me to tackle a bunch of problems all at once, so I used the MoSCoW Method for feature prioritization.

Executing the solution

Information Architecture / User flow

I first built the information architecture of the FHSA page and how users will navigate to the FHSA calculator from there, so that they could easily find everything they need without big effort.

Wireframe

I started off designing low to mid fidelity wireframes before going into high-fidelity. I made sure to make the FHSA page and calculator informative but also clean, organized, and predictable. You see all the essentials right away and you intuitively know where to find the rest.

Since the visual hierarchy must reflect the information hierarchy, especially in this case, data hierarchy is expressed through a growth chart with the filter options next to it.

I was inspired by the TFSA calculators online. The filter option lets users select income, location, how much and how frequently they plan to contribute to FHSA each year, along with the expected return by the time they look to buy their first home. Once these filters are populated, the graph next to it will show them exactly how much their money will grow over the selected period of time and how much they’ll save with their contributions.

I also gave them the option to book an appointment to discuss further details or contact an advisor, along with a few FAQ’s.

Hi-fi Prototype

Picture in the hero banner was a Shutterstock image provided by BMO, and all the other assets were from their design library including the bar graph and filters, as well as drop downs.

Learnings:

  • Calculators to look consistent on other investment account pages

  • Users want a straight forward calculator that they’re used to

  • Think about user’s existing mental models

  • User test throughout the project to get early feedback for the calculator (future iterations)