Ronard Gai

Capitec - New Banking System Redesign

I led the UX design and strategic alignment for a massive banking transformation project spanning three platforms. Which required a unified UX strategy, component-level alignment, a new design system, and full coordination across siloed teams. I worked across departments to map critical use cases, define user types, and unify task flows.

Role

Lead UX Strategist & Designer

Timeline

+2 years

Platform

Web

The Challenge

Rebuilding a legacy banking system from the ground up, unifying three disparate operational platforms (Remote Sales, Telephonic Support, Physical Branch) into a cohesive, user-centric ecosystem.

The core challenge was aligning multiple, independent product teams with varying priorities and technical stacks to deliver a seamless, secure, and efficient experience for diverse user types (agents) and customers.


Research & Discovery

Ronard Gai

Several rounds and iteration of the following research methods were applied during the course of building the banking system.

Stakeholder Mapping

I conducted extensive stakeholder interviews across product teams, channel teams, agents and clients to understand:

  • Current pain points and inefficiencies
  • Technical constraints and opportunities
  • Business priorities and success metrics
  • User workflow variations between platforms

User Research

Through user interviews and observational studies, we identified 8 distinct user profiles requiring 4 different permission levels, with complex role-switching capabilities between physical and remote environments.

  • Contextual inquiries with agents across all platforms
  • Task analysis and workflow mapping
  • Competitive analysis
  • Stakeholder interviews with product owners
  • Technical discovery sessions with engineering teams

The team in the period of first releases completed more than 14 rounds of user testing, with over 300 candidates. 23 Call centre & branch visits for task shadowing. Uncovering insights such as the high cognitive load in switching between product flows and sytem to fulfill tasks and the burden of not having a centralised source of customer information.

Ronard Gai
Ronard Gai
Ronard Gai

Strategy and Planning

UX Vision: To create a cohesive, efficient, and secure omnichannel platform that enables agents to deliver consistent client service regardless of location (remote/branch), with AI-enhanced tools and seamless backend integration.

UX Strategic approach

This project demanded a deeply strategic and collaborative approach beyond traditional UX design, my role required me to be part of delivery strategy and give steer on the system build across the organization. To frequently liase with product, engineering, legal, marketing, service / support and architects to align on delivery approach and standards. My contributions focused on:

  • I created UX plans, roadmaps and design principles to be used in building the banking system. Conducted stakeholder workshops and interviews to ensure alignment on overarching business goals and technical feasbility.
  • Promoted cross-team alignment & collaboration by orchestrating workshops to establish product design priorities, across all teams.
  • Led the initiative to build a comprehensive, scalable design system based on Google Material design principles using Vue frameworks.
  • Led user research and persona development strategies, from defining test goals, to choosing the optimal research methods and analising findings. These led to key insights such as (a) Including dynamic profile views based on agent role and task status, (b) the inefficiencies caused in work duplication.
  • Created operational frameworks and project plans that show the steps required for deliverying new and existing features, showing roles, responsibilities with RASCI models to streamline delivery across the multiple teams, creating a scalable recipe for delivery.
Roadmap
component library research or service map
Operation framework

Key UX Solutions

After iterative research and analysis phases, a large section of the project would be to build, populate, update and align with certain living artefacts for a teams to use.

  • Throughout the project we used customer journey maps at different tiers to map out the customer / agent experience on the new system on a product and task level.
  • I created a heirarchy task diagram to map out how features to be built into the system across teams, to understand how user (customer and agent) goals within the system will define navigation, information architecture and design patterns
  • Flow maps were very handy when aligning with business engineers / analysts in understanding what steps the client would need to do in accomplishing their tasks.
  • We implemented the use of service maps in order to have all the teams aligned in understanding the customer's and service agent's needs and what role their expertise plays in creating great user experience.
  • We created and shared design principles that would build delivery framework for all teams, special empahsis was on principles that focuses on information architecture and use of components to enable experience.
  • And ofcourse countless versions of wireframes were created, shared archived for reference with accompanying prototypes to show system interactions, current design delivery and interface style / elements for multiple business & engineering teams to reference.
Heirarchy Task Diagrams
Service Map
Wireframes

