A single source
of truth for
your money
Role
Product designer
UX researcher
Branding
Timeline
2022-23
Timeline
2023
Tools
Figma
Miro
Notion
Description
Plantt is a concept for a personal finance mobile app.
Context
I believe budgeting apps need their Wealthsimple moment. So, I designed a mobile app that provides a single access point to people’s finances so that anyone can make informed financial decisions and feel in control of their money.
Notion Wiki
See how I organize my work.
Figma Prototype
Try Plantt early prototype.
Notion Wiki
View how I organize my work.
Figma Prototype
Try out an early prototype of Plantt.
Table of contents
Why Plantt?
Do we need an app?
App concept and creation
Solution
Results
Final thoughts

Why Plantt?

With the rise of retail investors in recent years, everyone can hope to be the next Warren Buffet from the comfort of their home couch. But if investing is important, what about budgeting?
This project originates from the belief that personal finance apps need their Wealthsimple moment. Below I detail how I arrived at a solution.
Personal finance apps need their Wealthsimple moment.

Problem to solve

Personal finance applications are overly complex and fall behind in terms of brand experience compared to the Airbnbs and Spotifys of this world, resulting in a limited desire for many people to use the personal finance applications that are currently available.

Goals

  1. Provide a personal finance application that excels in areas where current solutions lack to capture untapped share of the market.
  2. Provide an enjoyable brand experience.
  3. Reduce complexity and improve discoverability.

Research

USER RESEARCH

Are personal finance app useful?

To determine whether a personal finance application could be useful to people, I talked with three of my friends to find out about how their financial life could be improved if they started using a personal finance application.
I found three reasons why using a personal finance application can be valuable.

🧘 Peace of mind

Being able to easily and closely monitor personal finance provides a sense of control over one’s finances resulting in less financial-related stress and peace of mind.

🪴 Financial health

Having access to the right information is the first step in making goal-oriented financial decisions towards a healthy financial life.

🧭 Sense of direction

The ability to set and track financial goals provides a roadmap to towards a clear path forward.
View RQs in Notion
Competitive analysis

Do we need another personal finance app?

Searching “personal finance tracking” in the App store will provide hundreds of results. To better understand how some of the most popular personal finance applications could help people better manage their personal finances, a competitive analysis was performed.
Below is a summary of the competitive analysis. The full analysis is available in the project wiki in Notion.

Mint

Free to use and provides an extensive set of features but disapointing brand experience.

MoneyWiz

Powerful tool but feels complex and might not be suitable for people looking for an easy to use option.

Billi

Fun branding experience along with useful but limited features.
View competitive analysis in Notion

App concept and creation

Following the research, it became evident that personal finance applications can improve people’s mental and financial health. Yet, after analyzing the current solutions on the market, it is also clear that current personal finance apps can offer a better experience.
As a result, there is an opportunity on the market for a personal finance application to simplify personal finance and provide a more enjoyable brand experience.
Ideation

What should the app do?

Keeping the design brief in mind, I created a list of potential features and branding elements to be implement in the design of the app.
Following up on the inital brainstorm, I made a preliminary list of features for the app. I quickly realized that the features neatly fit into five categories:
  1. Budgeting
  2. Financial goals
  3. Investing
  4. Transactions
  5. Taxes
These categories are later validated using a card sorting exercise.
Based on the preliminary list of features, I developed a final list of features to be implemented in the app. I decided to not implement any tax-related features to simplify things.
Miro board showing concept, brand ideas and app features for Plantt.
View ideation board in Miro
Information architecture

How should users find what they want?

Before creating wireframes, I wanted to have a better idea of which screens and app features that would be implemented in the app. To do so, I created an information architecture to organize and structure information in a clear and understandable way.
Four of the five categories (budget, transactions, goals, investments) identified during the ideation were used as a starting point.
The IA shown below is comprised of the following elements:
  • Screens, modal views and their main components
  • User actions/sub-actions
  • Summary of the information that would be displayed on each screen and modal views.
Miro board showing the Plantt's information structure.
View information architecture in Miro
CARD sorting

Is it easier to find?

To vertify that the categories established in the IA fit well with users’ mental models so that they can easily navigate the app to find what they want, I ran a guerilla style card sorting exercise with four friends.
High-level categories for Plantt mobile app (on the left) and MoneyWiz app (on the right).
Each participant were asked to verbally identify the category (ex. Account) where they would navigate to in order to accomplish a specific task.
For instance, users were asked “Where would you go to find your total spending on groceries last month” and would answer “Budget” or “Transactions”.

