Finnect
App that helps newcomers in Canada find and compare financial products to empower them to make informed and confident decisions.
PROJECT OVERVIEW
Timeframe
10 weeks
Role
UX Researcher, UX/UI Designer
Tools
Figma, Otter.ai, Notion, Sketchbook App
Deliverables
Mobile App, Design System, Marketing Website
Platform
Android, iOs
Goal
This project involved the entire UX research and design process, focusing on developing a digital solution to help newcomers to Canada be more confident in their financial decisions.
STARTING POINT
As a newcomer myself, I recently relocated to Canada. As I began to settle here, I became overwhelmed by everything that starting a new life entails.
I knew I could not be the only one, so I started talking to other newcomers and found out they were experiencing similar feelings. That is what motivated me to learn more about the realities of immigrants in Canada and search for opportunities to help them/us.
Design Process
I used a human-centered approach to identify a problem and develop a solution that addressed user's need.
EMPATHIZE
Understanding the Problem
Through literature review, I learned that Canada has one of the world's highest annual immigration rates, and that most immigrants come to seek better job opportunities. But what are the struggles they face?
53%
of newcomers mainly receive financial advice from family and friends, which could increase the risk of financial fraud or abuse.
24%
of newcomers report they keep up with their financial commitments but struggle
to do so.
newcomers are more likely
to report poorer financial management and a lack of a retirement plan.
Source: Canada.ca, Tandfonline.io
Conducting Interviews
To better understand the problem space and learn about users' behavior, motivations, and pain points, I conducted interviews with three newcomers to Canada who have been here for less than two years and whose first language is different from English or French.
“I don't invest [my money] or make any wise financial decision with it.’
“You don't know exactly what you're looking for and you might be missing out on some opportunity”
“[All of my financial products and apps] were referred to me by one of my friends who was already living in Canada“
Synthesizing my Findings
I analyzed my findings using the Affinity Mapping process. I identified 90+ key data points and categorized them as motivations, pain points, and behaviors. Then, grouped them into common themes:
🔍
Sources of Information
Newcomers struggle to find clear information on managing their finances and often begin their research by relying on advice from friends and video content creators.
💡
Financial Knowledge & Confidence
Newcomers don’t fully understand how the Canadian financial system works and lack confidence in their financial decisions. They feel they could make better choices.
🏦
Bank Interaction
Newcomers find their interactions with banks mainly satisfactory but would like advice on how to get a better credit limit.
🌎
Differences with home country
Newcomers find certain aspects of the Canadian system better, while also noting challenges in adapting to the new system.
I decided to focus on the theme 💡Financial Knowledge & Confidence. Users' main frustration was not being confident with their financial decisions. They are aware of the many opportunities for newcomers in financial management but would like to be more informed.
The Challenge
How might we help newcomers to Canada improve their financial knowledge so they can be confident of their financial decisions?
DEFINE
Defining the Target User
After consolidating my primary and secondary research findings, I built a primary persona that represents the core attributes, motivations, and expectations of my target user.
Experience Map
I created an experience map to visualize how Cam currently experiences the problem space. By defining the stages on Cam’s journey, I was able to identify opportunities to alleviate frustrations and challenges.
Selecting the Intervention Point
I decided to start designing a solution that addressed the lowest point in the current user experience: when users start researching.
Once users become interested in a financial product, they often feel overwhelmed by the amount of choices and information they encounter. With so much information to manage, there's a clear need for them to plan their research.
This will enable them to make informed decisions without feeling regretful or doubtful in the future.
IDEATE
Developing a Solution
With a deeper understanding of the problem space, and having decided on the moment of intervention, I began to define the functionality of a digital solution.
Based on my persona, I authored 35+ user stories that capture their functional needs and organized them into 5 distinct epics. These epics helped me outline the functionalities and features that would add value to the users.
Epic #1
Input Financial
Information
✏️
Epic #2
Find Custom
Financial Options
🪙
Epic #3
Compare
Financial Products
⚖️
Epic #4
View Projected
Results Over Time
📊
Epic #5
Get Personalized
Financial Advice
💼
As I aimed to help newcomers to Canada improve their financial knowledge so they can be confident in their financial decisions, I decided to focus my design solution on these epics:
Core Epic: Find Custom Financial Options
Secondary Epic: Compare Financial Products
Designing the Task Flow
I created a task flow diagram that visually displayed the user flow logic involved in finding a chequing account and comparing options when interacting with my digital product.
Key Info: Chequing accounts are not common outside of Canada and the US.
PROTOTYPE
Sketching the Solution
I looked for inspiration to gather ideas for the layout of each location in the task flow. I created a UI Inspiration Board to reference it and began sketching the preliminary layout and interface.
I created 3+ variations of exploratory sketches for each location and selected the most compelling ones into a refined set of solution sketches.
Wireframing and Prototyping
Based on my solution sketches, I designed an initial set of grayscale digital wireframes and an interactive prototype. The ultimate goal of this mid-fidelity prototype is to test the usability of the digital solution, which is why it does not contain images, colors, or final icons.
TEST
User Testing
To understand how well the digital solution works I conducted 2 rounds of user testing. By having real users try it, observing them as they attempt to complete tasks, and asking for their opinions, I'll determine how "usable" the proposed app is.
For both testing rounds, I created a plan to provide testers with the same introduction, scenario, and follow the same script. This way, I could avoid biases.
✍🏻
Scenario:
Imagine you've just arrived in Canada, you don't have any Canadian financial products and need to start setting your finances here.
You want information about chequing accounts that offer zero-fee payments and want to be able to make unlimited transactions. How would you go about it?
Improving Usability
Based on the feedback received during the rounds of user testing, I designed a revised version of the prototype, making refinements to the copy, layout, and interactivity.
Here are some of the main changes.
📲
Home
Feedback:
Users identified the main button for finding a product but hesitated to tap on it. The term 'product' was causing some confusion among users.
Solution:
1. The main buttons were made more prominent and included shadows in the high-fidelity version.
2. The copy on the main button and the activity section was changed to be more easily understood.
📲
Basic User Information
Feedback:
The copy for 'Average Amount' was not clear for some users. They were also skipping it because the 'help (?)' button was too close to the copy, and they couldn’t see the 'required field' indicator.
Solution:
1. A focused state was added to each input field.
2. The layout of the fields was reorganized to avoid confusion.
3. The copy was changed for the ‘Expected average monthly balance.
📲
Recommended For You
Feedback:
Alignment was not consistent in the product information details. Also, the 'Compare' checkbox wasn’t big enough, and users struggled to select it.
Solution:
1. Changes were made to the alignment.
2. Different statuses for selected and unselected 'Compare' checkboxes were added.
REFINE
Developing the Brand
To establish my brand, I started by defining the core values I wanted it to represent with my product. I wrote a set of keywords that described the values for my app:
Simple
💰
Growing
💵
Connected
💰
Inspirational
💵
Approachable
💰
Empowering
💵
Simple 💰 Growing 💵 Connected 💰 Inspirational 💵 Approachable 💰 Empowering 💵
Name Exploration
I came up with options for naming the brand and chose: FINNECT
This name combines the words 'financial' and 'connection,' aligning with the goal of my app to provide options for newcomers to find financial products.
I also wanted a name with broader appeal, considering future use by anyone seeking new financial products.
Moodboard & Brand Colors
With the values of my brand defined, I created a moodboard that represented those values.
I extracted colors from there and decided I wanted my app to have cool colors because they are more relaxed and calmer.
I chose a green monochromatic color palette, as green is often associated with money, wealth, trustworthiness, and stability, which are crucial for building trust in a financial app's security and reliability.
Green's calming properties make it ideal for a financial app where users deal with complex information
Keeping it accessible
I considered WCAG Level AA standards for color contrast, ensuring my app is accessible to all users. In the case of the color combination that fails AAA standards, it has not been used for normal text in main components.
Designing the Wordmark
To further develop Finnect's brand visual identity, I created a wordmark. I began by seeking inspiration and then moved on to sketch possible wordmarks using various type styles, weights, and sizes.
The chosen wordmark denotes growth and simplicity, which are features at the core of my brand. It is also easy to read, just like the information about financial products that users will learn on the app.
Enhancing the Brand Identity
With Finnect’s visual identity defined, I began exploring how to enhance the brand with elements like icons, typography, and secondary colors in my prototype.
These elements were chosen because they conveyed Finnect’s core values as they are simple and approachable. Also, accent colors added to the palette give it a fun twist so it can be differentiated from other brands and banking apps.
Creating a UI Library for Finnect
I created a UI library for Finnect organized into atoms, molecules, organisms, and templates to maintain consistency, efficiency, and scalability in future iterations.
Introducing
Finnect
After adding colors to every screen and going through multiple iterations, testing, and trials, I was able to elevate my prototype from mid-fidelity to high-fidelity.
KEY FEATURES
Learn about Financial Products
Customize results
to get the best option
Compare products to make an informed decision
MARKETING WEBSITE
To promote Finnect to target users and effectively communicate its goals, features, and benefits, I developed a responsive website.
This platform allows users to learn about the features and benefits they can access by downloading Finnect. 💻📱
DESIGN IMPACT
Finnect, as the proposed digital solution, addresses the struggles newcomers to Canada face when making financial decisions. 🎯
This solution provides them with the essential information they need to make informed financial decisions, reducing overwhelming feelings. It simplifies complex financial information, making it accessible and understandable, thereby boosting their confidence.
LOOKING FORWARD
The Tarot Cards of Tech 🔮
To consider the future impact of Finnect, I used the 'Tarot Cards of Tech' and asked myself the following question:
Who or what disappears if your product is successful?
Finnect's success would bring several positive changes in the financial landscape for newcomers to Canada. Firstly, scammers and greedy financial advisors would disappear, creating a safer environment where newcomers can trust the information and advice they receive. This would lead to an increase in informed financial decisions, as Finnect provides users with the knowledge they need to make wise choices.
Moreover, the efficiency of decision-making would improve, reducing the time spent researching and comparing options. This streamlined process would not only benefit newcomers but also anyone seeking financial advice in the future.
Overall, Finnect's success would contribute to a more transparent and trustworthy financial ecosystem for all users.
KEY TAKEAWAYS
Lessons Learned ✨
Looking back on the design process, here are some of my key takeaways:
🧭
User-Centered Design is the Guiding Light
Understanding users and their needs through research is crucial for any successful solution. By focusing on user goals, frustrations, and touchpoints, I ensured the design provided a valuable outcome.
📲
Iterative Design for Continuous Improvement
The project employed an iterative design process, starting with sketches and wireframes that progressed to various prototypes. This allowed for ongoing refinement based on user testing and feedback, saving time and resources by identifying and fixing usability issues early on.
🙆🏻♀️
Embracing Flexibility for User-Centric Solutions
Maintaining a flexible mindset throughout the design process was essential. This allowed me to readily adapt design decisions based on user research and testing. By prioritizing user feedback and being open to change, I ensured the final solution effectively addressed user needs.
Next Steps 🐾
Thinking about future development for Finnect, this is what’s next:
Level Up: Develop secondary task flows like money exchange and finding language-specific financial advisors.
User-Driven Enhancements: Conduct further testing with users from diverse cultural backgrounds to assess prototype clarity.
Data Power: Continuously expand Finnect's data to encompass a wider range of financial products, including those beyond banks.
Thank you for going through this case study!
Please feel free to contact me if you have any questions.