BloomWise is a paycheck-optimization tool, a financial co-pilot that runs in the background. The Ugly Studio designed the full product, nine screens across onboarding, the Today dashboard, Payday Mode, Plan, History, and Simulations, with a complete, dev-ready design system in Figma.
Most money apps teach and coach. BloomWise executes. It intercepts income before it reaches a checking account and automatically routes every dollar, bills, emergency buffer, debt, savings, before the user can spend it. Think Grammarly for money: the algorithm runs each pay cycle, suggestions appear, the user taps Apply, and if they do nothing, the right thing still happens.
Every screen had to answer three questions in two seconds: how much is safe to spend right now, are all my bills covered this cycle, and is anything different about this paycheck. We designed for trust, not engagement.
The Today screen leads with one number, Safe to Spend, so the answer to the only question users ask daily is impossible to miss. Suggestion cards surface the right action at the right moment, each with one primary button. The whole product follows two non-negotiable rules: one primary CTA per screen, and default to automated. Users opt into manual control, never into automation.
Payday Mode is the most important screen. When a paycheck is detected, the app goes full-screen, hides navigation, and serves a single goal: tap Apply Plan. The allocation bar splits the deposit across bills, buffer, goals, and Safe to Spend, and an Adjust drawer lets users tweak the current cycle without touching the base plan.
Money apps tend to feel cold and clinical, built for people who already love spreadsheets. We designed BloomWise to feel like infrastructure you trust, warm enough that opening it feels good, credible enough that people act on what it tells them.
Color carries meaning, not decoration — green for safe to spend and positive states, amber for attention, red reserved for genuine urgency. Same logic from the Today hero number down to the smallest status chip.
A complete component library, status chips, allocation bars, suggestion cards in all five states, the Why and Adjust drawers, plan-accuracy chips, and skeleton loaders, every component shipped with loading, empty, error, and permission-denied states. Colors are defined as Figma tokens and everything uses Auto Layout, so the developer implements without inventing anything.
The system holds up across every screen and every state. Here's how it shows up in context.
Nine screens, every state designed, a tokenized design system the dev team builds straight from. BloomWise turns paycheck math nobody reads into one calm number and one tap, financial infrastructure that, once set up, just works in the background.
