Bank9ja Digital Banking Ecosystem Case Study

• Role: Senior Design Engineer
• Company: 9 Payment Service Bank (9PSB)
• Products: Bank9ja Mobile App, Web App, Merchant Collect, Corporate Banking, Agency Banking
• Timeline: February 2025 – Present

Overview

In February 2025, I joined 9 Payment Service Bank (9PSB) during a critical transition period as the organization moved from outsourced development to building its digital banking products fully in-house. My responsibility spanned product design, design systems, frontend implementation support, and close collaboration with product and engineering teams to rapidly ship scalable, compliant, and user-centric financial products under tight timelines.

Within my first month, I led the design and delivery of the Bank9ja Web App MVP as a stop-gap solution, followed by the full end-to-end design of the Bank9ja Mobile App and parallel workstreams across Merchant, Corporate, and Agency Banking platforms.

This case study captures the design strategy, system thinking, execution, and cross-platform consistency behind the Bank9ja ecosystem.

Design System (Foundation Before Phase 1)

To enable speed, consistency, and accuracy across multiple products and teams, I established a centralized Bank9ja Design System early in the engagement. This system became the backbone for all platforms and allowed design and engineering to move in parallel without friction.

Design System Principles

• Single source of truth across mobile, web, and dashboards
• Engineering-first components aligned with production constraints
• Accessibility, scalability, and fintech compliance
• Rapid iteration without UI regression

Technology & Libraries

The design system was largely based on well-designed, production-proven open-source libraries:

• Shadcn UI – component architecture and patterns
• Tailwind CSS – spacing, color, typography, and layout tokens
• Iconsax – consistent, modern iconography

System Coverage

• Typography scale
• Color tokens and semantic roles
• Buttons, inputs, selects, modals, tables
• Authentication and transaction patterns
• Error states, empty states, and system feedback
• Responsive behavior across breakpoints

This foundation enabled me to deliver multiple fintech products concurrently while maintaining visual and functional consistency.

Phase 1: Bank9ja Web App (MVP – 1 Month Delivery)

Context

The Bank required a rapid MVP web application to support customers while internal mobile development ramped up. I worked closely with product managers and engineers to define scope, flows, and delivery within a one-month timeline.

Core Features Delivered

• Secure user authentication (Login & Password Recovery)
• Peer-to-peer money transfers
• Airtime and data purchases
• Bill payments
• Transaction history with download capability

Design Focus

• Simplicity and clarity for first-time users
• Clear transaction confirmation and feedback
• Performance-first layouts
• Alignment with banking compliance requirements

Outcome

• Successfully launched as a stop-gap product
• Enabled uninterrupted customer service
• Established early design patterns reused across mobile

Phase 2: Bank9ja Mobile App (End-to-End Design Ownership)

Following the web MVP, focus shifted fully to the Bank9ja Mobile App, where I handled design from discovery to final handoff across multiple sprints.

Sprint Breakdown & Features

Onboarding & Account Setup

• User onboarding flows
• Account tier upgrade (KYC progression)
• Referral program integration

Payments & Transfers

• Intra-bank and inter-bank transfers
• Cross-border African transfers (OnAfriq integration)
• Bluetooth-based payments
• Pay-for-me / Request money flows

Cards, Savings & Engagement

• ATM card request and management
• Savings and investment products
• Predict and Win engagement feature
• Link external bank accounts

Lifestyle & Ecosystem Expansion

• Wakanow integration for flight and hotel booking

Design Challenges Solved

• Complex financial flows simplified for non-technical users
• Clear risk and confirmation states
• Feature discoverability without clutter

Phase 3: Bank9ja Merchant Collect Platform

While mobile design was ongoing, I simultaneously designed the Merchant Collect Portal, targeting businesses and merchants.

Key Features

• Merchant onboarding and verification
• Virtual account creation
• E-commerce plugin for online stores
• Cash pickup and instant settlement
• Payment link creation and management
• Invite and Earn referral system
• QR payments via Bluecode integration
• Customer loyalty program creation
• Transaction history and analytics
• Merchant settings and profile management

Additional Deliverables

• Designed and implemented merchant decals using HTML and CSS
• Designed and built responsive email templates for merchant communication

Phase 4: Bank9ja Corporate Banking Platform

The Corporate platform was designed for organizations requiring multi-user access and approval workflows.

Features Delivered

• Corporate onboarding and account opening
• Payment links for corporate collections
• User and role management
• Approval workflows (Initiator, Reviewer, Approver)
• Transaction history
• Beneficiary management

Design Considerations

• Enterprise-grade clarity
• Permission-based UI visibility
• Audit-friendly transaction flows

Phase 5: Bank9ja Agency Banking Platform

I also contributed to the design of the Agency Banking platform, enabling agents to perform banking operations on behalf of customers, with a focus on speed, reliability, and low-error interaction patterns.

Engineering Collaboration & Execution

As a Design Engineer, I worked deeply with engineering teams to ensure designs translated accurately into production:

• Component-level design aligned with frontend architecture
• Handoff optimized for React and Tailwind workflows
• Continuous design QA during development
• Iterative improvements post-launch

Impact & Results

• Delivered multiple fintech platforms under aggressive timelines
• Enabled cross-team velocity through a shared design system
• Supported platforms serving 80,000+ users
• Achieved 97%+ transaction success rate across live systems

Key Takeaways

• Design systems are force multipliers in high-scale fintech
• Engineers and designers move faster when speaking the same language
• Strong foundations enable parallel product execution

Final Note

This work reflects my approach as a Senior Design Engineer: seeing the product end-to-end, balancing user needs with system constraints, and building solutions that scale beyond initial launch.