Mobile apps · Design concept
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.
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.
The overview gives monthly figures the strongest visual weight, with recent activity below for context.
A separate list groups individual entries by date, keeping the description and amount together.
The monthly budget view places category spending against its budget so users can inspect the difference.
Period labels and category names sit close to amounts. A large number alone cannot explain which entries it includes.
Muted periwinkle highlights the budget view without turning every change into a warning. Proposed over-budget messages describe the amount and period without judgement.
Proposed design specimens. These are static examples, not working controls or a production specification.
Warm background
#F8F7F3
Budget emphasis
#7979B8
Amounts & text
#292A31
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.
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.
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.
