A personal budget app to uncomplicate life.
budget4home
A dedicated platform designed to monitor personal expenses, with the convenience of mobile accessibility where users can seamlessly input expenditures on the go.
This also can offer some tools and trend analysis, empowering users to gain a comprehensive visual understanding of their financial outflows, helping to identify opportunities to economise as well as an educational way to have financial awareness.
The target audience would be young people between 20 and 40 years old, who may be already familiarised with technology and are interested in conscientious financial management.
My responsibilities on this project included collaborating closely with an engineer who acted as my 'client.' My role was to validate our assumptions and work towards finding a solution that balanced his constraints and product feasibility.
ROLE: Product Designer
TIME: 1.5 months
Remember when you just moved out of your family's home, started a job and now you have to figure out how your parents can pay all the bills, have money for the groceries and still have money at the end of the month? How was it possible? How do they do it?
I had this problem, I did not know what I was doing wrong and how to make my money last, or even save it. The only way I could find out, was after I was "suggested” to start right down every expenditure I had and see the patterns and where all my money was going.
This project was inspired by an engineer who shared an idea to create a solution that empowers individuals to gain financial knowledge and take control of their finances. Through this initiative, I aim to help others facing similar challenges develop responsible financial habits and make informed decisions.
So, this is a personal project to help me (and other people that have the same problem as I) to be a responsible grown-up.
Why People Need to Have a Personal Budget
Tracking expenses allows us to evaluate our spending habits and make informed decisions. The main reason to track your expenses is to identify and eliminate wasteful spending. Additionally, consistently tracking your expenses helps you maintain control over your finances and promotes better financial habits like saving and investing.
So, what it it for:
Financial control and awareness
Plan saving and investment
Manage expenses and set goals
Improve spending habits
Reduce stress
It empowers us to take control of our lives, make good decisions, and work towards our financial aspirations with confidence.
DISCOVERY
Competitor analysis and desk research
I began with desk research to understand how people usually track their expenses. I examined products like Buxfer, Splitwise, and various online banking tools that offer expense filtering by tags. Additionally, I read user reviews to understand their pain points, feedback, and demographics. This helped me identify the target audience and key areas for improving user experience.
Key Insights from Initial Research:
- Users want ease of use and customized labels for better financial management.
- There is a need for family-friendly features allowing multiple users to track expenses collectively.
easy - friendly - life hacker - reports - labels - customisable
Quantitative research
With the target audience in mind, I conducted a survey with 100 people, to understand why people track their expenses and how they do it. Some key insights from the survey were:
Users often use tracking programs that are not free when advanced features are needed, such as adding multiple users.
To personalize their tracking, many users resort to Google Sheets, which lacks integration with their bank accounts—a feature they find advantageous.
Survey questions:
Q1: Do you usually track your expenses?
Q2: How do you track it? Do you do it manually or use a specific program or app?
Q3: When do you add the information?
After the survey, I also saw that most people, when they decided to track their spending, started using simple tools like Google Sheets or Excel. However, many find this method cumbersome and unsustainable over time due to many reasons, such as:
Manual data entry: this can be time-consuming and prone to errors.
Lack of integration: the sheets do not integrate automatically with bank accounts, credit or debit cards, or any other financial tools, requiring users to manually update transactions.
Limited features: basic spreadsheets may lack advanced budgeting, categorization, and reporting features.
User experience: the sheets are not designed specifically for personal finance management, making them less intuitive and harder to navigate.
As a result, many people seek alternative solutions that offer greater convenience and more features.
Q4: Do you make a goal or budget to spend?
Q5: Do you usually apply functions (logical, math…)?
Q6: Do other people add information to it? Do you share it with your family or business partner for example?
Q7: Do you feel that something is missing?
Exploring and Defining the Problem
Based on the research and survey findings, the product needs to be:
Simple and free.
Allow multiple users to add and track expenses.
Customizable, enabling users to add their own labels and categorize expenses according to their lifestyle.
Flexible in displaying information, offering various filters and report options.
Have a feature where they can sync with other financial accounts.
DEFINE
The structure
To address these needs, I collaborated with the engineer to design a site map, considering their constraints. The product would initially feature a manual expense entry page and be developed as a web application rather than a mobile app. This approach was faster, more cost-effective, and reduced friction, as users wouldn’t need to download an app. Additionally, financial overviews are often preferred on desktops.
With the side map in hand, it was time for me to iterate on the first pages. So I started with wireframing those ideas.
The idea was that the user could create their labels, use emojis to make the label easier to see, separate/ filter by dates and show reports to visualise their expense patterns.
Since the main idea was to add expenses to their labels to make it easier for the user to visualise their expense patterns, I started to see how to implement this on the layout.
DEVELOP
Branding
Because of the target audience and the words from the survey, I defined some keyword to guide me, such as YOUNG, EASY AND FRIENDLY.
With these words in mind, I searched for some inspirational images and created a moldboard featuring modern, vibrant, and engaging visuals. Opted for dark colors to differentiate the app from competitors and impart a sleek, modern feel. The dark background also enhances the visibility of bright, contrasting elements, creating a dynamic and visually appealing interface.
After that, it was time to define the typography and create the name and logo. I selected a font that is clean and easy to read, reinforcing the app's user-friendly nature. And then I created a logo to emphasize simplicity and approachability.
Next, it was time to define the colors for the texts and CTAs, keeping in mind the contrast with the dark background.
After defining the colors, I applied them to the layout and continued refining the design. I decided to prioritize working on the pages with the most content, ensuring they were well-structured and cohesive.
As I said before, I chose to design for mobile, considering that users would primarily enter their expenses on the go.
Given the amount of information displayed on the expenses screen, I aimed to strike the right balance between content and white space to ensure readability and clear hierarchy.
Once those pages were finalized, I planned to tackle the remaining ones, using the design choices made earlier to maintain consistency throughout the project.
To achieve this, I created three different versions of the screen to test which was the most user-friendly. The most effective version of them served as a foundation for designing the remaining pages.
DELIVER
Iterating and Implementing
After testing and determining which screen from the 3 previous designed would serve as the layout guide for the others, I designed the main flow, starting with the login/registration page.
Next, I focused on how users would add transactions, whether income (e.g., salary) or expenses (e.g., grocery shopping or other costs).
To make expenses easier to recognize, an emoji was added next to each label. Users can choose their own emoji when creating a label, helping them visually associate it with its meaning.
The MVP
While I was designing, the engineer began implementing the product's structure. Basic colors were used initially, allowing him to develop the main flow while we tested and refined the product’s functionality. The next step was to update the front-end design to match my final design.
Since this was a MVP, it allowed us to use it and see how it would function, making decisions on what it was needed and possible to do to make the product usable and easy to navigate.
Next Steps
The developer implemented the design, and it is currently being tested. Future plans include incorporating improvements based on user feedback and adding a feature to convert information from users' bank statements, addressing a key survey finding.
Takeaways
Collaborating with the developer was a valuable experience, helping us find ways to simplify implementation as the scope evolved. Some decisions were made along the way, and we explored alternative ways to display information—such as using emojis alongside labels—to make the label list more engaging and easier to scan. This aligned with one of my primary goals when defining the problem: keeping usability simple while allowing users to customize their categories (labels).
Building the MVP with the core functionality was crucial in shaping how the product would work. It helped define the key steps in the main journey—adding transactions and viewing expenses in different formats (list, chart, and percentages).
If this had been a real work project, I would have conducted A/B testing to understand how users prefer adding information. A proper budget would have allowed for more research, and those insights could have been applied to improve the product. Additionally, collaborating with other designers would have provided valuable feedback on the branding and visual design.
