Mobile apps · Design concept
Personal finance app
A mobile money tracker concept linking an overview, transaction list and monthly budget, with proposed information hierarchy and interface states.
Design concepts, not client projects. Screens are static mockups; names and data are illustrative.
The design brief
Make everyday spending understandable without crowding a small screen. This concept connects a monthly overview to the entries behind it and a category-based budget view.
- Designed for
- People checking their recorded spending and comparing it with a monthly budget.
- Constraints to consider
- A total needs a clear period and a route back to its entries. All amounts and transactions are fictional static examples. There are no bank connections, payments, investment features or financial advice.
The proposed journey
- 01
Review the month
The overview gives monthly figures the strongest visual weight, with recent activity below for context.
- 02
Inspect transactions
A separate list groups individual entries by date, keeping the description and amount together.
- 03
Compare the budget
The monthly budget view places category spending against its budget so users can inspect the difference.
Why these design choices?
Give every number a context
Period labels and category names sit close to amounts. A large number alone cannot explain which entries it includes.
Keep the tone matter-of-fact
Muted periwinkle highlights the budget view without turning every change into a warning. Proposed over-budget messages describe the amount and period without judgement.
A closer look at the visual system
Proposed design specimens. These are static examples, not working controls or a production specification.
Colour roles
Warm background
#F8F7F3
Budget emphasis
#7979B8
Amounts & text
#292A31
Typography & spacing
Clear information. A considered next step.
Use a sans-serif face with clearly distinguishable digits and aligned numeric widths for amounts. Currency and negative signs need to remain legible at the smallest text size.
Give the monthly total room, then use tighter date groups in the transaction list. Keep each category label, amount and budget indicator together.
Beyond the ideal state
No entries
No transactions recorded this month. Add an entry to start your overview.
Budget saved
Monthly budget updated. Existing transaction amounts have not changed.
Invalid amount
Enter a budget amount greater than zero.
Why keep the transaction list separate from the monthly overview?
The overview answers a broad question about the month; the list explains the entries behind that view. Separating them gives each task space, provided the selected period stays visible when moving between screens.
