Finanfy — The ‘fy’ of your personal finances
I’m really happy you are here to read about this project and the creation process of Finanfy. 🤗
So, let’s get started! (Note: If you are here just to see the prototype, scroll straight to the end 😉)
Project Details
Project: Ironhack final project, individual
My Role: UX/UI Designer
Goal: Build a digital MVP based on my own vision, research, findings and the UX/UI process with a fully animated prototype
Time: 3-week sprint
Method: Design Thinking, Lean
Tools: Figma, Miro
Where It All Started
One day I realized that I wasn’t keeping enough track of my personal finances. I didn’t know exactly how much money I was spending per month on my fixed expenses and I wasn’t following a savings plan. My financial decisions weren’t that systematical and I wanted to find a way to improve my situation.
I asked myself “Am I the only one or are there others feeling like me?”. And to get an answer to my question, I started to investigate the topic…
I ran into a recent study done by the Spanish bank CaixaBank called “How much do we know about economics?”. The study was based on the answers of 1651 Spaniards.
And what this study showed me was, well, quite impressive:
Six out of ten Spaniards would not know how to prepare a personal budget (7 out of ten in the case of the Millenials).
Even though most of the people have a register of their incomes and expenses (74%), debts, savings, and investments are the areas less controlled.
45% do not prepare themselves for the unpredictable.
34% do not consider saving as a habit to follow.
29% does not seek a balance between their income and expenses.
I could come to the conclusion that I indeed wasn’t alone in this situation and could define the problem detected:
Although good monitoring and optimizing of personal finances are considered relevant, most people do not take it to practice.
Digging Deeper Into the Topic
Knowing where to focus, I wanted to find out more and understand why is it that people don’t keep a track of their personal finances.
I decided to run a survey of my own and also interview a few people who wanted to share their own experiences with me. I got 70 answers to my survey and did 5 1-to-1 interviews.
From the information gotten, I found out that the most common reasons for NOT keeping a track of the personal finances are:
- Not knowing exactly what to take into account to have a clear view of the financial situation.
- Not having time to do it or forgetting to do it.
- Not finding a product/tool that is easy to use and helps with everything that is needed.
Especially the point nr. 3 woke my attention and made me do a little market research investigating the products of the market in order to have a point of reference and to understand better why the current products do not meet the needs of the users.
I took the time to study the different product descriptions, functionalities, and user interfaces, as well as reading user reviews. The latter is something I really recommend because the reviews can really give you a good insight into what the users want and what are the pain points they face in the product (Note: pay attention to filtering too vague accusations with no proper backing up or reviews written in a moment of frustration).

From this benchmark, I picked up the following pain points, among others, that many users have pointed out after trying different personal finance apps:
- Requesting personal data or bank account information in the onboarding phase provides distrust towards the app.
- Asking too many permissions to have access feels intrusive.
- No option to personalize categories frustrates.
- No option to mark the cash flow messes up the counts.
- If the user interface is not user-friendly the app will be most likely deleted.
- Too many options and too elaborative dashboards are confusing.
- Too many notifications (pop-up & email) gets annoying.
Combining the Information
At this point, I had collected information from various sources and I needed to organize it. I built an affinity diagram to sort the information in a way that would be comprehensible and that important details would be detected easily.

I sorted the information into six categories, them being user experience (UX), user interface (UI), functionalities, needs, motivations, and competence.
The Affinity Diagram turned out to be really useful as it was easy to come back to it throughout the process.
Defining the Target Audience
Then, I was ready to focus on my target audience.
In order to focus the search for solutions, I created two user personas, Gabriel and Ana, to represent the target audience. The data for the creation of the user personas I collected from all the research I had previously done.
This way it was much easier to empathize with the target audience and define what are the critical points of my audience because just by identifying them it is possible to find solutions.


