MortgageSense
Helping first-time homeowners understand and complete mortgage applications, digitally.
Role
As one of the interaction designers and prototypers in the project, I worked alongside four other designers to collect research, and build out design systems, interaction flows, and content layout. In addition, I took on a managerial role, ensuring efficiency in workflow and team communication.
Outcome
A secure and easy-to-follow guided mortgage process that provides customers with support through online resources and mortgage account managers.
Client
Tangerine Bank (Not Affiliated)
Project Team
Victoria Maslova, Pradeesh Motha
Paola Ortiz, Cora Zhao, Bryan To
Duration
6 weeks (Oct–Dec 2022)
Tools
Figma, Adobe CC
Context
The solution is a product proposal created within the bounds of a senior-level experience design course at Simon Fraser University, and is not directly affiliated with Tangerine bank.
A solution that guides clients through the learning, application, and closing process all on one platform.
Easier Access to Services
Tangerine’s existing point of entry for mortgages has been fully redesigned to show off services and link directly to MortgageSense.
A Step-by-Step Guide
Surfacing essential home financing information through three distinct phases. Presented through familiar patterns with different outcomes including learning, application, and client after-care.
Securely Send Documents and Receive Feedback
Eliminate the need to send confidential documents via email. Submit documents directly on MortgageSense and get clear feedback from
Celebrating Milestones
Bring a more personal touch to the product. Milestones can encourage clients to stay on track with their tasks while celebrating their major accomplishments.
Resources + Tools
Whether it be articles, videos, or interative tools, have all your mortgage related resources in one space, along with a re-designed mortgage calculator.
Process
Using an agile approach to collaborate in a design sprint
To keep iterations moving fairly quickly, we worked in a design sprint to keep the team on track. We followed these six main steps: Understand, Define, Sketch, Decide, Prototype, and Validate. It’s important to note that these steps were not followed in a linear fashion and steps were frequently revisited.
Problem Space
Financing a home is a stressful and complicated process for first-time homebuyers
Tangerine is a digital-only bank that offers all of their services in a self-service format with the exception of mortgages. With financing a home is a stressful and complicated process for first-time home buyers who have little to no knowledge of the mortgage process.
Mortgages are complex and customers have to deal with multiple systems and touch points.
They are not provided with a single interface for mortgage application, documentation and follow-up.
– Improving Mortgage Customer Experience, Report by Infosys, 2019
Opportunity
To create a seamless digital experience for an outdated and complicated process
How can Tangerine increase transparency, credibility and guidance throughout the mortgage process in order to empower clients to make well informed choices for home financing.
The current process is missing crucial guidance around the application stages, and most of the document handling is relayed through email or phone conversations, resulting in delay and compromised security of sensitive information.
Stakeholders
We conducted a survey with 192 prospective and experienced home-buyers
to know our problem space better and clearly find a place to intervene. The goal of the survey was to outline the demographic of the target user of online banking and to identify steps of the home-buying process individuals find most challenging.
67%
of current and prospective home buyers reported feeling overwhelmed, anxious, and lacking knowledge in approaching or going through the mortgage process.
– Survey of 105 individuals aged 20 to 42 interested or participating in home ownership; Independent Study conducted by the team. Nov., 2022
"I still don’t feel confident in my understanding... When I would begin to feel like it was making sense, there would be another pile of paperwork or someone else to talk to without a logical reason."
– 34, Tangerine client, who has gone through the mortgage process. Study conducted by the team. Nov., 2022.
Some external research was also done:
51%
of first-time homebuyers are less than 35 years old
– Stats Canada, 2018
62%
of Tangerine clients are 18 – 44 years old
– SimilarWeb, 2018
87%
of the target group prefer person-less banking
– Phoenix SPI – FCAC, 2019.
72% of mortgage consumers gathered mortgage-related information online.
65% of first-time buyers got their mortgage with their current financial institution.
User Journey
To learn where within the current user flow we would intervene
we mapped out how existing Tangerine mortgage clients go through the process to apply for a mortgage. Using data obtained from our research, we found that a lot of the pain points originated from the learning and pre-approval phase. Particularly, the aim of the first design sprint was to tackle the question of what financial considerations should be made before applying for a loan, and what the stages of applying for a mortgage are.
A client journey map highlighting the existing journey and pain points.
Ideation
Working together to find ways to alleviate pain points
We looked into our journey map, examples from industry products and design professionals, then sketched initial ideas of the digital solution. These ideas were combined into a consumer journey through a storyboard, illustrating how an experience unfolds for the home-buyer.
Overview of sketches completed during the ideation process
Initial wireframe completed during the ideation process
Initial prototype of the platform focused on building the knowledge base for the first-time home-buyer by diving up the entirety of the home-buying process into 10 key steps, as discovered in secondary research. Each step would include a description of that point in the process and provide a list of recommended and required steps to complete.
It also featured a messaging centre and a log of recent changes to further document the submission and processing of documents, offering a peace of mind for the client in seeing their digital paperwork move through appropriate review and feedback stages.
Overview of the initial prototype completed during the ideation process
Testing
Making sure our proposed solution makes sense for our stakeholders
We conducted qualitative user interviews with 10 different individuals to validate our ideas and assumptions.
Interview Highlights:
"Why do I have to be a Tangerine client to be able to learn about mortgages?"
– Participant A from our qualitative user interview
"There's a lot of steps when I first log in and it seems a little overwhelming to be seeing this all at once."
– Participant A from our qualitative user interview
Iterations
Refining the prototype to meet user needs and concerns
Following this feedback, we went back through the ideation, deciding, and prototyping process to refine key areas that caused pain points for our users.
In order to address the issue of dense information, we reconfigured and split up the content into three distinct phases: the learning, application, and the closing process. The learning module was then opened up to allow anyone to access the resources needed to learn about mortgages.
Interact with the different areas of the prototype. Alteranatively, visit the prototype here.
This prototype was then put through several qualitative user interviews and was better received when compared with the previous round of interviews.
Interview Highlights:
“It actually feels less stressful than the mortgage process I went through”
– Participant A from our qualitative user interview
“I appreciate getting a taste of the first stage before making a full commitment to opening an account [with Tangerine].”
– Participant B from our qualitative user interview
Art Direction
Designing to reflect client needs and the Tangerine brand
Circular is a geometric sans serif font family that brings purity together with functionality for high readability. It was chosen for its friendly, open features that compliments MortgageSense’s approachable tone.
Staying true to the brand’s iconic accent orange, the goal was to elevate content accessibility. As a functional website providing banking services, the neutral colours such as black, grey and white establish a sense of fundamental clarity.
Buttons, cards, and icons in various states were clearly defined in order to ensure a clear and cohesive experience for users.
Conclusion
MortgageSense allows clients to extend their knowledge to help them make financial decisions independently and confidently.
MortgageSense allows Tangerine to pioneer the evolution in digital banking, embracing digital technologies to redefine the touchpoints, expectations and modern needs of clients. Serving clients in their moment of need contributes to client loyalty to Tangerine.
Reflection
There was a whole lot of coordinating and organizing
With this being an academic project with a small timeframe for completion, as the product manager, I spent a lot of time working around everyone’s personal schedules. I communicated with each team member, ensuring that everyone was on the same page and working together as efficiently as possible.
In addition, I was able to practice my prototyping, designing, and research skills throughout the project. It was interesting to collaborate with my team members who were all working towards one common goal, but with many different ideas on how to execute.
This project was featured in the SFU School of Interactive Arts + Technology Showcase (link) and the SFU Faculty of Communication Arts and Technology Undergraduate Conference (link).