FI Scouts
A financial tracking app for the FI/RE community.
Platform
iOS, iPhone 11 Pro / X
Roles
User Research
Data Analyst
Designer (UX + UI)
Tools
Google Forms (data collection)
Affinity Designer (graphic design)
Adobe Animate (animation)
Figma (high-fidelity mockups + prototyping)
Twitter (engagement groups for feedback)
What is FI/RE?
FI stands for financial independence. It’s when you have enough money in the bank to support you in retirement using a 4% withdrawal rate. The RE stands for retire early and there’s a whole community dedicated to achieving financial independence [some with the intention of retiring early]. But more often than not, most are looking to live a life where money is no longer a contingency when it comes to their decisions. A life where financial stress is non-existent. Retiring early is not really the driver, but rather, an option that opens up along with so many others when you achieve FI.
Collaboration effort
I am collaborating with Christian Mitteldorf, an iOS Engineer and avid personal finance blogger for this project. While Christian is primarily responsible for the development and I for the UX-UI design, we engage weekly to discuss ideas, work through solutions and iterate on the app.
- This app is a work in progress. We are currently looking into a UI overhaul to modernize the layout and navigation.
App foundation
Individuals striving for FI need to reach what’s called their target FI number, which is really just a net worth that will financially support them in retirement using a 4% withdrawal rate with little to no risk of completely depleting their portfolio funds. This number can be found by taking one’s total annual expense and multiplying it by 25.
For example, if you spend $30,000 total in a given year, your FI number would be $750,000 ($30,000 x 25). There are variations to this number, but this is essentially how much you would need to be considered financially independent. The app’s foundation is focused on tracking a user’s savings rate and net worth as it relates to their FI number.
- But there's a catch - An FI number is a moving target. It needs to be updated every year to account for inflation and changing expenses.
The challenge
Design a financial app that tracks metrics relevant for the FI/RE community. The app should take user data input and create visual representations that financial bloggers or individuals striving for financial independence can use for educational purposes, motivation and financial analysis or to export for public sharing via social media or blogs.
Research + analysis
Prior to the app design, I conducted surveys with 48 individuals in the personal finance community. Christian and I also started Facebook and Twitter group discussions among our cohorts. This helped us better understand who we were designing for, pain points with existing finance apps, needs versus wants in an FI app, and how this design could be set apart from others.
We soon realized that while financial metrics and tracking were important, a crucial feature missing from users’ current apps or tools was interactive and visually appealing data representations.
- 83% of individuals know their FI number while 98% know their net worth.
Market competition
I researched the following apps in the current market and found that Personal Capital was the most adept at tracking retirement goals but not with a focus on early retirement or the milestones that the FI community uses. Nor did they include visuals for the specific metrics we are interested in.
- Mint
- Tracks net worth, cash, credit cards, and investment transactions [dividends, capital gains, reinvestments]
- Credit monitoring and alert with weekly credit score reports
- Upcoming bill alert
- Goal setting for savings
- Budget settings for spending
- Credit card offerings to maximize points/savings based on spending habits
- Focus is budget tracking
- Free to use
- Personal Capital
- Primarily best for wealth tracking
- Algorithms let you know if you’re on track for retirement and offer ways to improve your portfolio and explains risk/return along with the sectors you are invested in
- Provide generic financial roadmap including analysis of employer plan investments
- Also includes budgeting/tracking
- Free to use
- YNAB
- Assign every incoming dollar a job with the goal of reviewing your future expenses as opposed to most budgeting apps that look at hindsight data
- Company claims that, on average, you will save $600 in the first two months and $6,000 in the first year by using this app
- They offer free online workshops about budgeting
- Focus is budget tracking
- Premium budgeting app, $11.99/mo
Pain points
- Security
- 73% of individuals had some level of concern with data security when using other financial apps.
- Upon further investigation, many banks will void any fraud and data protection with your account if you connect your banking credentials to a third party app or platform.
- Missing or failed features
- Many users no longer needed to track daily expenses as they were comfortable with their money management. Most apps focus heavily on budgeting and savings goals.
- There are no apps that users know of that track FI numbers or retirement net worth goals relative to the FI/RE principles.
- Limited visuals
- Around 38% of individuals use Excel or pen + paper to track their finances and upon further discussion many felt that they wish they knew how to create “pretty charts and data visualization” for their finances.
- Some apps lack a “unified view” of one’s overall financial status.
We also found that...
of individuals said it is motivating to see visual representations of their FI journey [e.g. charts and graphs]. They said it’s “good for seeing progress”, “easy to compare month to month or year to year”, “easily digestible” and “helpful for seeing future projections”.
This tells us that...
the FI/RE community is goal-oriented and empowered by tracking financial data. Creating functional data visualizations with financial information in a secure and safe way that motivates and keeps them on track during their journey was key for this app.
User persona
Job | Engineer
Age | 34 years
Sex | Male
Background | Works in engineering for his 9-5 job. He is number-savvy and great with understanding mathematical projections. Having worked in software engineering he knows all too well the concerns of data security problems when it comes to using applications that require linked accounts with sensitive information. He would like a way to manually input his finances in a program or app that automatically outputs the data into beautiful visualizations. It would be nice to have the option to download or export the data to his financial blog.
Core features
FI NUMBER
Tracking this feature helps a user understand where they are on their overall financial journey by comparing their current net worth to their target FI number while implementing the FI/RE’s community core milestones check-points as an additional motivational tool. This number should be calculated and updated monthly as new data comes in.
NET WORTH
Many users have various sources that make up their overall net worth; a personal investment account, real estate, a pension or retirement account through work. Tracking this feature is not only vital for FI, but it allows the user to consolidate their net worth to one number for a more comprehensive look at their financial status.
SAVINGS RATE
Many users felt that tracking their savings rate was a cornerstone for additional insight about their financial habits. Tracking this metric could help a user identify the months where they tend to spend the most and look at those expenses in more detail.
DEBT
We debated the need for tracking debt early on. But ultimately decided to include it because you cannot track net worth without tracking debt. Users also felt that a visual depiction of their debt payoff progress would be an additional motivational tool.
Information architecture + flow
- Flow
Many first iteration sketches included the standard tab bar with the intention that the architecture would follow a matrix structure, organized by core features. However, because all of these elements are crucial for review, we decided to present this as a dashboard on the home page, eliminating the need for a tab bar. The dashboard allows the user to view their overall financial health or click on a specific metric for more information.
- Entering data
Gathering feedback from users
Data visualization challenge
UI inspiration + considerations
The core of this app involves manual data entry due to users’ concerns about security. While we did not want to gamify the app, we did want to incorporate certain nods of playfulness with color, shape, theme, and animation to offset the data input element.
I looked to one of my favorite educational series, Kurzgesagt (German for “in a nutshell”) for UI design elements that would help combat the tribulations of data entry. They use vibrant infographics and animation for story-telling and the teaching of rather dense topics. Our goal was to strike a similar balance of playfulness and informational.
More design decisions
THEME - WHY 'FI SCOUTS'?
Many bloggers and leaders in the FI/RE community use expressions related to the word ‘fire’, such as playing with FIRE or campFIRE, for their books, blog, or community events. We decided on an app name that would distinguish it from the other fire-related names, but would allow us to play into the concept of fire as a central theme.
So we looked to the boy scouts for inspiration. A scout is always on a journey, whether in nature or in training; much like the process of building financial independence. A scout also achieves several badges of honor as they move up in rank – a very similar concept for the FI community who track their progress with milestones, another feature built into the app. And most important, a scout is always prepared as one should be when it comes to personal finances.
COLOR + SHAPE
Financial apps, especially for beginners, can be intimidating. To offset this stigma, I introduced rounded shapes for many design elements including the graphs, icons and typeface. The softer shapes evoke a sense of youthfulness, friendliness and overall inviting atmosphere.
The intention behind the use of vibrant colors set against a dark ground is to give the perception of campfire or starry nights. It sets the backdrop for what will, in later iterations, involve a community feature. Much like how people gather around campfires to tell stories, we are looking to incorporate a chat feature that will allow users to share their progress or seek out advice related to financial independence.
ANIMATION
Currently, I am working with Adobe Animate to animate a bear mascot, which will be integrated onto a few pages within the app. Mascots can be a wonderful communicator between the user and app via facial expressions, movements, or comments. They also offer the chance to personify the app, creating a unique and interesting experience for the user. Hopefully one that will leave a lasting impression. From a business perspective, an animated mascot offers a great opportunity for branding and app identity.
Future development
- Educational feature
- Community feature
We are considering a community feature via a chat platform. This would allow users the option to share their progress, blogs, ask for financial advice or engage in discussions related to personal finance. The FI/RE community is a well-connected one so giving them the option to stay connected and track their finances in one place could prove efficient and useful for the users.
- Synced accounts
Final thoughts
This was an amazing opportunity to collaborate with someone who has experience developing apps in the finance sector. It helped me better understand the process behind UX-UI design and the details and tasks I need to carry out to make the transition from design to development as smooth as possible and how to seamlessly bridge the gaps from user pain points to design ideation to development.
From a technical standpoint I am continuing to push the boundaries as to what I am learning, such as animation principles and tools. It was also a great exercise figuring out how to handle the UX of graphs and charts within a small screen while still tending to the users’ needs, something we continue to fine-tune as we move through the process and receive more user feedback.
And finally, throughout this process, I saw a vast improvement in my own design abilities from sketches to low fidelity mockups and now high fidelity prototypes. I thrive on continually finding ways to optimize the app’s function and enjoy iterating on this app.