FinanceFlow
The design and development of a full-stack FinTech application powered by a predictive AI engine.
What
SaaS | Web Application
Why
Market + Personal need
Where
São Paulo, Brazil
Role
AI Product Designer
Category
Finance, FinTech, GenAI
When
June 2025 - Ongoing
You're currently viewing the detailed case study. Looking for the executive summary? View it here.
Overview
FinanceFlow is an AI-powered personal finance web app designed to give users a unified, insightful view of their complete financial landscape. This is the end-to-end story — from a 20-year personal habit, through research, to interface decisions and an honest validation pass.
I ran this project solo: research, design, and development. It's a conceptual project — not yet launched for general availability — so where you'd normally see launch metrics, you'll see the framework I'd use to measure it instead.
The Problem: Flying Blind in a Sea of Data
My journey with personal finance began with a simple spreadsheet my father asked me to keep in college. For nearly two decades, this manual habit was my solution, but it was also a constant source of friction. That was the spark, but I needed to know if it was a widespread problem before designing anything.
Quantitative research (N=150) confirmed it immediately:
69% manage two or more financial platforms.
39% still rely on manual spreadsheets.
63% overspend against their own plan; 59% lack visibility into where money went; 54% forget bills or invoices.
Top Financial Challenges
Survey of 150 users, multiple selection
Operating more than one platform
69%
Spending more than planned
63%
No visibility into where money goes
59%
Forgetting to pay bills or invoices
54%
"I feel like I'm flying blind with my money. I know it's coming in and going out, but I don't know where or why."
— from in-depth user interviews
The Opportunity
72% of surveyed users wanted "everything in one place" above any other feature — but 54% wouldn't adopt a tool they didn't trust with their data, and 46% would be put off by a confusing interface. The brief was never just "build a dashboard" — it was "build a dashboard people will actually trust enough to connect their bank to."
Most Valued Feature in a Finance App
Survey of 150 users, single choice
Viewing everything in one place
72%
Ease of use
57%
Automatic alerts
43%
Multi-bank integration
41%
What holds adoption back
54%
Lack of security
46%
Confusing interface
The Research Approach
Three methods, one question — what does financial control actually feel like, day to day?
06
In-Depth Interviews
6 participants, 3 per segment, 45–60 min semi-structured calls covering context, pain points, routines, and expectations.
N=150
Online Survey
150 respondents, segmented by profile, pain points, and needs.
03
Desk Research main sources
Secondary market data (Open Finance adoption, AI trust benchmarks, LGPD) used to cross-validate field findings.
Process note: in hindsight, desk research should run before the field work, not after, to sharpen the instruments. Keeping that lesson visible here on purpose — it's a more honest signal of process maturity than pretending the sequence was optimal from the start.
From Interviews to Personas
Six in-depth interviews, three per segment, distilled into two personas. Participants stay anonymous — no images, recordings, or names are shared publicly.
Financial Goals
Quickly view and consolidate all accounts
Save for major events/assets
Invest seamlessly
Eliminate debt and avoid financial slip-ups
Pain Points / Challenges
Lack of centralized vision
Forgetting bills and payments
Difficulty with spreadsheets or overly complex apps
Anxiety about surprises or unexpected expenses
Motivators/Values
Practicality, automation, clean visuals
Access to intelligent insights
I enjoy technology and integrated APIs
Digital Skill Level:
High (early adopter, curious about new things). Open to AI, but skeptical of "black box" suggestions with no explanation.
About Davi
Age Range: 25–35
Education: Engineering
Location: São Paulo
He lives a busy, digital-first routine, with multiple accounts (banks, cards, investments). He seeks financial independence, savings for life goals (travel, housing, career), and a start in investing.
Davi Pontes
Technology, design, or marketing professional (employee, freelancer)
“I want a single dashboard for my entire financial life, without complications.”
Hypotheses to be validated: Reaction to automation/AI, real adherence to expense and investment control, trust in consolidators.
Sara Vicente
Small business owner, freelancer or matriarch (family budget manager)
“I need a place just to see everything, without getting a headache.”
Hypotheses to be validated: Real interest in automation, most valuable types of segmentation/categorization, trust in AI, simultaneous use for people and businesses.
Financial Goals
View total assets and cash flow
Control household and business expenses
Plan and anticipate future obligations (invoices, bills, taxes)
Grow your assets safely
Pain Points / Challenges
Difficulty integrating multiple systems (spreadsheets, apps, notebooks)
Lack of time and energy to analyze financial data
Concern about recurring payments/delays
Current tools are too basic or too complex
Motivators/Values
Ease and clarity
Automation that works (no steep learning curve)
Simple visualization of future obligations and the overall picture
Digital Skill Level:
Medium (seeks practicality, but avoids excessive complexity)
About Sara
Age Range: 42–50
Education: Business Administration, MBA
Location: São Paulo
Divides attention between personal life, business, and family. Manages multiple sources of income and expenses. Needs to plan for the long term (retirement, children's education) and avoid financial hardship.
A nuance worth designing for: desk research suggests roughly 35% of higher-income users keep manual spreadsheets by choice — for ownership and control of their own data, not out of technological resistance. Automation is the default path in FinanceFlow, but manual control had to stay a first-class option, not an afterthought.
Market Validation
The interview and survey findings weren't a sample quirk — they lined up with external data:
75.2%
of Brazilians would like to consolidate multiple accounts in a single app — the average user maintains a relationship with 5 financial institutions (Visa, 2026)
46–49%
trust in AI-driven financial recommendations globally — nearly identical to the 50% found in our own survey (Deloitte/EY, 2026)
37.1%
of Brazilians who know Open Finance authorized data sharing despite 76.8% knowing the technology — the barrier is unclear benefit, not abstract fear (Capgemini, 2026)
From Research to Design (Decision Map)
The Design Process: From Insights to Interface
With the personas defined and the research-to-decision map in place, the next step was translating those decisions into structure — before worrying about how anything would look.
Onboarding and the first bank connection were the moments most exposed by the research: "manual entry is a dealbreaker," "complex setup drives abandonment." So that's the flow I mapped first, end to end, not just the individual screens.
User Flow Diagram
Layout Sketches
Before any pixel got polished, I sketched structure. Layout sketches for the three core screens — Dashboard, Transactions, and Net Worth Evolution — settled information hierarchy and content priority while the interface itself was still a placeholder.
Wireframes
From sketches to wireframes — still no color, no type, no chrome. Just structure and content priority, validated against each persona's key barrier before a single visual decision was made.
Building a System of Trust and Clarity
To ensure consistency and scalability, I developed a design system built on a foundation of clarity, accessibility, and trust. Every component, from the color palette to the iconography, was chosen to support these core principles.
Two cornerstones of this system were our intentional choices for typography and color, which work together to create an environment where users feel confident and in control.
Typography: The Voice of Clarity
I chose Inter as the primary typeface because its design philosophy aligns perfectly with the needs of a financial application.
Optimized for Financial Data: Inter was specifically designed for high legibility on screens, which is critical when users must read numbers and small text with absolute clarity. This attention to detail extended to the technical implementation, where we enabled specific font features to improve the distinction between characters like 'I' and 'l', and numbers like '6' and '9'.
Projecting Professionalism and Hierarchy: The font provides a clean, modern look that builds a sense of trust. I strategically used its comprehensive weight range to establish a clear visual hierarchy: body text is set in Regular (400), headings in Semibold (600), and key financial values in Bold, guiding the user's eye to the most important information on the screen.
Color: The Foundation of Trust and Focus
The color system was meticulously crafted to support the application's goals and enhance the user experience.
--primary
#1A8CFF
Application primary color (VS Code blue)
--background
#F9FAFD
Main application background color
A Professional and Trustworthy Palette: The core of the palette is a professional and trustworthy blue (-primary), inspired by familiar developer tools to evoke a sense of reliability. This is complemented by a calm, very light blue-gray (-background), creating a sense of space and reducing eye strain.
--secondary
#EDEDED
Secondary elements
--muted-foreground
#737373
Text on secondary elements
Clarity Through Contrast and Hierarchy: I established a clear visual hierarchy through contrast. I used a range of grays for secondary (-secondary-foreground) and muted (-muted-foreground) text to guide the user's eye, ensuring that primary information stands out while supplementary details remain accessible but unobtrusive.
--success-background-hsl
#E6F7E6
Background for success messages
--destructive
#FF3B30
Color for dangerous actions
Accessibility and Unambiguous Feedback: The entire color system was designed with both Light and Dark Modes from the outset, ensuring a comfortable viewing experience for all users. Furthermore, I defined distinct, high-contrast colors for user feedback—a clear green for success (-success-background-hsl) and a vibrant red for destructive actions (-destructive)—ensuring that system status is communicated unambiguously.
Data Visualization with Purpose: The chart colors were chosen not just for aesthetics, but for maximum differentiation. Each of the five chart colors has a distinct hue (teal, green, red, blue, orange) to ensure that data segments in graphs are easy to distinguish at a glance, allowing for quick and accurate financial analysis.
--chart-1
#00D6D6
Teal
--chart-2
#99CC66
Green
--chart-3
#FF4D4D
Red
--chart-4
#3399FF
Light blue
--chart-5
#FF9933
Orange
Together, these systems for typography and color create a cohesive, intuitive, and trustworthy experience, ensuring users feel confident and in control of their finances
Inputs
Selection Controls
Buttons
The solution is a centralized, intuitive, forward-looking dashboard built on four pillars:
Main Dashboard
The financial command center: spending insights, cash flow, and investment performance at a glance.
Transactions & Credit Cards
A searchable log with category breakdown, answering "where did my money go?" for the 59% who felt they had no visibility.
Net Worth Evolution
Historical growth plus an AI-generated forecast; supports custom asset sources so real, messy financial lives aren't forced into rigid categories.
AI Financial Q&A
A natural-language assistant for direct questions about spending and history, instead of hunting through screens.
Validation & Testing
The four core flows were tested with 10 projected personas (5 "Alex" + 5 "Maria") using think-aloud protocol and the System Usability Scale.
SUS average: 46.5 against a target of ≥68 — Alex 53.5, Maria 39.5.
Sharpest finding: CSV import — meant to be the plug-and-play path — had a 10% task success rate (Alex 20%, Maria 0%). 9 of 10 projected users couldn't complete it.
Severity-4 findings: ambiguity between two import paths (A), an incompatible CSV format (B), and a unanimous lack of visible security signals (H).
What changed as a result: corrected the import path and format, added verifiable security signals to the flow, and clarified dual-currency handling.
46.5
/ 100
Target 68
Alex segment
53.5
Maria segment
39.5
Calibration pilot · 10 projected personas (5 Alex + 5 Maria) · think-aloud + SUS
CRITICAL FINDING
10%
task success on the CSV import — the one task meant to be plug-and-play. 9 of 10 could not complete it.
Alex 20% · Maria 0%
Severity-4 findings: ambiguous import path (A) · incompatible CSV format (B) · no visible security signals (H)
Integrity note — read this the way I'd say it in an interview: this was a calibration pilot with projected personas, not real human participants. It's a legitimate, useful step — it caught a critical flaw in what was assumed to be the simplest flow in the product — but the highest-severity findings remain hypotheses until the planned round of 10 real user sessions confirms them. I'm not presenting this as user testing with real people, and outcome metrics stay a projected framework, not a measured result, until real usage data exists.
Measuring Success & Future Vision
If launched, I would track:
FEATURE ADOPTION
>70%
connect a bank account within week 1
TASK SUCCESS
>95%
categorizing a transaction
ENGAGEMENT
WAU/MAU
high ratio, tracked from week 1
RETENTION
MoM
benchmarked vs. fintech industry standard
Next: run the planned real-participant usability round, launch an invite-only cohort, and let that data — not the calibration pilot — drive the next iteration.
Key Learnings & Reflections
This project reinforced several key principles of product design:
Clarity Over Complexity
In finance, it's easy to overwhelm users with data. My biggest challenge was balancing information density with a clean, intuitive interface. We learned that users valued a clear, high-level summary on the dashboard far more than seeing every single detail at once.
The Power of Proactive Insights
Simply displaying data isn't enough. Features like the AI-powered "Spending Insights" and the "Financial Forecast" were game-changers. Users don't just want to see their history; they want guidance on what might happen next and what they should pay attention to.
Design for Real-Life Scenarios
People's financial lives are messy. Allowing users to add custom sources like "Primary Residence" or manually adjust values was crucial. Acknowledging that not everything can be automated made the tool more flexible and trustworthy for users like Maria, who have complex financial situations.
Translate AI output into a user-centric experience
My primary lesson was that real value comes not from just detecting an anomaly, but from presenting that insight with context and clarity. Translating raw AI output into something meaningful requires designing with deep user empathy.
A successful AI feature is built on a strong data foundation
A key technical challenge was structuring data and prompts to ensure the AI's analysis was consistently accurate and relevant. This proved that a great AI user experience depends as much on thoughtful data engineering as it does on the interface design itself.
Embrace a holistic, end-to-end approach
Managing this project from the initial concept to the final AI integration reinforced how every decision, technical or strategic, directly impacts the user experience. This holistic view was essential for creating a cohesive and truly useful product.