Skip to content
Back to all work

Expenza

An editorial, gesture-driven mobile expense tracker engineered around a signature Shake-to-Add physical interaction, warm neutral minimalism, and a 100% local-first data architecture.

Type
Product design & working mobile application
Role
Product designer & mobile architect
Platform
iOS and Android (React Native & Expo)
Tools
Figma, React Native, Sharp
Expenza mobile expense tracker: Home dashboard, Shake-to-Add quick modal, and behavioral analytics overview

The friction problem in personal finance

Most personal finance applications fail not from a lack of features, but because of excessive interaction friction. When walking away from a coffee counter or grocery checkout, users have less than five seconds of active attention before pocketing their phone. Traditional capture flows requiring multi-level submenus, authentication walls, and cloud sync result in deferred tracking, inaccurate totals, and eventual app abandonment.

Expenza is built from the opposite principle: sub-three-second capture. By replacing UI navigation with physical intent, the app bridges the critical gap between immediate transaction capture and meaningful long-term financial awareness.

Expenza home dashboard showing hero balance, budget progress bar, where did it go breakdown, and spending streaks
Quick expense modal with 3x3 category grid and one-tap quick-increment amount pills
Shake-to-Add sensitivity configuration screen with threshold calibration and permission badges

Physical intent over UI navigation: Shake-to-Add

Rather than hunting for a floating action button or drilling into a menu, users simply flick their wrist. A custom accelerometer filter computes coordinate deltas across three axes (Δ > 3.0G) paired with a 1,500ms debounce cooldown to eliminate pocket false positives while preserving instant responsiveness.

The resulting modal auto-focuses the input, defaults to recent context, and presents quick-increment chips (+10, +50, +100, +200, +500) so round transactions can be logged in a single tap without invoking the keyboard. When minimized, a native foreground service triggers a tactile haptic pulse and delivers a direct deep-link notification.

Chronological transaction list with date sectioning, category filter pills, and live search
Interactive calendar view with spending indicator dots and day transaction inspection card
Behavioral insights dashboard featuring Money Mood velocity, monthly spending charts, and category breakdown

Warm editorial clarity without drop shadows

Expenza steps away from dark neon fintech cliches toward an editorial light visual system. Built on warm neutral backgrounds (#F7F7F5), crisp white cards (#FFFFFF), and hairline borders (#E7E7E4), the interface adheres to a strict zero-drop-shadow rule. Tactility comes from precise spacing, border hierarchy, and physical haptics rather than artificial blur layers.

Typography is set in Plus Jakarta Sans for crisp numerical legibility. Category tokens use high-contrast chromatic pairings—warm amber for Food, cobalt blue for Transport, magenta for Shopping, and royal purple for Bills—giving visual weight to distribution without distracting from core totals.

Category breakdown and spending distribution widget with proportional segmented bars
Money Replay story screen providing an Instagram-style monthly financial reflection narrative
Monthly budget configuration with numerical input and quick preset chips

Behavioral reflection: Money Replay & Money Mood

Recording expenses is only half the battle; the interface must also help users understand their spending rhythm. Expenza replaces passive chart dumps with deterministic behavioral insights: the "Money Mood" velocity badge evaluates daily spending speed against the calendar timeline, while consistency streaks reward no-spend and under-budget days.

At the end of each month, an interactive 7-stage Money Replay story transforms monthly totals into an engaging visual narrative covering top spending categories, peak spending days, and budget health in plain English.

Expenza mobile design system, money replay story card, and budget calibration showcase
Multi-format export engine generating styled Excel workbooks and formatted PDF statements
Expenza tokenized design system: typography hierarchy, semantic category colors, and card layouts

Local-first sovereignty & native export engine

Privacy is absolute: 100% of financial data is stored on-device via async storage with zero external telemetry, tracking IDs, or required accounts. Users own their data entirely.

To ensure complete portability, Expenza includes a built-in multi-format export engine. Users can generate professionally styled Excel spreadsheets (.xlsx) with header accents and formulas, formatted A4 PDF financial statements with metric cards, or structured JSON backups for external developer tools.

What it produced

A complete, production-tested mobile personal finance application that reduces everyday capture to a sub-three-second physical gesture while maintaining an editorial light aesthetic and 100% on-device data sovereignty.

What it demonstrates for client engagements is the end-to-end craft: translating physical hardware sensor APIs into delightful micro-interactions, designing rigorous tokenized UI systems that communicate without relying on drop shadows, and delivering pro-tier data exports natively on mobile.