01
5 role-specific hubs
Custom-fit operational spaces for branch operations, treasury, Sharia compliance, and procurement managers.
Case study
Enterprise Banking Platform
I designed role-based workflows and information architecture for an enterprise banking platform spanning Sharia finance and multi-channel operations.
This project was completed under NDA for a confidential enterprise banking client. Names, data, & visuals shown here are recreated & representative, not the original product.
DomainEnterprise Corporate Banking & Sharia Finance
Timeline12-Week Design Cycle
RoleUX Strategy, IA, High-Fidelity UI, System Architecture
Tags
Key outputs delivered
02
Process builder IA
Mapping multi-stage, weighted cycle-time flows into unified visual trackers.
03
Bilingual architecture
Engineered for Arabic (RTL) and English (LTR), with native font optimization.
04
Enterprise pattern lab
Accessible design tokens built for fast-paced, high-density transactional screens.
The problem
Too many platforms. Zero shared context.
Enterprise banking teams across corporate operations, trade settlement, Sharia finance, and procurement relied on separate legacy systems. This created fragmented customer insight, duplicated workflows, disjointed system statuses, and heavy cognitive load whenever relationship managers had to switch operational context.
The complexity
Understanding the ecosystem
The platform needed to unify five distinct business dimensions into one navigation structure, while keeping each role's priorities distinct.
Platform Hubs
Core Platform ShellUnified entry point across all departments
Transaction SummaryBranch operations & alerts
Trading OverviewTrade operations & portfolios
Islamic PortfolioSharia-structured finance
TAT SummaryOperations & SLA monitoring
Supplier AnalysisProcurement & vendor operations
User Roles & Decisions
Branch Operations ManagerMonitors transaction volumes, clearing operations, and system health. Decides transaction prioritization, risk alert escalation, and resource allocation.
Senior Corporate RMManages client portfolios, trade operations, and deal pipelines. Decides deal prioritization, client engagement, and risk assessment.
Islamic Finance ManagerOversees Sharia-compliant products (Murabaha, Mudaraba, Ijara), monitors compliance. Decides product mix, compliance monitoring, and facility structuring.
Operations & SLA ManagerTracks turnaround times, SLA performance, and processing queues. Decides queue prioritization, process optimization, and exception handling.
Procurement LeadManages supplier relationships, vendor performance, and payment networks. Decides vendor selection, network evaluation, and cost analysis.
A single platform, five distinct decision-makers - each needing their own priorities surfaced first, without duplicating the underlying system.
System model
Design principles
Role-first navigation
Adapts to each user's operational role, surfacing contextual priorities first.
Progressive disclosure
High-level KPIs shown instantly, with dense metadata behind interactive layers.
Consistent dashboard patterns
Uniform structural grids across portals to reduce cross-departmental load.
Action-oriented interfaces
Designs prioritize decisions over static figures, using clear alert states.
Bilingual by design
RTL Arabic and LTR English built natively into the typography system, not retrofitted.
Typography - dual-type harmonization
Paired a high-performance Latin numeral typeface (for precise vertical alignment of financial ledgers) with a native Arabic corporate typeface, so both languages read with equal clarity in tabular data.
Localization
Every dashboard was designed with full Arabic RTL support as a core requirement, not an afterthought. Navigation, data tables, KPI cards, and charts mirror seamlessly between LTR and RTL layouts.
Design tokens - semantic architecture
Built for high-intensity, daylight operations, with a token system ensuring WCAG AA contrast across every component:
Text primaryText secondaryText tertiary
Surface tokenssuccess / warning / error backdrops for transaction statesText tokenshigh-readability confirmation, alert, and failure labels at full contrast
Component library
A full atomic library - typography scale, core palette, button system, data tables, status chips, and an 8-point spacing scale - built to support Sharia-compliant financial taxonomy across all five hubs.
Design showcase
Platform Interface Architecture
Figures shown across these views are illustrative, built to represent realistic operational scale rather than actual client data.
View 1
Transaction Summary (Branch Operations)
Transaction monitoring, status tracking, and retail banking operations for branch managers.
What this view supports: Real-time transaction visibility, SLA achievement tracking, critical risk alert escalation, and transaction records broken down by client tier and department.
Design highlights: Real-time KPI cards with color-coded status and trend lines; a prioritized risk alerts panel with severity classification and quick-action escalation; a high-density transaction table optimized for readability; live system status widget.
View 2
Trading Overview (Treasury)
Trading pairs, real-time pricing, and derivatives overview for treasury analysts.
What this view supports: Portfolio value tracking across active deal segments, end-to-end performance timers, product segment SLA compliance, and MT message/documentary credit monitoring.
Design highlights: Performance timer cards with visual SLA status anchors; product segment matrices using Sharia-specific transactional states; interactive message-volume tracking; a global filter bar for rapid pivot analysis.
View 3
Islamic Portfolio (Islamic Finance)
Portfolio compliance monitoring and Sharia-compliant investment tracking.
What this view supports: Portfolio-wide compliance scoring, instrument mix tracking (Murabaha, Mudaraba, Ijara), structured facility details with profit rates and risk ratings, and Sharia Board review timelines.
Design highlights: Instrument mix visualization cards; a structured facilities ledger; a centralized compliance monitor; a unified maturity timeline for portfolio planning.
View 4
TAT Summary (Operations)
Turnaround-time analysis, SLA compliance, and alert prioritization for operations leads.
What this view supports: Real-time processing throughput, weighted stage-by-stage process metrics, SLA breach identification by segment, and trend analysis for capacity planning.
Design highlights: A process builder timeline with weighted stage tracking; a segment-level SLA pass/fail table; aging statistics with risk-threshold alerts; a rolling weekly trend chart.
View 5
Supplier Analysis (Procurement)
Vendor performance metrics, procurement analytics, and supply chain risk.
What this view supports: Supplier monitoring across billing platforms, payment network coverage, vendor SLA trends, and cost-optimization insight.
Design highlights: A vendor risk matrix plotting tier against risk factors; a payment network performance comparison; a correspondent bank performance ledger; revenue and volume analytics.
Outcome
Scope & scale
5 role-based hubs, unifying previously fragmented departmental systems
A shared component library and semantic token system used across all views
Full bilingual (English/Arabic RTL) coverage across every screen, table, and chart
Design outcome
Reduced the number of systems a relationship manager needs to check for a full operational picture, from several disconnected tools to one
Made role-specific priorities visible immediately, rather than requiring users to search for what is relevant to them
Built a consistent pattern language that should shorten onboarding time for new users moving between departments
Reflection
Enterprise UX turned out to be less about creating visually distinct dashboards, and more about designing consistent systems that support different operational responsibilities while staying familiar across roles. The bilingual RTL requirement pushed my thinking on layout architecture further than I expected - every component had to work in both directions without losing usability.