Building a new platform required design solutions for countless features, some new and others optimised with new industry standards and availability of new technology. Here are a few areas looked at:

1 - Secure Agent Authentication

Problem: Complex security requirements with biometric verification and session management, both to secure agent and client access.

Solution: Designed streamlined fingerprint-based sign-on with SSO integration, ensuring only verified agents could access the system and customer data while maintaining audit trails.

UX Innovation: One-agent-per-machine policy with visual indicators for session ownership and seamless handoff protocols. Agent #A is unable to log into the banking system application, until they sign user #B off the machine and login with their own details, before logging into the application.

Ronard Gai
Ronard Gai

2 - Adaptive Dashboard Design

Problem: Different user needs between remote (Sales & Support) and physical (generalist) agents. Different features and prirorities.

Solution: Created role-specific landing pages with contextual information architecture. Where remote agents are presented with dahsboard that suit their skill sets with visibility into cross-functional activities as well physical agents having access to more features being a generalist role.

3 - Optimised Automated Task Allocation

Problem: Historical inefficiencies with agents selecting their own tasks, leading to conflicts and errors.

Solution: Implemented intelligent task distribution system with customer continuity features.

Key Innovation Research shows that both users liked working with the same agent and agent are more productive and motivated on tasks they are familiar with. AI ensures returning customers are routed to their previous agent, while new tasks are distributed based on agent availability and expertise.

Ronard Gai
Ronard Gai

4 - Dynamic Role Management System

Insight User research revealed complex permission structures, 3 systems had multiple user roles, each served different function, with different hierarchical labels and permissions.

Solution: Created flexible role management for the entire system and summarizing into the following.

  • 8 distinct user profiles
  • 4 permission levels
  • Skills-based access controls
  • Physical/remote role switching capabilities

5 - AI Knowledge Bot

Problem: Growing product portfolio requiring consistent sales processes across mutltiple product types and with the merger of 3 systems, it would be impossible for agents to specialize in all product and research showed that customers usually had contextual user inquiries about products and expected agents to be experts on the subject matter at hand.

Solution: We introduced an AI information support, which was easily accessible and dynamic in size and placement.

  • Real-time information sourcing - from a centralized pool of all product information.
  • Display context-specific information to agents, guiding their conversations and ensuring consistent, high-quality client communication.
Ronard Gai

Design Process & Collaboration

Cross-Team Coordination

Established weekly review sessions and created shared prototyping standards to ensure alignement across all product and engineering teams and prevend redundant work.

Prototype-Driven Development

Created high-fidelity prototypes serving as the single source of truth for all stakeholders & engineering teams, reducing miscommunication and ensuring consistent implementation across platform.

Quality Assurance Integration

Implemented design review checkpoints with development teams to maintain design system compliance and interaction standards throughout the development process.

Design systems & component libraries

Facilitated discussion and mediated conflicts between component library preferences across teams. Got key stakeholder buy-in on best engineering approach to meet our collective goals.


Impact & Results

Operational Efficiency

  • Eliminated task conflicts through AI-powered allocation
  • Reduced agent training time with universal sales patterns
  • Improved customer continuity with intelligent routing

Security & Compliance

  • Enhanced fraud prevention with multi-method verification
  • Maintained audit trails with comprehensive session tracking
  • Improved access control with dynamic role management

User Experience

  • Streamlined workflows across all platforms
  • Reduced cognitive load with contextual information display
  • Improved agent performance with integrated analytics

Technical Achievement

  • Successfully coordinated multiple engineering teams
  • Implemented cohesive design system across different component libraries
  • Created scalable architecture supporting future product expansion

Lessons learned

1 - Cross-Team Collaboration: The importance of establishing shared design standards early in the process cannot be overstated. Regular alignment sessions and prototype-driven development were crucial for managing complexity across multiple teams.

2 - User-Centered Security: Balancing stringent security requirements with user experience demands creative solutions that make security measures feel seamless rather than burdensome.

3 - Scalable Design Systems: Building design systems that work across different technical implementations requires deep collaboration with engineering teams and flexibility in design execution while maintaining visual consistency.