Outdated interaction patterns
The legacy UI hadn't moved since the platform's first release.
Digital banking, Pakistan
Alfa Webinternet banking, rebuilt around everyday financial habits.
Bank Alfalah's Internet Banking was running on its legacy version — form-heavy, cluttered and disconnected from the modern Alfa app. I led a full UX reset, rebuilding it into a real-time financial control center.
alfa web · dashboard
01Context
The problem
Users could complete transactions, but never really see their money.
Bank Alfalah's Internet Banking was still running on the very first version of its web platform — form-heavy, cluttered, slow, and disconnected from the modern Alfa app. Users lacked clarity, instant financial visibility and easy access to the actions they performed every day.
I led a full UX reset, rebuilding the dashboard from scratch. Key balances appear upfront, high-frequency actions are surfaced, and smart widgets offer quick transfers, recent activity and upcoming bills. A task-based sidebar makes the whole experience faster, clearer and more intuitive.
The goal wasn't a new coat of paint. It was turning a place to complete transactions into a place to understand your money.
Hidden key actions
Frequent tasks were buried behind menus and weak navigation.
No modular widgets
No control over how financial information was surfaced.
02Objective
A user-first dashboard for daily financial behavior
Modern, scalable, and built to support how people actually bank — every day.
The platform needed to support daily banking with clarity and speed, not just carry the old structure over with a fresh visual layer.
- 01Modern dashboard, built from scratch
- 02Clear financial snapshot at a glance
- 03High-frequency actions brought forward
- 04Modular widgets & quick controls
- 05Research-based sidebar navigation
- 06Future-ready foundation for Alfa Web
03Research
Wireframing the foundation
Map what was broken, then decide what the new dashboard must do.
I mapped the old platform's problems against the new dashboard's goals, then sketched an initial wireframe to define where financial summaries live and to prioritize quick actions and widgets. This low-fidelity layout aligned the team early and kept the new design modular and optimized for fast daily banking tasks.
Problem-to-goal mapping
Where the old platform broke down.
Outdated UI, poor financial visibility, hidden key actions and heavy cognitive load — mapped directly against the new dashboard's goals.
Research artifact — old issues vs. new goals.research board
Low-fidelity sketch
Structure before polish.
An initial wireframe mapped the dashboard structure and the placement of financial summaries, quick actions and widgets before any visual design began.
Design choice — agree on hierarchy before pixels.wireframe
04Before & after
From a form-heavy screen to a control center
The old dashboard was dense, disconnected and slow to scan.
The redesign surfaces what matters first — balances, the most-used actions and live widgets — instead of asking users to dig through menus and tables to find them.
Same bank. Different experience.
What changed on the first screen.
Dense tables, weak hierarchy, buried actions.
The very first version of Bank Alfalah's web platform. Everything had the same visual weight, so nothing stood out — including the user's own balance.
- List-based layout
- Menu-dependent tasks
- No financial overview
- Cluttered sidebar
Balances, actions and widgets — upfront.
A real-time financial control center: a portfolio snapshot on top, quick links for daily tasks, and widgets for cards, transfers, transactions and bills.
- Unified portfolio
- Quick links
- Modular widgets
- Task-based sidebar
legacy
alfa web
Key features
Four decisions that changed daily banking behavior.
Each feature replaced a static, list-based pattern from the legacy platform with a dynamic, behavior-driven layout.
Unified financial snapshot
Every balance, in a single view.
Account deposits, wallet balance, card limits and Orbit points come together in one consolidated view — an instant financial overview without page navigation, something entirely missing from the legacy experience.
Design choice — clarity before capability.portfolio
Action-first dashboard
High-frequency actions, moved to the front.
Send Money, Bill Payments and Mobile Top-Ups sit at the front of the experience, reducing reliance on menus and improving transaction speed and daily usability.
Design choice — fewer clicks to the most-used tasks.dashboard
Research-based sidebar
Task-based, not feature-based.
A new information architecture groups items by task, transactional flow and navigation priority — faster page discovery and a lower learning curve than the old cluttered sidebar.
Design choice — group by what users are trying to do.overview
Smart modular widgets
A financial command center.
Widgets for card management, quick send to recent payees, transaction history and upcoming bills replace the static, list-based structure of the old system.
Design choice — widgets over static lists.cards
Screens
Statements, cards and the transfer flow.
A closer look at the surfaces that carry the redesign — from account statements to the send-money confirmation.
Card bill payment
Pay the right amount, pre-filled.
Statement balance, minimum due or a custom amount — the options users actually choose between, with the card's context kept on screen.
Design choice — defaults that match intent.card payment
05Design system
A vision piece that became the benchmark
Built as a standalone concept, it went on to set the standard.
While the dashboard was designed as a standalone vision piece, it later became the benchmark for Alfa Web UI standards — fully aligned with the official Alfa Design System, and a scalable foundation for every inner banking page.
Set the benchmark
Became the reference point for Alfa Web UI standards.
Aligned to the system
Fully aligned with the official Alfa Design System.
Built to scale
A scalable foundation for every inner banking page.
06Outcome
Still live today — only iterated, never replaced.
Public metrics are confidential, but based on fintech UX benchmarks and internal feedback, the redesign led to faster transaction completion, better visibility of financial data, higher engagement with card and wallet features, and stronger trust through transparent financial snapshots.
Transaction flows
Less navigation dependency across high-frequency tasks.
Financial visibility
Balances, limits and bills visible without digging through menus.
Transparent snapshots
Higher engagement with card and wallet features.
07Reflection
What I carried forward
People don't open their bank to use features. They open it to know where they stand.
The dashboard structure is still live today — only iterated, never replaced. That longevity came from designing around daily habits rather than the bank's product catalogue.
- Visibility of money builds more trust than any single feature.
- Surfacing high-frequency actions beats a perfectly organized menu.
- A strong first screen can become the standard for an entire platform.
Sarim NaeemSenior Product Designer · Bank Alfalah Case Study
Let’s design, build and ship something useful together.
