-
Notifications
You must be signed in to change notification settings - Fork 1
Design Concept
Finance.io is a finance management app that enables users to track income and expenses across multiple accounts. The goal is to deliver a clean, intuitive, and user-centered interface that makes financial data both understandable and actionable. Users can choose to connect their bank accounts or manage their finances manually.
UI for connecting bank accounts via a secure interface (e.g. using a API).
Option to skip connection and manage income/expenses manually. flow for both options during onboarding and later in settings.
Feature that allows users to create a savings goal (e.g. “Trip to Japan”) and invite another person to save together.
Design includes:
Invite mechanism (email, link, username)
Progress bar or visualization of savings
Contribution history (per user)
Display of all transactions (income & expenses) in chronological order.
Filter and sort options (e.g. by date, category, amount).
Visual separation between income and expenses.
Possibility to manually add/edit a transaction.
Dashboard or overview screen showing:
All connected/manual accounts
Total balance
Clear indicators for account status (e.g. connected, manual, error)
Visual representation of user’s finances over time.
Include:
Diagram/Line for expenses and income
Category breakdown
Filters (by date range, category)
Comparison over months
Insight cards (e.g. “Your biggest spending category in September was Food.”)
System for categorizing each transaction:
Auto-categorization suggestions
Manual override
Color-coding per category
Icons and labels for categories like: Food, Rent, Transport, Salary, etc.
Area or card component where AI-generated suggestions are shown:
Example: "You spent 25% more on subscriptions this month."
Tipps for the User: "You can safe 5% more money every month"
Friendly, non-intrusive tone
Icon or assistant avatar
Accessibility: Ensure color contrast, readable typography, and screen reader compatibility.
Theme: Dark mode/White mode
Design System: Use consistent components and layout rules to allow scalability. (e.g. lucide icons)
Microinteractions: Use animations and transitions subtly to enhance user experience (e.g. on saving progress, inviting someone).
Wireframes (low- and high-fidelity)
Clickable prototype (Figma)
Design system (colors, typography, components)
Documentation for handoff to developers
Responsive design layouts (mobile, tablet)