Card sorting results

Plantt: 37/44 correct answers.
MoneyWiz: 24/44 correct answers
The results showed that Plantt app makes it easier for users to navigate the app compared to MoneyWiz.
View card sorting exercise sheet in Notion
USER FLOWS

From A to B

To visualise and plan out the path that a user takes to complete a particular task or goal within the app, I created a series of user flows for the main app features.
The flows were created based on the list of app features that were previously established.
Miro board showing user flows for the main features of the Plantt mobile app.
View user flows in Miro
Wireframes

From concept to form

Based on the information architecture and user flows, 18 wireframes were created to establish an initial visual structure and layout for the app.
A total of 35 screens and modal views were to be designed: budget (21), transactions (5), goals (5), investments (4). However, because certain views are similar (ex. modal view to select a time period for budget spending and for budget savings), 18 wireframes were created in total.
To respect the timeframe for this project, I limited myself to creating wireframes for the main screens and modal views of the app.
Wireframe drawings for the budget tab in Plantt mobile app.
View all 18 wireframes in Notion
Terminalogy

Spavings vs Savings

While creating the wireframes for the savings screen, I realized that there are two ways to define savings, which can conflict and confuse users.
Common definition of savings: savings is difference between someones income and spending. It the remaining balance after all expenses have been substracted from one’s disposable income.
Alternative definition of savings: savings is the difference between the budget and the actual spending. It represents the amount that was allocated towards a spending category but that was not used. It can be thought of in this way: “you saved 30$ on groceries this month by spending only 70$ of the total 100$ budget”.
To alleviate potential confusion, the most common conceptualization of savings remained unchanged, while a new term: spavings, was created to refer to the alternative conceptualization of savings.
branding

Growing is natural

App name

The name Plantt is inspired by the notion of growth that is everpresent in nature and a core aspect of financial health (”grow your savings”). Growth is also associated with a sense of direction, which is an aim of the app — to provide financial guidance to its users.
Plantt also refers to the common saying “Plant the seeds of…”, which can be used in a financial context as a metaphor for investing or saving money.
The association between nature and personal finance also aims to connect to the brand the experience of having calm and peace of mind that is often associated with nature.

Colours

Pictures that inspired an initial exploration for Plantt's colours.
Using nature as a central theme in developing the app’s branding, colours commonly found in nature were chosen for the app, such as green and blue.
The colours also followed a visual aesthetic based on a set of pictures that matched the brand’s image.
The colours also needed to be representative of their purpose and usage in the app based on existing colour usage in finance. For instance, green is often associated with “positive” or “growth” and red with “negative” and “spending”.

Typography

TT Commons typeface by TypeType Foundry.
TT Commons is a modern, geometric sans-serif typeface that is highly legible in all font sizes, provides a modern look that is both professional and approachable, and offers up to 10 weights.
As numerals are an important part of the app's textual content, it was important for the typeface to provide clear and well-crafted design for numerals.
Overall, TT Commons has all the necessary elements to be the perfect font for Plantt.

Logo

Plantt logo design.
For Plantt's logo figures a tree which symbolizes the themes of financial growth and nature associated with the app’s name.
Design system

Fast and consistent design

Some Figma components created for Plantt's design system.
Based on the branding elements, I created a design system for streamlining my design process.
The design system reduced redundant work by reusing common UI elements across multiple screens, and kept my design process lean, fast and focused while ensuring that I was staying consistent across all screens.
View design system in Figma
Introducing plantt

The solution

Plantt is a mobile app that let’s users budget, monitor their cash flows (spending, savings, income), track their investments, and access all of their money transactions from one app. In short, it provides users a single access point to all the information they need to make informed financial decisions.

Budgeting

Leverage AI to know how much and on what you spend, save and earn. No need to categorize transactions or create a budget because Plantt's will do that for you.
Any mistake? You can customize your budget and add or remove categories as you like.
👀 Visualise your spending, income and savings against your budget.
👀 Visualise your spending, income and savings for specific periods.
➕ Create and ✅ select multiple budgets for any of your projects or activities.
Went over budget? 🔍 Find out where your money went and ✏️ adjust your budget if needed.

Financial goals

