Banking app - UI Design
This project showcases a clean and modern banking app interface focused on delivering a simple, transparent, and user-friendly financial experience. The goal was to help users easily view their account balance, explore detailed transaction histories, and perform core banking actions like sending money or making payments without overwhelming them with complexity.
The app allows users to:
Instantly check their balance and recent transactions
Send or receive money with just a few taps
Clearly separate income and outcome transactions
Navigate with ease using a clean and minimal layout
The design system was built to ensure consistency, scalability, and clarity across the banking app.
Typography: A structured type scale using the Poppins font, with various weights to support clear hierarchy and readability across different components.
Colors: A contrast-friendly palette optimized for accessibility. Greens for actions and success, reds and yellows for alerts and outcomes, and neutral grays for structure and balance.
Icons: A custom set of minimal, line-based icons to support navigation and reinforce visual cues for features like security, shopping, coffee shops, and transfers.
Components: Reusable interface elements like toggle buttons (Income/Outcome), transaction cards, and action buttons to maintain visual and functional consistency.
The home screen provides users with an instant overview of their financial status. It features a card carousel, balance preview, and two key actions: Send Money and Make Payment. The card design draws attention with visual depth, while the transaction preview below displays recent activity clearly, using brand icons and contextual tags (e.g., Shopping, Groceries). A toggle option hides or reveals the total balance for privacy in public settings.
This screen allows users to filter their transactions by income or expenses, creating a clearer understanding of their financial flow. Each transaction entry includes:
Brand icon
Category label (e.g., Restaurants, Entertainment)
Colors and icons help users identify categories at a glance. The "See more" option invites deeper exploration into past activity.
Send Money Page - This screen supports peer-to-peer transfers with minimal friction. Users can enter an amount, select currency, and optionally add a payment reference. The layout is kept clean and centered around clarity and precision. The numpad input appears natively, creating a focused transaction experience.
Settings Page -The settings section focuses on usability and accessibility. Users can update personal details, control security features, and access terms and support in a well-structured, componentized layout. Settings categories are icon-labeled and spaced for readability. A clear “Log out” action is placed at the bottom for easy access.
