SecureBank
SecureBank
SecureBank
A clear desktop banking dashboard that puts balances, transfers and cards one click from the sidebar.
A clear desktop banking dashboard that puts balances, transfers and cards one click from the sidebar.
ROLE
ROLE
UI/UX Designer: information architecture, transfer flow, UI design and mockup
UI/UX Designer: information architecture, transfer flow, UI design and mockup
PLATFORM
PLATFORM
Desktop web app
Desktop web app
TYPE
TYPE
Personal concept project
Personal concept project
View on Behance
View on Behance
View on Behance
Overview
Overview
Overview
SecureBank is a personal concept for a desktop web banking app for personal customers. Eight screens cover the core money tasks: an overview dashboard, account management, a full transaction history, a three-step money transfer (form → confirm → success), card management and settings for profile, security and preferences.
SecureBank is a personal concept for a desktop web banking app for personal customers. Eight screens cover the core money tasks: an overview dashboard, account management, a full transaction history, a three-step money transfer (form → confirm → success), card management and settings for profile, security and preferences.
In my words
In my words
In my words
Banking apps can make moving money feel risky, so with SecureBank I wanted a desktop dashboard that shows where your money is at a glance and keeps everyday actions close. I kept the navigation flat, with six sidebar items, and put Send Money, Request Money and Pay Bills in a persistent Quick Actions panel. Four cards summarise balance, income, expenses and savings, and colour does real work: green for money in, red for money out. For transfers, I added a confirm step that restates every detail before a clear, shareable receipt.
Banking apps can make moving money feel risky, so with SecureBank I wanted a desktop dashboard that shows where your money is at a glance and keeps everyday actions close. I kept the navigation flat, with six sidebar items, and put Send Money, Request Money and Pay Bills in a persistent Quick Actions panel. Four cards summarise balance, income, expenses and savings, and colour does real work: green for money in, red for money out. For transfers, I added a confirm step that restates every detail before a clear, shareable receipt.
The problem
The problem
The problem
Banking dashboards often overload people with numbers, hide everyday actions such as sending money or paying bills, and make transfers feel risky. Customers need to see where their money is at a glance and move it with confidence.
Banking dashboards often overload people with numbers, hide everyday actions such as sending money or paying bills, and make transfers feel risky. Customers need to see where their money is at a glance and move it with confidence.
Goals
Goals
Goals
Summarise the financial picture in four cards: Total Balance, Income, Expenses and Savings.
Summarise the financial picture in four cards: Total Balance, Income, Expenses and Savings.
Keep the most common tasks (Send Money, Request Money, Pay Bills) in a persistent Quick Actions panel.
Keep the most common tasks (Send Money, Request Money, Pay Bills) in a persistent Quick Actions panel.
Design a transfer flow that slows down at the right moment: a confirmation step, then a clear receipt.
Design a transfer flow that slows down at the right moment: a confirmation step, then a clear receipt.
Keep navigation flat and predictable with six sidebar items.
Keep navigation flat and predictable with six sidebar items.
Target users
Target users
Target users
Everyday personal-banking customers who manage several accounts and cards.
Everyday personal-banking customers who manage several accounts and cards.
People who want to track spending and move money between accounts.
People who want to track spending and move money between accounts.
APPROACH
APPROACH
APPROACH
How the design came together, step by step.
How the design came together, step by step.
01 Flat information architecture
01 Flat information architecture
A fixed sidebar lists Dashboard, Accounts, Transactions, Transfer, Cards and Settings, with a pale-blue active state.
A fixed sidebar lists Dashboard, Accounts, Transactions, Transfer, Cards and Settings, with a pale-blue active state.
02 Glanceable dashboard
02 Glanceable dashboard
Four KPI cards with coloured icon tiles sit above My Accounts and Recent Transactions, with colour-coded amounts.
Four KPI cards with coloured icon tiles sit above My Accounts and Recent Transactions, with colour-coded amounts.
03 Transfers as a guided flow
03 Transfers as a guided flow
A form with a live summary, a confirm step that restates every detail, and a success screen with a reference number and Share Receipt.
A form with a live summary, a confirm step that restates every detail, and a success screen with a reference number and Share Receipt.
04 Detail views
04 Detail views
Accounts, Transactions and Cards each add focused tools: statements, filters and status pills, card visuals and usage bars.
Accounts, Transactions and Cards each add focused tools: statements, filters and status pills, card visuals and usage bars.
05 Settings grouped by intent
05 Settings grouped by intent
Personal information, security, notifications, authentication and preferences, with account actions kept clearly separate.
Personal information, security, notifications, authentication and preferences, with account actions kept clearly separate.
KEY FEATURES
KEY FEATURES
KEY FEATURES
The screens that carry the experience.
The screens that carry the experience.
Overview dashboard
Overview dashboard
KPI cards, My Accounts, Recent Transactions and Quick Actions for Send, Request and Pay.
KPI cards, My Accounts, Recent Transactions and Quick Actions for Send, Request and Pay.
Accounts
Accounts
A total-balance banner and one card per account, with View Details and Transfer actions.
A total-balance banner and one card per account, with View Details and Transfer actions.
Transactions
Transactions
Summary cards, search, filter chips and a table with category and status pills.
Summary cards, search, filter chips and a table with category and status pills.
Transfer form
Transfer form
From and To accounts with a swap button, quick-amount chips and a live Transfer Summary.
From and To accounts with a swap button, quick-amount chips and a live Transfer Summary.
Confirm transfer
Confirm transfer
A review step that restates every detail, with Edit and Confirm Transfer.
A review step that restates every detail, with Edit and Confirm Transfer.
Transfer success
Transfer success
A large check, transaction details, a reference number and Share Receipt.
A large check, transaction details, a reference number and Share Receipt.
My Cards
My Cards
Physical-card visuals, credit-usage bars and recent card transactions.
Physical-card visuals, credit-usage bars and recent card transactions.
Settings
Settings
Profile, password, notification and two-factor toggles, and preferences.
Profile, password, notification and two-factor toggles, and preferences.
SCREENS & MOCKUPS
SCREENS & MOCKUPS
SCREENS & MOCKUPS
The full set of designs, screen by screen.
The full set of designs, screen by screen.
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
The colour palette used across the screens.
The colour palette used across the screens.
COLOURS
COLOURS
Primary blue
Primary blue
#0F3AF9
#0F3AF9
Success green
Success green
#1ADE45
#1ADE45
Alert red
Alert red
#FD0E0E
#FD0E0E
Orange
Orange
#F4731E
#F4731E
Purple
Purple
#B83FF4
#B83FF4
Card blue
Card blue
#1D38C0
#1D38C0
Card purple
Card purple
#8F09D2
#8F09D2
Canvas
Canvas
#EEEEEE
#EEEEEE
OUTCOME
OUTCOME
OUTCOME
A complete, consistent set of eight screens covering the core banking journey end to end.
A complete, consistent set of eight screens covering the core banking journey end to end.
The transfer flow builds in a review step and a shareable receipt, designed to reduce mistakes and anxiety.
The transfer flow builds in a review step and a shareable receipt, designed to reduce mistakes and anxiety.
Colour carries meaning (green in, red out, plus category colours), so amounts read at a glance.
Colour carries meaning (green in, red out, plus category colours), so amounts read at a glance.
HAVE A PROJECT IN MIND?
HAVE A PROJECT IN MIND?
HAVE A PROJECT IN MIND?
I’d love to hear about it. Let’s build something great together.
I’d love to hear about it. Let’s build something great together.
I’d love to hear about it. Let’s build something great together.
Get in touch
Get in touch
Get in touch
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
Phone: +2349038049003