Maple Bank Project
Building a Mobile Application
Maple Bank
Maple Bank is a neo-bank that was looking to expand its customer base by stepping outside its current demographic. To do so, they chose to expand their mobile application to offer a full and robust set of services and products. The main focus was to simplify the onboarding process and international transfers to as few steps as possible.
The Problem
Maple Bank faced the problem of lacking a comprehensive mobile banking experience, prompting the need to expand its offerings and usability in order to attract new users and meet their needs. Through a customer-centric approach and a deep understanding of evolving user expectations, Maple Bank embarked on a transformative journey to reimagine its mobile banking platform.
Audience
Our Persona
Our persona Aya is a 40-year-old Syrian immigrant who newly arrived in Canada and is actively seeking financial products.
Needs & Goals
Her primary objective is to transfer money from her Syrian bank account to her new Canadian account with Maple.
Untapped Demographic
Aya represents an untapped demographic for Maple as she falls outside the age range (18-30) and is also female, while the majority of users are male.
Roles & Responsibilities
Initially, tasks were evenly distributed among team members Toby, Chanel & Rachel, based on the nature of the student project. As strengths emerged and interests became apparent, we re-imagined roles accordingly. Nevertheless, as UX designers, we collaborated closely throughout the project.
Toby: Project Manager, UX, UI & Wireframes
Chanel: Research, UX, UI & Wireframes
Rachel: Presenter, UX, UI & Wireframes
Scope & Constraints
We faced a challenging deadline of 6 weeks, compounded by the fact that each team member had a full-time job. Conflicting schedules and a non-existent budget added additional constraints to the project.
The Process
Empathize
Assumptions
Users demand seamless banking experiences with quick transactions and simple processes. Lack of accessible communication on banking platforms leads to frustration and a poor user experience. Banks must prioritize user-centric design and streamline communication channels to meet modern users' expectations.
User Interviews & Affinity mapping
This Revealed a big problem: time. The time it takes to on-board, the time, it takes to fill out complicated forms, and the time it takes to wait for international transfers to go through. A lack of communication and transparency was also a huge issue among users.
Competitive Analysis
This opened our eyes to the lengthy processes to onboard and perform international transfers at popular banks in Canada. Through some research and a deeper understanding of banking processes, we proposed to minimize the steps and subsequent time it takes to complete the tasks.
Define
Insights
This user journey chart provides a comprehensive overview of Aya's needs, goals, and potential solutions to address her pain points. By analyzing her journey, we gain valuable insights into the challenges she faces and the opportunities to enhance her experience. The chart serves as a visual representation of the user-centric approach taken to understand Aya's perspective and design solutions that cater to her specific requirements.
Storyboard
In order to assist us in putting personas, user stories, and different research findings together we came up with this storyboard.
It captures her journey as a newcomer, seeking a banking app for easy money transfers and a successful transition. She discovers Maple Bank through a friend, downloads the app, and appreciates its security features. Aya finds the account ideal for low-cost transfers and quickly learns to receive money from her Syrian bank account. The process is efficient and relieves her stress. This storyboard showcases Aya's happy path with Maple Bank, highlighting how the app meets her needs and provides a seamless banking experience.
Ideate
User Flow
This is the flow that Aya will take within the app to onboard and send or receive money internationally. Aya begins by signing up for an account and providing the necessary information. With a user-friendly interface, she easily navigates through the app to initiate money transfers and receive funds internationally. The flow emphasizes a smooth and intuitive experience, ensuring Aya's needs are met efficiently and securely.
Paper & Low Fidelity wireframes
These images showcase the early stages of the design process for the Maple Bank project, featuring paper sketches and low-fidelity wireframes representing Aya’s user flow. These visual representations were used to bring ideas to life and explore different design concepts.
MapleComm
A solution to some of the problems materialized in the integration of a communications platform into the Maple Bank app called MapleComm. With MapleComm, users are able to send and receive instant transfers of up to $1000 through the chat platform, make free long-distance phone calls, as well as receive 24-7 support from the Maple Bank team. Please click the icon to the right for more info on Maple Comm.
Branding
Teal and turquoise were the first colors chosen for Maple’s branding based on the emotional response associated with them such as relaxation and trust. Gold and rust were selected as secondary colors to give a feeling of prosperity and a vibrant, playful edge.
The Maple Bank logo features a vibrant maple leaf in teal, gold, and orange tones, evoking trust, nostalgia, and prosperity. The faint corduroy pattern adds a subliminal message of safety and comfort. It blends ancient and youthful elements, symbolizing our commitment to heritage and innovation. The logo inspires confidence, invites engagement, and represents our secure and customer-centric banking experience.
Prototype
Flows
For the purpose of this project, we focused on Aya’s primary goals:
Flow 1 shows a complete onboarding with dashboard explanations and a short quiz to help pair Aya with the best account for her needs.
Flow 2 shows the process of Receiving an international transfer.
We made these processes into as few steps as possible.
Please click the image to view the prototype
Test
Iterations
After user testing, several changes were made to clarify Aya’s experience:
1. Several misleading features were altered
2. Changed the color of the background for a cleaner and more modern design.
3. The addition of a task completion page to help Aya acknowledge when a task had been successfully completed
4. A buffer page of option icons was added to avoid screen clutter on subsequent pages
5. A language option was added to the welcome page to allow for greater accessibility
1. Before
1. After
2. Before
2. After
3.
4.
5.
Outcome
Through thorough user testing and competitive analysis, we achieved a streamlined onboarding process and optimized international transfer flow for Maple Bank. User feedback and best practices were carefully considered, resulting in a seamless and intuitive experience. Our international transfer flow outperformed competitors, reducing steps by 30%. These efforts positioned Maple Bank as a leader in the industry, ensuring a smooth user experience for onboarding and international transfers.
Click on the image to view prototype
What We Learned
The group developed skills in collaborative teamwork, task delegation, end-to-end project management, goal setting, scoping, progress tracking, and iterative design based on feedback. Between the wireframing and hundreds of What’re App messages, the team grew together and didn’t always agree, but got the job done and learned some things along the way:
Personally, I learned that he has what it takes to be an effective leader.
Chanel found out that she has great attention to detail like research.
Rachel improved her Figma skills and multitasking.
We dealt with some friction and disagreements but did so with kindness and empathy. Most importantly we served our clients and kept their users at the forefront of our decision making.
The Future of Banking
Some limitations held us back from implementing all the things we could dream up, however, the future of banking is near.
Open banking is not yet available in Canada, it was supposed to be implemented in Jan of this year (2023), but when it is we will be ready:
Introducing MBank, a subsidiary of Maple, and a banking system built entirely on the cloud utilizing open banking through an Application Programming Interface (API).
M has made several important partnerships to bring cutting-edge services that will help solve Aya’s pain points and give her the advantages she deserves such as:
Multi-currency accounts
In platform currency exchange with competitive rates. M will actually have its third-party partners scour the internet in search of the best rates available live and up to date (think Kayak but for exchange rates)
By partnering with SWIFT gpi, we will also ensure that her international transfers are seamless, safe, traceable end-to-end, and most importantly, faster than ever before
We believe these updates and upcoming products will position Maple as the most cutting edgeand competitive banking group, and more importantly, it will enable them to better serve their customers new and old.
Please click the image to view a rough example of the prototype.
Click on the image to view a low fidelity prototype
Toby: toby.baghi@gmail.com
Chanel: coulombe.chanel@gmail.com
Rachel: r.osborne.designs@gmail.com
2023 by The Journey Mappers
Concordia UX Design Program