I also used the JTBD (job to be done) framework developed by Clayton Christensen to orientate my solution-seeking through the “jobs” the user personas are trying to get done.
“When my monthly salary arrives, I want to be clear about how much money I must reserve to be able to cover all my fixed expenses for that month so that I can make day-to-day purchases without worrying that I will end the month with my bank account in negative for having forgotten some payments.” (JTBD, Gabriel)
“When I have fixed expenses that are not paid monthly or the total amount may vary, I want to be able to anticipate those expenses so that I can make sure that I don't forget them and that I do not spend money on anything else.” (JTBD, Gabriel)
“When I plan my daily life I want to have a clear vision of what my next month’s balance will be like so that I can feel calmer and stress free.” (JTBD, Ana)
“When I charge my projects, I want to know what percentage I have to reserve for the next expenses so that I can save a percentage with the security that the expenses will be covered.” (JTBD, Ana)
Ideation of Solutions
Prioritization of Functionalities
As the goal of this project was to build an MVP (minimum viable product) of the solution, it was necessary to prioritize the features according to the value they generate.
So, I sat down to list all the functions that could solve the user's needs and then used a functionality matrix to prioritize each feature taking into account three aspects: benefit for the user, benefit for the business and the complexity of the development of the feature.
Based on the results of the matrix, the features were qualified into four categories:
- Must have
- Nice to have
- Possibility
- Out of scope
The “must-have” and “nice to have” functions were considered important to satisfy the target audience’s primary needs and possible to design within the time limit. The rest of the features will be designed and developed only after considering feedback gotten from the users through user testing.
Inspiration Through Moodboard
Once I had defined the list of features I should add to the MVP, it was time for the fun part to begin: bringing the ideas to life.
The bright green seen on (almost) every finance apps there is, was out of the question. I wanted to design something different, something simple, elegant and something that would breathe calmness to the way we see finances.
I looked for inspiration on the internet focusing on four keywords that I wanted my solution to convey: peace of mind, equilibrium, balance, and financial freedom.

Prototyping
I first visualized the path the user would take in the app according to the features prioritized.

Then started prototyping the solution using a pen and paper. I made wireframes on paper that helped me to test the ideas saving time and resources and to draw conclusions quickly.
After that, I moved on to design with Figma.
I created the necessary screens to test the primary functions in a mobile version because the research revealed that the target audience wants to have access to the solution on their phone. However, a desktop version was also considered important by the users as the bigger screen would allow better visibility. This means, that the responsiveness of the design needed to be kept in mind.
Here you have a peek to the high-fidelity wireframes:

A style guide was also initiated so that the project can be continued coherently and that the design would be easy to scale to fit different screen sizes.


Inspired by the Moodboard, I also designed a loading page where the user can see a pile of rocks been created.
What I wanted to present with this was that it is possible to find a balance in one’s financial situation even though not all the pieces have the same weight and they are not piled perfectly.

And Finally, the Solution
As promised, here you can see the animated prototype of the proposed MVP.
I present you: Finanfy, the ‘fy’ of your personal finances.
Throughout the prototype you can see the following features:
- The dashboard of the ongoing month. In the dashboard, the user can see the current balance, the balance planned for the month and the summary of movements of the month. The dashboard is updated in real-time when movements are added, removed or confirmed. The dashboard was designed to be simple and easily readable as this is what the target audience requested.
- The list of the movements. The movements are organized by the type (income/expense) and the quantity. Incomes are marked with green and expenses with red. The percentage of each movement is also indicated which was a feature that had an important priority according to the research. This way it is easier and faster for the user to see the amount of each movement reflected to the total amount.
- Confirmation of movements. The user can confirm the movements by either swiping (seen on the prototype) or clicking the movement. This is to confirm that the planned incomes have been received and the planned expenses have been charged. This feature was created to help the user to keep a track of the real balance and ensure continuous engagement with the app.
- Adding a new movement. The user can add new incomes/expenses to the list by filling up a simple form.
- Timeline. The user can use the timeline to place and consult future movements/planned balances. This way the user can prepare him/herself for the future and make financial decisions based on facts, not assumptions.
User Testing Results
I tested the interactive prototype with a few users to get some initial feedback.
The main points raised were:
- The backdrop list found on the dashboard was not detected to be the movement list
→ There needs to be added text to point out the list - Users did not detect well enough which movements had been confirmed and which hadn’t
→ Confirmed movements must be highlighted better - The button to change expense/income on the form is not very well understood
→ There needs to be a textual explanation - Users also asked to see annual and quarterly movements
→ Add the option to change the period duration
Next Steps
I have many things planned for Finanfy and the next steps to develop would be:
- Improve the points detected in the user testing
- Create the onboarding flow
- Design the user flow of shared expenses
- Creation of objectives/goals
- Calculation of the loan, credit card etc. payback times and amounts
- “Closing” of the month after all the movements have been confirmed
Learnings of the Project
Every day and every project teaches us something new, so did this one.
When it comes to the tools, the main thing I learned through this project was how to make animations on Figma. But, when thinking about the project in general, I learned to understand how each step of the process plays an important role in the final outcome.
I am also extremely happy to have proven myself that I am able to manage a project of this scale on my own!
Thank you for making it up to the very end of this case study! I hope you enjoyed it! 🤗
If you would like to hear more about the project and the more detailed reasoning behind all the decisions or get access to the final prototype, please contact me through LinkedIn. I am also open to hearing comments and thoughts about the project, so if you have anything on the mind, do not hesitate to say it!
If you liked this case study, please give it a 👏. Thank you!
