Improving financial visibility for people managing multiple projects and income streams

A mobile experience designed to centralize projects, expenses, income and cashflow into a single financial system.

Luma is a mobile fintech experience designed for people managing multiple projects, clients, and income streams at the same time.

The project originated from an increasingly common problem: traditional financial apps display balances and transactions, but provide very little context around how money is actually organized throughout day-to-day work.

For people with variable income, multiple ongoing projects, or expenses tied to different jobs, this often creates a fragmented financial experience that is difficult to understand and not particularly useful for making clear financial decisions.

Based on this insight, I designed an experience focused on contextual financial organization, allowing users to centralize income, expenses, projects, and cashflow through a clearer, more operational, and easier-to-understand interface.

Traditional financial apps show transactions, but not financial context.

Most current financial apps are designed to display balances, transactions, and charts, but provide very little visibility into how money is actually distributed across projects, work, and daily expenses.

For people managing multiple clients or variable income streams, this often translates into:

Many users end up managing their finances across banks, notes, spreadsheets, or separate apps, creating a fragmented experience that becomes difficult to maintain.

Centralizing projects, expenses, and income into a clearer and more contextual financial experience.

Luma was designed as a contextual financial experience where income and expenses can be organized around real projects, making it easier to understand cashflow, financial stability, and profitability in a simpler and more operational way.

Instead of focusing solely on balances or traditional categories, the product aims to help users visualize how their money actually behaves throughout their daily work, prioritizing financial clarity, reduced cognitive load, and contextual organization.

Core Features

• Project-based financial organization: Luma allows users to assign income and expenses to specific projects in order to improve financial visibility, separate work contexts, and better understand profitability.
• Available to Spend: The experience was designed to clearly show how much money is actually available, taking into account reserves, pending expenses, and contextual financial organization.
• Smart expense assignment: Users can manually assign expenses or use contextual suggestions to improve financial organization and analytics without adding unnecessary friction.
• Cashflow visualization: The Analytics section allows users to visualize income, expenses, and financial stability through simple and easy-to-understand charts.

UX Flows

• Create Project: Users can quickly create projects to start organizing income and expenses around real work contexts.
• Expense Assignment: After making a purchase, users can assign transactions to specific projects to improve financial clarity and profitability.
• States & Edge Cases: The experience was designed considering unassigned expenses, negative cashflow, projects without income, transaction reassignment, empty states, and pending payments.

Design System & UI Implementation

I built both the design system and the functional interface directly in HTML and CSS using reusable components, semantic variables, and scalable patterns designed to reduce the gap between design and implementation.

This approach made it possible to transform visual decisions into an interactive and functional interface from the early stages of the project, enabling rapid testing, state validation, and exploration of real behaviors directly within the implemented product.

More than 80% of the interface was developed using reusable components and shared patterns, allowing faster iterations, improved visual consistency, and significantly reducing friction between design and development.

Result

Luma explored a new way of organizing financial information around real projects and workflows, transforming income, expenses, and cashflow into a more understandable, organized, and contextual experience.

• The code-first approach reduced more than 70% of the traditional time required to build a design system from scratch, design, iterate, and implement new interfaces and components, eliminating a large portion of the traditional handoff between design and development.
• During initial product validations, the introduction of project-based financial organization improved financial categorization adoption by approximately 65% during testing flows, reducing friction when interpreting expenses and income distributed across multiple work contexts.

The result was a mobile fintech experience designed to help people with variable income better understand and organize their daily financial situation.