Frinans
“Start your journey to be financially free.”
Type
Passion project
Timeline
August - November 2021
My Role
• UX Designer: from user research, ideate, prototype, to UI Design and usability testing.
• Information Architect: I did a content audit and card sorting to produce a data-driven sitemap.
Tools
The Problem
During my walks of life, I have seen many people in my circle struggle in managing their finances. Most schools usually do not equip us with the basics of money management such as budgeting, saving, debt, investing, and more.
I wanted to rethink the way people could make wise financial choices for everyday living — while at the same time avoiding mistakes that will lead to lifelong money struggles, and eventually building healthy financial habits. So as part of my UX Design study, I decided to design a solution and tackle this problem.
The Solution
My solution was a web app called Frinans that helps young adults simplify their finances by providing a platform to handle their money by monitoring budgets, saving more to reach financial goals, and taking control of their financial life.
(click to zoom in)
Project Timeline
Research
Research Methods Used
Competitive Analysis
Key Takeaway: I did a competitive analysis on two competitors: Wallet and Money Lover. These two apps are primarily for budgeting. Although Wallet has a Goals feature, the data itself needs to be typed manually. And bill tracker feature does not exist on both apps.
(click to zoom in)
User Survey
Participant Demographics: 38 participants
Goal: I wanted to gather information about people's behavior on personal finance management, also their experience and pain points in using other money management app.
Outcome: The user survey helps me in obtaining quantitative data on what users do around budgeting and their opinions about the existing personal finance management apps.
Survey findings
Respondents don’t have a budget plan
Respondents (who have budget plan) document it manually
Respondents have used budgeting app(s)
Popular feature. The features that are used the most in those apps are expense tracking, spending trends in different categories, graph reports, and periodical view.
User Interviews
Participant Demographics: 4 participants
Goal: I wanted to have a better understanding of users’ motivation and behavior around budgeting, on the context in which users would need and use a budgeting app, and learn more about the user's pain points in interacting with the existing budgeting app.
Outcome: From the interviews, I found a common pattern of needs and preferences on several matters such as budgeting & categorization, data visualization, family account, one-stop service, and bill payment tracker.
Interview findings
01 - Categorization. All interview participants faced frustrations when it comes to the wrong categorization e.g. when someone buys stocks for investment, the app categorizes it as an expense instead of investment. Most of them also would like to be able to set customized categories.
02 - Data visualization. Presenting visualization of the user’s financial data and progress into bar graphs or pie charts is found to be very helpful by all participants.
03 - Family account. People who live or share expenses together would like to be able to monitor their expenses in one place, so they can track e.g., who has paid which bill or expense, or how much that person has paid.
04 - One-stop service. Participants want a one-stop service where they get the aforementioned wants & needs in one place, without having to open another tab or app.
05 - Bill payment tracker. Participants want to be reminded about their obligations (bills & subscriptions), and also receive suggestions on which subscriptions they can skip to save more money.
Persona
Based on my research data, and also to ensure my potential users always have a place when it comes to design decisions, I created two personas: Rosa and Axel.
(click to zoom in)
User Journey Map
As the next step, I created User Journey Map for each of my personas to help me in visualizing the processes that the personas have to go through to accomplish their goal.
(click to zoom in)
User Flows
To help me in discovering what pages or screens of a web app are needed before I begin the information architecture phase, and also to help me in communicating with the developers of how the product works, I created some User Flows.
(click to zoom in)
Information Architecture
Content Audit
I performed a content audit on a similar app named Wallet to see what functions, steps & screens I might need to implement going forward. The audit also gave me key insights into effective responsiveness & display for the future desktop version of Frinans.
Card Sorting &
Sitemap
The first sitemap was designed based on my understanding of users’ needs and behaviors. To test and improve the initial sitemap, I conducted card sorting and gathered insights from 9 participants.
(click to zoom in)
At this stage, I got better informed on the potential users’ mental model and where I should put each content topic into the right categories. Hence I revised the sitemap accordingly.
(click to zoom in)
Design
Design Opportunity
After gathering and analyzing my research findings, I came up with several design ideas to tackle the problem space while still keeping in mind the ultimate goal of simplifying personal finance management for young adults.
Low to Mid Fidelity Wireframes
Once I have made the user flows and sitemap, I started to translate my design ideas into Low and Mid-Fidelity Wireframes.
Evaluation
Evaluation Methods Used
Usability Testing
To assess the user’s learnability in interacting with the wireframes, I conducted moderated in-person & remote usability testing with six participants.
Task 1: Please sign up and create an account in the app.
Task 2: Try to log in to the app.
Task 3: Create a budget for groceries as a family budget.
Task 4: You dream of traveling to the Maldives in three months. Try making a plan to save money for your trip.
Task 5: Create a new bill payment tracking of your new gym membership.
I observed the general pattern that emerge when the participants explore the design, and also collected data of any repeated unsuccessful attempts among participants. Then I measured the errors using Jakob Nielsen’s scale, and implement improvement on my design accordingly.
Usability Issues and Fixes
01 - Unsure of what kind of info the speedometers entail
Issue: All participants either asked questions or expressed confusion about what information they can get from the speedometer.
Fix: The speedometer is replaced with a graph, to deliver clearer and quicker-to-digest information about the current financial status.
02 - Security issues with fingerprint authentication
Issue: Some participants expressed concern over the security risk of using fingerprint as authentication method.
Fix: Pin code is implemented as the replacement for the fingerprint authentication method to fingerprints to increase data security.
03 - The font in the Dashboard is too small
Issue: All participants mentioned that the font size is too small that they need to look closer to read the words.
Fix: The font size and the card size are increased, so the overall composition does not feel too cramped.
04 - Difficulty locating the Family tab immediately
Issue: Two out of six participants had trouble finding the Family tab in the Budget feature.
Fix: A toggle button with distinctive color is used to make the tabs discoverable and pop out more on the screen.
05 - Doesn't know what Planned Payment in the Dashboard means
Issue: Two out of six participants stated confusion over the term “Planned Payment”.
Fix: The title is changed to "Upcoming Payment".
Final Design
Components of Final Design
High-Fidelity Screens and Interactive Prototype
Design for Desktop
Design assets and guidelines ready to be transferred to developers
High-Fidelity Screens
Click here to see the interactive prototype made in Figma!
Design for desktop
Design style guideline
Wrap Up
Remaining challenges and Future Directions
Lesson learned
Remaining challenges
Financial freedom is a quite broad topic. The term itself refers to savings that grow and enable us to retire early or pursue the career we want without being driven by earning a set salary each year. My design solution is just the beginning of the journey to financial freedom, the young adults will grow older and might need more alternatives to build their net worth.
I believe that the app will stay relevant in the market by adding more useful features that I haven’t implemented just yet in this design. Furthermore, collaborating with banking experts, business strategists, and also the tech team would support me in coming up with a design solution that is more realistic and effective.
Future Directions
Explore other helpful features for the young adults e.g., easy-to-digest learning resources and guidance on more advanced topics like building net worth and improving credit scores.
Consider working with an SME (subject matter expert) in investment to expand the investment feature incl. help beginners to easily learn by doing in the app.
Implement personalized suggestions based on users’ activities data.
Lessons learned
Don’t assume you know the users. Test the hypothesis with users until patterns emerge, and dare to implement changes accordingly (even after hi-fi prototyping).
User interview is not like chatting with people. The user researcher needs to ask the right question in a certain way, so the participant’s answers will be free from faking good and biases. This skill is something I am still improving on, therefore I am currently reading “Interviewing Users” book by Steve Portigal.
You may also like:
-
Delivering style inspiration and guidance to the customer through user-generated content.
-
Placing employee wellbeing as the main priority through a mental health app.
-
Undertaking a self-driven upskilling project in Frontend Development to enhance collaboration.