Europa
Designing and building an expense tracker that takes more of the work off the user
Role
Product Designer
Industry
FinTech / Personal Finance.
Year
2026
Build
Expo / React Native
AI-assisted development
Claude Code and Codex
Overview
Europa is a personal product exploration I designed and built to explore a simple question:
How can tracking money feel less like filling out forms?
I designed the experience in Figma and built the mobile app with Expo, using Claude Code and Codex during implementation.
Making transaction logging feel more natural
Most expense trackers treat logging money as a collection of separate fields.
I explored using a sentence as the form instead:
I spent [amount] on [description] as [category] from [account] on [date].
I received [amount] for [description] as [category] into [account] on [date].
Each value is completed in context, keeping the transaction readable as one continuous action.
Transaction logging
Keeping setup in context
What happens if someone reaches the account field but hasn't created one yet?
Instead of interrupting the transaction, Europa lets them create an account within the same flow and continue where they left off.
Once recorded, the transaction immediately updates the user's history, income, expenses and net total.
More detail when you need it
Not every transaction needs extra information, so I kept secondary actions out of the main path.
Users can change the date, create recurring transactions and attach receipts or payment confirmations when needed.
The idea was simple: keep the common flow lightweight and reveal more control when it becomes useful.
Transaction details
Delete quickly, recover easily
I wanted deletion to work for both deliberate and quick actions.
Users can delete from the transaction details or swipe directly from the transaction list.
Rather than adding an extra confirmation step, Europa deletes immediately and provides Undo through a toast.
The action stays fast without making accidental deletion permanent.
Delete & Undo
Two ways to move through time
Swiping works well when checking last month. It becomes frustrating when looking for something from years ago.
Europa therefore supports both:
Swipe for nearby months.
Month & year picker for larger jumps.
Whichever method is used, the transactions and financial summary update to reflect that period.
Monthly history
Finding what happened on a specific day
The calendar provides another way to explore transaction history.
Selecting a date reveals that day's transactions and total, while swipes and arrow controls make moving between nearby days easy.
The add-transaction action remains available, so reviewing history doesn't separate users from the app's primary action.
Calendar view
Letting the product do the calculation
Sometimes the amount a user knows isn't immediately the number their expense tracker needs.
Europa's amount field handles two of those situations directly.
Users can record purchases in another currency while keeping their overall finances in their base currency. Europa converts the transaction when updating their history and totals.
A calculator is also built directly into the amount field, so expressions like:
250 × 4
1500 + 350
12000 ÷ 3
can be solved without leaving the transaction.
The goal was to remove work users would otherwise have to do somewhere else first.
Multi-currency & calculator
Defaults without limitations
Default categories help people get started, but they can't represent everyone's relationship with money.
Europa lets users create their own categories with a:
Title · Emoji · Colour
New categories become part of the existing system and are immediately available alongside the defaults.
The defaults provide structure without deciding how everyone has to organise their finances.
Custom categories
Designing through building
Taking Europa from Figma into a working app changed the way I approached the design.
Things that feel finished on a static screen become new design questions once they're interactive: keyboard behaviour, focus, gestures, empty states, validation, persistent data, destructive actions and how one change affects the rest of the product.
Building became part of the design process.
Building with Claude Code and Codex
I used Claude Code and Codex to help implement Europa in Expo, explore technical approaches, debug issues and iterate faster.
AI helped me move from designs to working interactions, but it didn't remove the need for product judgement.
I still had to define how each flow should behave, identify missing states, evaluate the output and refine anything that didn't match the intended experience.
What I took away
Europa started as an expense tracker, but the project became an exploration of where the product could absorb effort that would normally fall on the user.
A sentence replaces disconnected form fields.
Undo reduces the risk of quick actions.
The calculator removes extra arithmetic.
Currency conversion removes manual conversion.
Different navigation methods make history easier to explore.
Custom categories add flexibility without upfront setup.
The biggest takeaway was that improving an experience isn't always about adding a major feature.
Sometimes it's about noticing the small pieces of work users repeatedly do and asking:
Could the product do more of this for them?
Where I'd take it next
Europa is still an exploration rather than a finished finance product.
Next, I'd want to test the core transaction experience with real users, explore accessibility more deeply, test the product with much larger transaction histories, and develop areas like budgeting, reporting and financial insights.
More than anything, Europa helped me understand what changes when I take an idea beyond Figma and make it actually work.
