Personal Expenses
Mohamad Al Bali
Glimpse of Design
Project Overview
This Personal Expenses App is designed to help users track and manage their daily expenses with a focus on intuitive interactions, clear organization, and ease of use. Theme design was chosen to provide a modern and comfortable viewing experience.
Key Features & Screens
Onboarding & Authentication:
Sign In and Sign Up: Simple, guided login and registration screens allow users to quickly create accounts or sign in. The forms are intuitive, with dropdowns for details like gender and birthdate to enhance usability.
Dashboard – Overview of Expenses:
Today’s and Monthly Expenses: Users can quickly see their most purchased item of the month, upcoming bills, and a summary of today’s spending. This gives a snapshot of their financial status at a glance.
Expense Categories: Options like "This Week's Expenses," "Reoccurring Items," and "Favorite Items" enable users to track spending habits and quickly access commonly bought items.
Expense Management:
Add New Invoice: A dedicated screen to add transactions, select items from a dropdown menu, and set quantities. This minimizes data entry, making it efficient for users to log purchases on the go.
Success Confirmation: A success screen confirms transaction additions, enhancing the user experience with instant feedback.
Analytics & Detailed Reports:
Weekly Spending Breakdown: The app displays an itemized list of weekly expenses, with quantities, unit prices, and a total. This helps users analyze spending patterns and make informed budgeting decisions.
Profile & Settings:
User Profile and Customization: Users can update profile information, switch to dark mode, set their preferred currency, and choose a language, providing a tailored user experience.
Search Functionality:
Filter and Sort by Categories: Users can search for specific items, filter results by category (e.g., "Vegetables"), and view expenses sorted by timeframe (this week, this month, earlier), making it easy to track individual spending categories.
Design Considerations:
Light & Dark Mode: The dark theme improves battery efficiency and provides a comfortable viewing experience, especially for users who frequently check their expenses at night.
Also, it's available in light mode theme.
Clean and Consistent Layout: The interface maintains a consistent visual hierarchy and spacing, making it easy for users to navigate without overwhelming them with information.
Responsive UI Elements: Dropdowns, toggles, and input fields are all designed to be user-friendly and responsive on both iOS and Android platforms.
Light Mode Design
Repository Link
Link to the backend application (Spring Boot)
Like this project
Posted Nov 8, 2024
Created a personal expenses app following the guidelines of Material Design 3 using Figma. The application was integrated using Spring Boot, Flutter & MySQL
Likes
0
Views
6
