Flux-o
A complete personal finance tracker, without distractions or paid features.
Project's scope
Design & Development
Platform
Mobile & Desktop
Team
Solo contributer (End-to-End UX/UI & Development)
Time Period
4 weeks
The Problem
The initial spark for Flux-o came from a personal frustration with the current landscape of financial trackers, the tools we use to manage it are often overly complex, or frustrating.
Paywalls & Feature Bloat
Essential features are often hidden behind subscription paywalls. e.g.: custom categories, receipt attachments, or currency options
Excessive Friction
Most apps require multiple clicks, form fields, multiple screens just to record a simple purchase, which discourages long-term logging habits.
Rigid Mental Models
Almost all finance tools force users into a strict calendar-month structure (1st to 30th/31st). In reality, people spend, budget, and live according to their paycheck frequency their salary cycle.
The Vision
Flux-o was designed to eliminate these barriers. I envisioned a tool that would reduce logging friction close to zero while presenting financial data in a premium, elegant interface.
The original MVP scope prioritized:
Instant Financial Pulse
A simple, high-density homepage showcasing the active spending total and recent activity.
Low-Friction Input
A single, unified sheet that slides from the bottom to log expenses in seconds.
Premium, Emotive Aesthetics
Vibrant gradients to transform expense tracking into an interactive, satisfying ritual.
Target Audience
Individuals who want immediate frictionless financial transparency without annoying paywalls.
Responsive Design
Mobile
Desktop
The layout expands dynamically. The floating bottom bar morphs into a left-side navigation sidebar, and the central charts sit side-by-side with recent transactions, taking full advantage of the horizontal workspace.
Tech stack details
Pivots & Refinements
Pivot A: Shifting from Calendar Months to "Salary Cycles"
The Friction
Standard monthly tracking (e.g., 1st to 30th) failed to reflect real-world behavior. Users felt out of sync because their budget reset before/later when they received their paycheck.
The Pivot
We engineered a custom Display Period engine that is fully customizable in settings, allowing the entire dashboard to align with personal pay dates.
Pivot B: Introducing the "Weekly Pulse"
The Friction: Simply showing a flat spending total (like "$1,200 spent") lacked context. Users had no easy way to know if they were spending too fast or pacing correctly compared to prior cycles.
The Pivot: We built the Weekly Pulse card. It splits the active cycle into 7-day increments and compares the current week's spending to the same week of the previous cycle, displaying real-time surplus or deficit percentages.
Pivot C: Refining the AddExpenseSheet Input Ergonomics
The Friction: Early input sheets stacked the currency selector, amount field, and date picker vertically, requiring multiple disjointed adjustments and interrupting the user's quick-logging flow.
The Pivot: We redesigned the form into a horizontal grid. We placed a tactile currency selector directly inside the bold numeric amount input and aligned the date badge next to it, optimizing the form for single-handed mobile use.
The Results
The final version of Flux-o stands as a feature-rich, high-fidelity personal finance companion:
Adaptive Dashboard
Displays active salary cycle metrics, the Weekly Pulse indicator, and an interactive Recharts area chart with custom gradients.
Full Custom Categories
Users can expand their taxonomy with custom category tags, selecting from high-quality Phosphor icons and curated colors.
Granular Spend Analysis
The Insights page offers weekly comparison charts, custom color-coded category breakdown bars, and instant indicators for the user's "Peak Week" and "Top Spending Day."
Flexible Settings
Allows users to adjust budget goals, switch primary currencies, toggle over-budget notifications, and override active periods (including custom date range selectors).