Wondering when you’ll be able to afford your next vacation, or pay off your student loans?
Just create and keep track of your goal using Plantt.
👀 Visualise your progress towards your goals.
➕ Create and ✅ select from as many goals as you need.
✅ Select the bank account you want to compare against your goal or select all of them to view your net worth.

Investment tracking

Multiple investment account with different institutions?
Plantt let’s you monitor them all from one place so you can see your progress right away.
👣 Track any of your investments performance from one screen.
👣 Track the performance of a group of investment of your choice.

Centralized transactions

Transactions are your money’s digital footprint, not just the banks.
Plantt gives you access to all of your bank and online transactions in one safe place.
🎟️ Access all your transactions from the app.
👀 View all your transaction details, ➗ split transactions for more accurate categorization, and ⛔ exclude transactions from your budget calculations.
🪣 Categorise your transactions any way you want.

Results

I initially sought out to make a personal finance app that was less complex and easier to use then existing apps. It was also important for the app to be visually appealing in order to establish a more enjoyable brand experience than current applications.

Reducing complexity

One visual layout to rule them all

Since users have to navigate between many screens to monitor different information, I wanted to reduce users need to build different mental models every time they consult a new feature.
To do so, I designed each main screens using the same visual layout. By doing so, whenever users switch between different tabs, the visual layout stays consistent. This creates a visual pattern that users can rely on as they navigate and access the app's features.

Letting users decide through progressive disclosure

Personal finance apps can quickly feel crowded as they have to provide users with a lot of information.
To counter this, I emphasized progressive discolsure in the design to let users decide how much they want to see and when they want to see it. Here are some examples of this.
  • All crud-related actions (create, read, update, delete) for the users budget and goals are hidden while still being one click away for the user.
  • Bank transactions only show the user the most important information: the date, the amount of the transaction, the other party and the categories attributed to the transaction. Everything else is hidden but can be accessed via a single user click.

A more intuitive way to navigate

A personal finance app is useless if users cannot find the information they need to make better financial decisions. For that reason, it was important that users could intuitively navigate to the right location to find what they need, especially since progressive disclosure was emphasized in the design, which can make features harder to discover if not well implemented.
To make the user navigation intuitive, all app features were grouped into four categories based on the features’ purpose and shared characteristics. A card sorting exercise showed that the chosen categories were better suited to people’s mental models than a popular personal finance app, MoneyWiz.

A refined brand experience

Because it was important for the brand to speak everyone’s language, not just finance geeks, it needed to be approachable, reliable, simple.
This is why the app was designed to strike the perfect balance between being simple and yet powerful enough to be valuable to the users.
The brands’ visual elements were also chosen with this intent. The colour palette is simple and to the point and the typograhy is approachable and does not try to steal the show.
The brand also needed to represent what the users value, that is, mental peace, financial health, and a sense of direction. To remain faithful to these objectives, the brand was built around the concept of growth. This concept relates to users value in the following ways:
  • Growth assumes a sense of direction.
  • In finance, growth is associated with financial health.
  • Growth is a natural process, and nature is often associated with serenity and peace of mind as it is a place of escape from the cacophony of urban life. Relating the theme of nature to the brand aims to bring this sense of serenity to into the core of the brand.
Figma prototype

Plantt mobile app

Here is a prototype of the app for you to try out.
Figma prototype of Plantt mobile app.

Final Thoughts

So, what went well?

Talking to potential users really made the project feel more engaging and fun to work on. It reinforced the notion that designers really are at the service of the users (not the other way around) and that great designers will try to reconcile how they believe something should work with how users want it to work.
Being able to work on the brand and what it should stand for made it easier to develop a visual aesthetic for the app. Every UI design choice was easier after that.
Creating a design system might be overkill for a one person project, but it forced me to think of each UI elements’ purpose, how they fit into the system and the likelihood of the element being reused in the future. It also streamlined the prototyping process and ensured that the user interface was consistent across screens.

That’s cool, what could be improved?

I believe that there is much more to learn about how software can help people better manage their money. The interviews I conducted was a step in this direction, but I know there is so much more to learn.
The current prototype for the app let’s users discover the main features of the app but it does not present the user onboarding process. I believe the onboarding could have been a great opportunity in the users journey to let the brand shine through.
Given a more generous timeframe for this project, it would have been cool to dig deeper into  animations as it could have made user interactions more meaningful and intuitive.