Financial Institution Digital Transformation
Led design system and creative direction for a South African bank's digital transformation across all platforms, delivering a production system that has remained live for 2+ years.
Project Overview
A leading South African financial institution needed comprehensive digital transformation across all platforms to compete with industry leaders and modernize their fragmented user experience. As Lead UI Designer at Immersion Group, I designed and delivered a production design system, creative direction for their public website and secure platforms. The website launched in early 2023 and remains live nearly two years later without major redesign.
The Challenge
Fragmented Experience
The bank’s digital presence was scattered across multiple systems with inconsistent interfaces. Login, onboarding, forms, and dashboards all had different UI patterns, creating confusion and friction for users.
Market Competition
As a smaller player in South African banking, the institution needed to catch up with industry leaders like FNB, ABSA, and Capitec while also meeting international standards set by banks like Wells Fargo and Citibank.
Multi-Platform Consistency
The solution needed to work seamlessly across public web, authenticated secure platforms, and mobile app, each with different technical constraints and user contexts.
Technical Constraints
External development team (6-10 developers) required clear communication and systematic approach to ensure design vision translated into production code.
Role & Responsibilities
- Led UI design and creative direction across all platforms
- Designed and implemented comprehensive design system
- Collaborated with external development team (6-10 developers)
- Liaised with project managers, frontend developers, Flutter developer, and senior software engineers
- Pushed creative boundaries while ensuring market fit for South African context
- Presented design tokens to development team (pre-Figma variables)
- Created notification framework to systematize communication patterns
Process & Approach
Competitive Research and Market Understanding
When I joined the project mid-2022, an offshore design team in India was exploring three creative directions. Their approach leaned heavily toward experimental design that didn’t reflect South African banking expectations. I conducted extensive competitive analysis across international leaders (Wells Fargo, Citibank, American Express, Scotiabank) and local powerhouses (FNB, ABSA, Capitec) to identify the sweet spot between global standards and local market needs.
My design direction was selected over the offshore team’s work because it demonstrated deeper understanding of how South African users interact with financial institutions. This wasn’t about playing it safe. It was about innovating within a context that users would trust and understand.
Design System Architecture
I built the design system in 2022 using Material Design 2 as the foundation for web platforms and adapting Material 3 principles for mobile. This decision was strategic: Material 2 provided the robustness financial institutions need, while Material 3 offered the modern mobile experience users expect. The challenge was connecting these without maintaining two separate systems.
I went deep on design tokens, presenting a token-based system to the development team before Figma even introduced variables. While it was too advanced for immediate implementation, it demonstrated the level of systematic thinking I bring to scalability challenges. I adapted the approach to what the team could execute while maintaining the flexibility for future evolution.
The design system unified public web, secure authenticated platforms, and mobile app, ensuring consistency across every customer touchpoint.
Creative Direction and Innovation
Throughout the project, I consistently pushed for better solutions. When I saw opportunities to innovate or improve, I took initiative even when it meant challenging existing approaches. I created frameworks like the notification system to make repeatable processes easier for the entire team. If something could be systematized to improve efficiency and consistency, I built it.
Results & Impact
Production Website
The public-facing website launched in 2023 and has remained live without major redesign for nearly two years, demonstrating the quality and thoughtfulness of the design system and creative execution.
Unified Design System
Delivered a comprehensive design system that worked across three platforms (public web, secure web, mobile) and eliminated the fragmented experience that plagued previous implementations.
Team Capability Building
Led cross-functional collaboration between designers and developers, establishing frameworks and processes that improved handoff quality and implementation accuracy.
Design Leadership
My design direction was selected over offshore team’s work, demonstrating strong market understanding and creative vision that balanced innovation with user trust.
Technical Implementation
Design System
Platforms
Role
Collaboration
Key Learnings
- Market context matters as much as design trends. Understanding local user expectations is crucial for financial services.
- Design systems need to balance idealism with implementation reality. Presenting advanced concepts plants seeds for future evolution.
- Systematic thinking extends beyond components. Creating frameworks for notifications, tokens, and processes multiplies team efficiency.
- Collaborating with offshore and distributed teams requires clear communication and regular coordination.
- Creative pushing must be paired with business understanding. Innovation works when it serves both user needs and market context.
- Long-lived designs come from thoughtful foundations, not just trendy execution.