PFM - UpBank
Designed a comprehensive PFM feature for UpBank, enabling users to track budgets, categories, goals and transactions in a single dashboard
Context
UpBank needed a way for its users to view their consolidated finances in a single application. In 2024, The company I was working for given the opportunity to develop a pilot test (POC).
GOAL
The challenge was to build a complete Personal Finance Manager (PFM) in just three months. The goal: give users a clear, organized view of their personal finances—segmented by goals, categories, and budgets.
SOLUTION
The solution needed to:
Display income, expenses, and categorized transactions.
Allow users to set savings goals and budgets.
Integrate through banking APIs to sync real accounts.
Reflect UpBank’s institutional identity with a personalized design.
The fintech company already had the backend and categorization engine in place, so the project focused on designing and implementing the full web and mobile front-end in just three months. To accelerate development, we leveraged a Material UI (MUI) template, including its style guide and component library in both Figma and code.
TOOLS
My role & scope
Defined the product’s functional structure: navigation, hierarchies, and user flows.
Designed all key sections in Figma: home, transactions, budgets, goals, categories, login, profile, sync, and onboarding.
Applied the MUI style guide to streamline development.
Iterated designs based on client feedback, adjusting styles, colors, and components after the first review.
Collaborated with backend and frontend teams to ensure technical feasibility and visual consistency.
Led implementation reviews: manual testing across breakpoints and visual inspection of components.
Additionally, I designed and refined the full user onboarding flow from the bank’s app, including the redirect logic to the account sync front—a key step for API connection.
Research & benchmarking
As part of the process, I analyzed how other banks and digital wallets structured their functionalities. The goal was to contrast traditional banking with more modern wallets, aiming to update UpBank’s experience and interface without being 100% disruptive to its current reality.
Key references:
BancoEstado App (Chile)
MercadoPago (ArgentinA)
Ualá (Argentina)
BBVA (Global)
Banco Pichincha (Ecuador)
ICBC (Argentina)
Product structure & functional prioritization
As part of the design, I defined the overall structure of the product, prioritizing the essential sections to deliver value to the end user and meet the pilot’s tight timeline.
The prioritized sections were:
Onboarding & account sync
Home (balance and expense overview)
Transactions
Categories
Budgets
Savings goals
User profile
While the ideal product would have included features like financial education or advanced analytics, given the project context (3-month deadline, existing backend, and a small technical team), we made pragmatic decisions to ensure a complete and usable MVP.
✍️ Decision made together with the Head of Product and validated by the technical and commercial teams.
Wireframes & design decisions
Given the limited time and execution pressure, we followed an iterative section-by-section approach:
Define the purpose of each screen
(What does the user need to achieve here?)Medium-fidelity wireframes, mobile-first
Created in FigJam, focusing on structure, hierarchy, and navigation.Rapid validation with the Head of Product
Adjusting flow, copy, or layout before moving designs to Figma.Desktop adjustments
Scaling components and layouts from mobile to desktop while keeping consistency.
Iteration & feedback
Three weeks into the design, after completing the first functional sections (Home, Categories, and some base views), we held a key checkpoint with UpBank.
In that meeting, the client mentioned that while the structure felt solid, the visual style looked too generic and not fully aligned with their brand.
Client feedback:
“We want it to look more like our digital banking. Less neutral, more institutional.”
At that point, we had been working with the base style guide of MUI (Material UI) to speed up development by leveraging its component library. However, this feedback required a visual adjustment without breaking the technical architecture already chosen.
DECISIONS
Keep MUI foundations: structure, typography, spacing, buttons, borders.
Reasoning: respect the components already in use by the frontend team.
Adapt the visual identity:
Color palette: aligned primary and secondary colors with UpBank's institutional branding.
Key components: redesigned transaction tables for a more serious look consistent with traditional banking.
Iconography & headers: replaced some icons with more institutional variants, ensuring better contrast and less informality.
Microcopy: adjusted texts to sound more formal, using a neutral, direct tone in CTAs and system messages.
IMPLEMENTATION & VALIDATION
The design was refined the following week and shared again for approval—this time with a more personalized brand alignment.
The adaptation was well received by the client, allowing the project to continue without delays and demonstrating flexibility and active listening.
Final design
After an iterative process, the final PFM design achieved a balance between:
Visual consistency (based on MUI + UpBank branding)
User-centered experience (clarity, smooth navigation, visible priorities)
Ease of implementation (leveraging existing frontend components)
PROTOTYPE
I created an interactive prototype that unified all screens, showcasing the flows and interactions between them. It also included details such as notifications, filters, and other elements to better convey the overall PFM experience.
What I Learned from this Project
Limited room for change forces focus
The mix of tight deadlines, a small technical team, and shifting requirements pushed me to focus on what mattered most: clarity, simplicity, and scalability.A solid foundation (like MUI) can be an ally if you know how to adapt it
I learned how to design on top of predefined systems, respecting their rules while shaping them into a unique identity. This gave me a more pragmatic view of real-world design in companies.Iteration with feedback is not an obstacle—it’s part of the journey
UpBank mid-project change of direction was a great exercise in active listening, adjusting without drama, and keeping focus on delivering value.Collaborating with developers early facilitates delivery
I designed with real components and implementation in mind, which taught me to think in terms of code while designing.Mobile-first is more than a strategy—it’s a way of prioritizing
Starting with mobile helped me simplify the visual hierarchy, and then expand thoughtfully to desktop.
What I Would Have Done Differently
Invested more time upfront mapping the full architecture before diving into individual sections.
Documented each visual decision from day one with screenshots to accelerate handoff.
With a dedicated UI designer on the team, I would have focused more on UX, microinteractions, and content.
What I Took for the Future
Confidence in my ability to structure complete products, from flow to interface.
The capacity to adapt without losing focus on the user.
Practical tools to scale designs using existing visual systems.
First-hand experience designing for a regulated financial product with both business and user needs in mind.
BONUS TRACK
For this project, an Onboarding Tour was also prepared so the commercial team could present to stakeholders and showcase all PFM functionalities in a dynamic and persuasive way.