# 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.

**Tags:** Design Systems, UI Design, Financial Services, Creative Direction
**URL:** https://nasifsalaam.com/projects/financial-institution-digital-transformation/

---

import ClickableImage from '../../components/ClickableImage.astro';
import FeatureCard from '../../components/FeatureCard.astro';
import ProjectStats from '../../components/ProjectStats.astro';
import TechStack from '../../components/TechStack.astro';

<ProjectStats
  stats={[
    { label: "Timeline", value: "2022 - 2023" },
    { label: "Role", value: "Lead UI Designer" },
    { label: "Team", value: "6-10 Developers" },
    { label: "Status", value: "Live Production" }
  ]}
/>

<div class="prose prose-lg max-w-none">

## 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.

<div class="flex items-center p-4 mb-6 text-sm rounded-lg bg-blue-50 text-blue-800 border border-blue-300 not-prose">
  <svg class="flex-shrink-0 inline w-4 h-4 mr-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
  </svg>
  <span>This is an NDA-protected project. The processes described are real, but specific details are generalized to respect confidentiality.</span>
</div>

## The Challenge

<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 my-8">
  <FeatureCard title="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.
  </FeatureCard>
  <FeatureCard title="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.
  </FeatureCard>
  <FeatureCard title="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.
  </FeatureCard>
  <FeatureCard title="Technical Constraints">
    External development team (6-10 developers) required clear communication and systematic approach to ensure design vision translated into production code.
  </FeatureCard>
</div>

## Role & Responsibilities
<ul class="list-disc pl-6 space-y-2">
  <li>Led UI design and creative direction across all platforms</li>
  <li>Designed and implemented comprehensive design system</li>
  <li>Collaborated with external development team (6-10 developers)</li>
  <li>Liaised with project managers, frontend developers, Flutter developer, and senior software engineers</li>
  <li>Pushed creative boundaries while ensuring market fit for South African context</li>
  <li>Presented design tokens to development team (pre-Figma variables)</li>
  <li>Created notification framework to systematize communication patterns</li>
</ul>

## 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.

<ClickableImage
  src="/images/fintech-competitor.png"
  alt="Competitive analysis across international and local banking leaders"
  caption="Extensive competitive research across international leaders and local banks informed design direction"
/>

### 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.

<ClickableImage
  src="/images/fintech-components.png"
  alt="Design system components including notifications, forms, and UI patterns"
  caption="Reusable component library including error states, notifications, forms, buttons, and navigation patterns ensuring consistency across all platforms"
/>

<ClickableImage
  src="/images/fintech-ui-design.png"
  alt="Mobile app UI screens"
  caption="Mobile app screens showcasing the design system in action across key banking features"
/>

### 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

<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 my-8">
  <FeatureCard title="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.
  </FeatureCard>
  <FeatureCard title="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.
  </FeatureCard>
  <FeatureCard title="Team Capability Building">
    Led cross-functional collaboration between designers and developers, establishing frameworks and processes that improved handoff quality and implementation accuracy.
  </FeatureCard>
  <FeatureCard title="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.
  </FeatureCard>
</div>

## Technical Implementation

<TechStack 
  items={[
    { category: "Design System", tools: ["Material Design 2 (Web)", "Material Design 3 (Mobile)"] },
    { category: "Platforms", tools: ["Public Web", "Secure Web", "Mobile App (Flutter)"] },
    { category: "Role", tools: ["Creative Direction", "UI Lead", "Design Ops"] },
    { category: "Collaboration", tools: ["External Dev Team", "Design Token Handoff"] }
  ]}
/>

## Key Learnings
<ul class="list-disc pl-6 space-y-2">
  <li>Market context matters as much as design trends. Understanding local user expectations is crucial for financial services.</li>
  <li>Design systems need to balance idealism with implementation reality. Presenting advanced concepts plants seeds for future evolution.</li>
  <li>Systematic thinking extends beyond components. Creating frameworks for notifications, tokens, and processes multiplies team efficiency.</li>
  <li>Collaborating with offshore and distributed teams requires clear communication and regular coordination.</li>
  <li>Creative pushing must be paired with business understanding. Innovation works when it serves both user needs and market context.</li>
  <li>Long-lived designs come from thoughtful foundations, not just trendy execution.</li>
</ul>

</div>