DivvyUp Finance
UI/UX Designer & UI Engineer
Budgeting, made cozy. Most finance tools feel like cold, clinical spreadsheets. DivvyUp replaces data clutter with a warm, friendly space. Helping users divvy up their cashflow into simple, visual buckets without the anxiety of micro transaction logging.
Evolution: Spreadsheet to Design Blueprint
Traditional budgeting tools overwhelm users with dense numbers. DivvyUp originated from a functional Excel spreadsheet designed around macro cashflow. I abstracted those raw data blocks into clean Figma wireframes, proving that personal finance can be both mathematically sound and visually inviting.
Cozy Design System & Tokens
Utilizing a decade of branding, I built an visual identity centered around a ring chart logo mark. Energetic primary orange (#EA580C) and soft cream
(#FFFBEB) were mapped directly into CSS theme tokens for a warm, inviting atmosphere.
To guarantee legibility on small mobile screens, I established a strict typographic hierarchy using Plus Jakarta Sans. Generous touch targets (`border-radius: 12px`) and custom vector line art.
Simplified Application Architecture
To eliminate friction, the UX flow isolates core actions into dedicated, single purpose modals seamlessly. From onboarding into the dashboard, managing income and bill allocations.
Frictionless Onboarding
The onboarding sequence sets an encouraging tone. Soft illustration vectors introduce the concept of "Divvies" (custom buckets) and fixed bills, priming users for stress free cashflow management.
Flexible Macro Toggles
The central dashboard widget provides instant visual feedback through a dynamic ring chart.
A prominent Weekly / Monthly view toggle recalculates totals in real time, allowing users to inspect immediate cashflow at a single tap.
Segmented List Views
Rather than mixing recurring fixed expenses with flexible buckets, the main feed uses a segmented tab system.
Your Divvies (spending/savings) versus Bills & Debits (utilities/subscriptions). This clear separation prevents decision fatigue.
Core Functionality & Data Inputs
From categor colour pickers in the Add Divvy modal to cloud backup integration, every interaction is engineered for speed. Form inputs validate instantly, keeping the UI responsive, clear, and easy to navigate on mobile viewports.
AI Accelerated Engineering Workflow
To accelerate execution from prototype to code, I utilized Google Gemini AI Canvas to generate core React logic and state management baselines. I then acted as the lead engineer refactoring code, fine tuning custom Tailwind CSS tokens, and using Gemini to audit logic for edge case bugs.
This modern hybrid workflow reduced development time significantly while ensuring the final app met strict visual, accessibility, and performance standards for Google Play deployment.
/* Custom Tailwind Tokens & Theme Configuration */
@import "tailwindcss";
@theme {
--font-sans: "Plus Jakarta Sans", sans-serif;
/* Cozy Brand Colours */
--color-primary: #EA580C;
--color-background-soft: #FFFBEB;
--color-secondary-navy: #2F2B7A;
/* Dynamic Preset System */
--color-preset-1: #3B82F6;
--color-preset-2: #EF4444;
--color-preset-3: #10B959;
}