Lumi
Personal money. Business planning. A clearer picture.
Lumi is a financial awareness and planning product that brings personal finances and business planning into separate workspaces. It connects income, recurring costs, spending, future commitments, and interactive calculations to help people understand their current position and explore possible next steps.
UI/UX & Product Designer
UI Design · UX Design · Interface Design · Interaction Design
Independent · Solo
Web application
Personal finances and business scenarios
Working product with features in development
Understanding the money behind the numbers
A balance shows an amount. Planning requires understanding what affects it: recurring obligations, everyday spending, future commitments, and the costs behind an income target. Lumi brings these relationships into view through records, comparisons, and scenarios.
How can people understand what is available and explore future scenarios while keeping recorded money distinct from planning assumptions?
Overview and detail
A summary needs to be easy to scan, but the records and assumptions behind it must remain accessible.
Shared access & separate contexts
Personal finances and business planning belong in one tool, but involve different records and terminology.
Useful estimates & limits
A calculation can support planning only when people can inspect its inputs, assumptions, and relationships.
Different questions need different views
Lumi’s structure supports three practical situations: planning between paydays, exploring future commitments, and evaluating business income against costs.
“What needs to be covered before my next payment, and how does actual spending compare with my plan?”
Difficulty
Income schedules and bills do not always align neatly with calendar months.
Design response
Payment-cycle workspace combining planning period, obligations, and expenses.
“How would a different repayment horizon change the monthly amount required?”
Difficulty
A debt total alone does not explain the relationship between time and monthly commitment.
Design response
Simulator updates required payment for a selected horizon without changing saved records.
“What remains from revenue after operating costs and selected reserves?”
Difficulty
Revenue, costs, and take-home estimates answer different questions.
Design response
Project-based records and calculation breakdowns expose the inputs behind each scenario.
Note: These situations are design assumptions used to explain the experience. They have not been validated through formal user research.
One product. Two financial contexts. Connected records.
Lumi separates personal finances and business planning into dedicated workspaces with shared navigation, connecting detailed inputs with summaries and scenario models.
Architecture Tree & Scope Hierarchy
Hierarchical relationship between dual workspaces and shared utility services.
Personal Workspace
- Spending Cycle
- Savings Goals
- Wishlist Queue
- Debts & Simulator
- Calendar Reports
Business Workspace
- Project Switcher
- Services & Income
- Cash Flow & Invoices
- What If & Pricing Tools
Shared Floating Utilities
- Profile
- Bank connection
- Learning
- Financial companion
Business groups are sections within the workspace rather than separate pages.
Personal relationships
Business relationships
Connected system view
Summary cards communicate period, inputs, and meaning without ambiguity.
Business relationships
Four decisions that shape the experience
These decisions explain the rationale of the current design with alternatives and structural tradeoffs. Alternative approaches explain the current design; they are not documented historical concepts tested with users.
Separate financial contexts, shared access
Problem
Personal and business records involve different questions and terminology.
Alternative approach
Combined workspace places all items together, requiring repeated context selection.
Current design
Dedicated Personal and Business workspaces with a shared header switch.
Tradeoff
Switching adds a step, requiring persistent cues for active context.
Plan by payment cycle, review by calendar month
Problem
The period used for planning differs from the period used for monthly reporting.
Alternative approach
Using calendar months everywhere ignores non-standard pay frequencies.
Current design
Spending uses payment-cycle periods; Reports provide calendar-month summaries.
Tradeoff
Requires clear period labeling so totals are not misinterpreted.
Explore a scenario without changing the record
Problem
Trying a repayment horizon must not be confused with committing a repayment.
Alternative approach
Placing scenario controls inside record editing blurs saved reality with what-if ideas.
Current design
Debt simulator displays dynamic payment scenarios without updating logged balance.
Tradeoff
Must explicitly differentiate exploratory slider states from saving actions.
Show the assumptions behind the answer
Problem
A single output figure hides the costs and reserve assumptions that produced it.
Alternative approach
Output-only calculator is cleaner but offers less guidance for decision confidence.
Current design
Business calculators show step-by-step inputs and formulas alongside totals.
Tradeoff
Requires thoughtful progressive disclosure to prevent dense visual clutter.
Record the detail. Understand the position.
Lumi brings income, fixed bills and actual spending into one payment-cycle overview, with calendar-month reports for reviewing spending over time.
Income & Bills
Recurring income and fixed bills establish the starting point for the plan.
Spending & Budgets
Inline transaction entry paired with planned vs actual category bars.
Monthly Report
Calendar-month reports bring income, bills and spending together for review.
Keep actual spending distinct
An expense can include a name, amount, optional date, and category. The entry form keeps actual spending separate from the fixed-bill list.
See the commitment. Explore the horizon.
The Debt Tracker presents an obligation alongside its monthly payment and payoff horizon. An inline simulator allows users to model durations without changing saved entries.
Savings Goals
Connects a future target amount with allocated savings funds.
Wishlist Queue
Item capture keeps planned purchases distinct from live spending.
Connect project costs with possible outcomes
Business planning combines active project context with subscription pricing and what-if simulation models.
Subscription Pricing Calculator
Input cost per user and target margin; inspect recommended price options and VAT deduction details.
What If Scenario Simulator
Adjust pricing, customer count, and variable expenses to pinpoint the estimated break-even client count.
Minimum hourly rate
Works backward from desired annual take-home and billable hours.
Runway estimator
Calculates how long a cash reserve sustains selected monthly burn rate.
Salary goal planner
Converts take-home target into gross project revenue requirements.
Planning note: Outputs are estimates based on selected inputs. Calculation consistency and tax assumptions remain part of the product’s ongoing review.
A consistent language for complex information
Lumi uses pale backgrounds, green emphasis panels, grouped cards, and supportive language. Large amounts establish hierarchy, while labels and breakdowns explain the figures.
Product specimens
Typography in Context
Clear hierarchy and consistent typography help users scan and manage information efficiently, even in larger lists.
Colour in Context
Pale backgrounds and green emphasis panels create a calm, approachable interface while guiding attention to key information.
Controls & Components
Consistent components, such as navigation, profile cards and activity lists, help users understand where they are and what to do next
Information Labels
Labels, tags and visual groupings make it easier to understand content at a glance and find relevant information.
Interaction examples
These examples show how the interface communicates empty, error, confirmation and over-budget states.
Empty State
Neutral guidance helps users understand what to do next without confusion.
Validation Error
Clear, field-level alerts help users quickly understand and fix mistakes.
Save Confirmation
A subtle inline message confirms actions without disrupting the user's flow.
Over-Budget State
Proportional alerts use colour and clear language to highlight important information.
A clear visual system for financial information
Lumi uses pale backgrounds, green accents and grouped cards to organize financial information. Prominent amounts highlight key totals, while labels and breakdowns explain what each figure represents.
01 / Typographic Foundation
2 TypefacesPlus Jakarta Sans
Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800Used for display headings and prominent financial figures. Larger sizes give key totals emphasis within the page hierarchy.
Safe to spend: $11,300
Manrope
Regular 400 · SemiBold 600Used for body text, navigation, labels, buttons, inputs and smaller headings. Size and weight distinguish supporting information from actions and section titles.
RUNWAY 14.2 MONTHS
02 / Color System
1 PaletteTerra Modern Core
Pale backgrounds separate the page from its cards and inputs. Green accents highlight key information and primary actions. Supporting text and borders provide quieter structure, while feedback colours identify states that need attention.
Soft Mint White
#edf4edPage backgroundMuted Sage Green
#688863Cards & panelsPowder Sage
#bfd4c2Primary actions & labelsDeep Forest Green
#1f2a24Panels & textPure White
#ffffffCards & Inputs03 / Iconographic Vocabulary
1.5px Line StrokeSimple line icons with a consistent stroke weight label the core financial concepts, so each one stays recognisable across the Personal and Business workspaces.
04 / Component Anatomy & Archetypes
Interactive PrimitivesComponent examples showing button states, inputs and content cards. Sample figures and entries are illustrative.
Payment day for this month: 1
Click to set a custom date for this month
Your monthly plan is holding steady.
You're in a good position after bills and spending.
You can safely spend
€66.48 / day
Keep it up!
You're on track.
€2,834.46
Fixed Bills
€1,438.28
20 days until next payment
Budget Used
0%
Under budget €384.00
High Savings Rate
Remaining Rate
49.3%
What the product review revealed
I used an AI-assisted critique to identify potential usability issues, then reviewed the suggestions against the product and prioritised refinements.
Financial definitions
Payment-cycle and calendar views use different timeframes; daily allowance needs clearer documentation.
Make summary periods, cost bases, and underlying assumptions explicit across all related views.
Navigation and completion
Some destinations do not strictly match nav labels, and several settings interactions remain incomplete.
Align labels with destinations and visibly badge features currently in active development.
States and accessibility
Over-budget empty copy needs calibrated tone; form fields require persistent labels for screen readers.
Match status messages to financial reality; audit keyboard focus and mobile touch target sizes.
Accessibility note: The product review found semantic controls and visible keyboard focus in inspected states. Persistent labels, contrast, keyboard behaviour, and responsive layouts require further verification.
What remains to validate
- Can a new user immediately identify their active payment cycle period?
- Can they cleanly distinguish a fixed recurring bill from a discretionary expense?
- Can they explain why a calendar-month report differs from a cycle summary?
- Can they explore debt horizon scenarios without fearing their balance was saved?
- Can they identify the costs and reserve assumptions behind a business calculation?
Three ways to understand the money
Payment Cycle Journey
- 1Review income and fixed bills
- 2Compare planned vs actual spending
- 3Record new expenses inline
- 4Review calendar-month report
Future Commitments Journey
- 1Inspect total liability & interest
- 2Adjust target payoff duration slider
- 3Compare recalculated monthly cost
- 4Retain saved balance intact
Business Scenario Journey
- 1Select client project workspace
- 2Inspect service baseline costs
- 3Input client tier & volume assumptions
- 4Inspect break-even take-home breakdown
Current Delivery
A working product with separate Personal and Business workspaces, financial records, monthly reports, debt simulation, and business calculators. Some features remain in development.
Next Steps
Unify definition tooltips, complete in-progress configuration flows, and test core navigation patterns with users across desktop and mobile devices.
Reflection
Clarity in financial tools depends upon consistent labels and assumptions across views. Periods, assumptions, and terminology must align as people move between recording daily facts and exploring speculative future possibilities.