Case Study :
MapleBank - A Banking Solution for Newcomers
Overview
MapleBank is a new Canadian online bank with no physical branches. The bank was quickly gaining traction and looking to expand to a new market. The goal was to create a simple product that was immediately clear to the new market and answered a critical financial need of that new market’s user base.
As part of a team of two other User Experience designers, together we built the MapleBank app. We integrated an easy to use registration form and created a clear onboarding flow that introduced and explained the service to the new market.
Type of Project
Student project for Concordia University as part of the UX Certificate program led by instructor Will Balladares.
Contributions
User Experience and User Interface. Process based practices (research, journey mapping, user interviews, data analyzing, affinity mapping, competitive analysis, flowcharts) and product based practices (low, mid and high fidelity wireframes, iterative prototypes and style guide).
Scope and Constrains​
​
6 week project, working collaboratively with a new team using Figma and Miro.
Team
​
Maeve Doyle, Elena Grin, Ana Arriaga
Approach
Define
Ideate
Prototype
Test
Problem
MapleBank’s current platform does not have the ability to transfer money internationally or exchange currencies. Right now, MapleBank is not meeting the needs of a wider market.
Possible Solution
We identified the new target market and narrowed in on a persona that fit the description of a new customer. The features that will be added to the MapleBank app will allow our persona to open an account quickly and easily, manage money in a convenient and seamless way, transfer and exchange her money and allow her to feel safe while using the banking platform.
So, let's talk about KPI's
Adding these features will allow MapleBank to meet the needs of a new market. The following KPI’s are examples of how these new features will enable the bank to successfully expand.
Conversion Rate
Tracking the percentage of successful transfers and exchanges will allow for the performance of these features to be measured.
Adoption Rate
The ability to easily open a bank account will allow for the number of new signups to increase.
Compliance and Security
To ensure users feel safe while banking, MapleBank will adhere to regulatory requirements and security standards.
Define
Identifying The Target Market
Meet Aya
Aya is new to Canada and originally from an embargoed country. She does not currently have a bank account and wants to transfer her savings to Canada. Aya needs a reliable and secure banking experience that allows her to manage her finances effectively.
So, why Aya?
She in not part of the current demographic
She is over the age of the current clientel
She is new to local banking
She identifies as female
Her specific personal needs are interesting to explore
Let's get to know Aya with Journey Mapping
We explored Aya's journey of opening a bank account to understand what her experience would be.
We discovered a potential gap in Aya’s experience when it came to transferring money to Syria and the need of proper documentation during signup.
Addressing these gaps falls under the responsibility of the UX and product teams. This means disclosing the required document and educating Aya about the limitations and regulations regarding specific tasks.
Ideate
Time To Look For Solutions
Brainstorming
Knowing Aya's needs, we started to ideate by brainstorming.
After brainstorming, we landed on two ideas.
International Transfers
International Transfers would allow Aya to exchange and convert her funds. She would be able to track her transfers, have an overview of her transactions and thorough communication throughout the transfers.
Multi-Currency Account
A Multi-Currency account would allow Aya to transfer her savings to Canada and if possible receive her funds in the Syrian pound.
Now, Onto Research
The research we conducted was broken down into three parts.
1. Informing Ourselves
2. Looking at the competitor
3. User Interviews
We informed ourselves on international money transfers with the goal of understanding how they work and what is required of them. We looked at various existing multi-currency accounts and explored alternative ways for sending money internationally.
We evaluated the accessibility, functionality and design of the competitor. We looked at Neo banks, major Canadian banks, remittance services and other international money transfer services.
We conducted 5 interviews to learn how users transfer money internationally. We interviewed people with international transfer experience, people with families in other countries and people comfortable with technology.
User Interview Insight
Money was being sent globally and of note to countries under Economic Sanction.
Users sent money via personal banks, international money services (Xoom, PaySend, Western Union, MoneyGram) and Crypto (for Sanction countries)
Pain points: time consuming, physical presence required, transfers not instant, many identification numbers needed and a lack of tracking.
Unexpected Challenge
So, sanctions, what are they? And why are they relevant to MapleBank and Aya?
Sanctions
Sanctions are imposed by Canada on specific countries and limit certain capabilities with those countries. There are a variety of measures, but what we focused on was the prohibition of financial transactions.
​​​Syria and Financial Prohibitions
Since Syria is one of the countries under economic sanction, and has a direct impact on Aya, we needed to figure out what this meant for finances between Canada and Syria. After investigating, we understood that it is prohibited to send or receive financial services from or for any person in Syria. This includes international money transfers, bank transfers and any other form of sending money.
Where does this leave MapleBank?
MapleBank will not be able to hold the Syrian pound. But the bank will however have the ability to hold many other currencies as a multi-currency bank.
Insight Into The Competitor
Looking at the competitors that offered International transactions and had a multi-currency feature, we decided what we wanted to keep and where we wanted to grow.
What to keep
Quick transfers
Good use of usability heuristics
Tool tips and functional design
A Minimalist design with white space
Opportunities for growth
Provide support and explanation for account set-up
Simplify International Transfers
Introduce the Multi-Currency account feature
Integrate a comprehensive onboarding process that explains the multi-currency and international money transfer services
Prototype
First steps : Flow Charts
We started by building four flows that the user would follow.
Flow 1 : Account Creation
Flow 2 : Recipient receives an International money transfer then converts it to CAD
Flow 3 : International transfer with a positive scenario
Flow 4 : Modifying settings to be notified of good exchange rates
From those four flows, we built our low-fidelity wireframes.
Flow 1 : Account Creation
Next step :
From Flows to Wireframes
Start
End
Flow 2 : Recipient receives an International money transfer then converts it to CAD
Start
End
Flow 3 : International transfer with a positive scenario
Start
End
Flow 4 : Modifying settings to be notified of good exchange rates
Start
End
Now, we perfect the flow
We perfected our wireframes to include the account’s empty state and the negative scenarios that Aya might encounter.
Let's test!
Our team had users test the low-fidelity wireframes and built an affinity map with their feedback.
By looking at the pain points of transfers and opening an account, we were able to understand the problems, prioritize them and made adjustments to fix them.
Implementing the Adjustments
Before
Unclear purpose of the drop down account types.
The multi-currency check-list didn’t seem useful
Client setup and Account creation were cluttered.
Elements were not well aligned
Simplifying the Account Setup
Too much information on one page
After
Drop downs replaced by navigation to a new screen that explains the different accounts type
Multi-currency check-list removed
Client setup and Account creation now divided into two parts to simplify the onboarding and prevent mistakes
Alignment revised
Checklist removed and instead information is provided once you navigate to the account type page
Client setup and Account creation is split into multiple screens
Elements are aligned and easier to understand
Making the transfer CTA more clear
Before
Some testers were not able to understand right away how to make a transfer
Other testers were confused with not being able to make a transfer directly from the balance overview screen
After
“Send” icon replaced by a more legible one. Label text was made large.
CTAs were added for transfers and convert buttons on CAD and USD accounts
Visual Iterations
The prototype went through an iterative process going from low to mid to high- fidelity.
Onboarding
Low fidelity
Medium fidelity
High fidelity
Balance Overview
Low fidelity
Medium fidelity
High fidelity
Account Overview
Low fidelity
Medium fidelity
High fidelity
Main Features
Three main features were added to the MapleBanking app which are the user onboarding, international transfers and currency exchange.
Onboarding
The high-fidelity prototype now features an easy to use registration form and an onboarding flow that explains the new features of international transfer and currency exchange.
Languages: Aya will now have the ability to set their language preferences at the start of the onboarding.
Continuous support: Info-icons can be seen throughout the registration form and in the app. These will allow Aya to get more specific information and detailed assistance.
International Transfers and Addressing the negative scenario
In case Aya tries an action that is not possible, she will be given an explanation for why and will see a list of alternative solutions.
Currency Exchange and Notifications
Aya can:
Set notifications for the best currency conversion rates
Track rate fluctuations
Make easy conversions when the time is right
Visuals
What about visuals?
Based on the feedback we received from the competitive audit and our testers, our team created three different color palettes and gathered various fonts and images for MapleBank.
We then finalized the branding by conducting a team vote.
Message
Tradition, Stability,
Growth, Innovation
Trust, Security
simplicity, Modernity
Colours
Font
Images
Colours and Fonts
Greens - represent growth and financial stability
Blue - signifies trustworthiness and security
White background: representing
cleanliness, simplicity, and professionalism giving a sense of clarity and space
readability
Hi-Fi Version
Montserrat and Lato fonts
Elegant appearance, works on screens of all sizes and ensures easy readability
Analyzing performance
Our primary Key Performance Indicator (KPI) of interest is the User Adoption Rate, which measures the number of users actively utilizing the new feature.
Since the app has not been launched yet, we currently lack access to data regarding the User Adoption Rate.
However, we did track another KPI related to user engagement, which is the time it took the users to complete a specific task. In this case, our users were able to open a multi currency account in under 2 minutes.
Next Steps
Research more how we could help Aya with transferring her savings
Conduct more thorough testing of specific flows like International transfer or currency exchange
Address lower priority issues that came up during testing
Develop additional flows to give Aya an even better experience.
What we learned as a team
Communication is key to working in a team
Embracing challenges and differences
Quality of the research can make or break the project
Getting to know the target audience must be the priority
Prioritizing user needs adds vibrancy and vitality to any concept
Let’s Work Together
Get in touch so we can start working together.