Absa: Pay with a virtual card, anywhere.
Absa: Pay with a virtual card, anywhere.
Absa: Pay with a virtual card, anywhere.
Absa is a South African-based financial group which offers millions of South Africans personal and business banking, credit cards, investment banking and bank assurance.
Absa is a South African-based financial group which offers millions of South Africans personal and business banking, credit cards, investment banking and bank assurance.
FinTech
🇿🇦 ZA Client
App
Problem statement
Problem statement
Problem statement
As contactless payments gained widespread adoption, Absa needed to extend this behaviour from physical cards to mobile devices. While contactless card usage was already well established, customers lacked a secure and simple way to use their mobile phones and wearables for NFC payments within the Absa Mobile Banking App. The design challenge was to enable mobile-based tokenised payments that felt familiar to card users, supported both in-store and online transactions, and reduced exposure of sensitive customer data.
As contactless payments gained widespread adoption, Absa needed to extend this behaviour from physical cards to mobile devices. While contactless card usage was already well established, customers lacked a secure and simple way to use their mobile phones and wearables for NFC payments within the Absa Mobile Banking App. The design challenge was to enable mobile-based tokenised payments that felt familiar to card users, supported both in-store and online transactions, and reduced exposure of sensitive customer data.
As contactless payments gained widespread adoption, Absa needed to extend this behaviour from physical cards to mobile devices. While contactless card usage was already well established, customers lacked a secure and simple way to use their mobile phones and wearables for NFC payments within the Absa Mobile Banking App. The design challenge was to enable mobile-based tokenised payments that felt familiar to card users, supported both in-store and online transactions, and reduced exposure of sensitive customer data.
Research and Analysis
Research and Analysis
Building on existing business research, we analysed how competing banks implemented contactless and tokenised payment experiences. This focused on identifying common UX and UI patterns, as well as usability gaps, to understand where Absa could align with familiar behaviours while addressing shortcomings observed in competitor solutions.
Competitor Analysis
Competitor Analysis
Competitor Analysis
We reviewed virtual card offerings across local and international banks to understand adoption patterns and usability gaps. The key findings were:
Smaller banks adopted virtual cards earlier and saw higher usage.
Security benefits were often poorly communicated to users.
Card setup flows relied heavily on jargon, creating friction during onboarding.
We reviewed virtual card offerings across local and international banks to understand adoption patterns and usability gaps. The key findings were:
Smaller banks adopted virtual cards earlier and saw higher usage.
Security benefits were often poorly communicated to users.
Card setup flows relied heavily on jargon, creating friction during onboarding.
We reviewed virtual card offerings across local and international banks to understand adoption patterns and usability gaps. The key findings were:
Smaller banks adopted virtual cards earlier and saw higher usage.
Security benefits were often poorly communicated to users.
Card setup flows relied heavily on jargon, creating friction during onboarding.
Brainstorm Session
Brainstorm Session
Brainstorm Session
We ran focused brainstorming sessions to challenge early assumptions and define what the solution should prioritise and deliberately exclude. These discussions helped align stakeholders on scope, clarified trade-offs, and set clear boundaries before moving into detailed design.
We ran focused brainstorming sessions to challenge early assumptions and define what the solution should prioritise and deliberately exclude. These discussions helped align stakeholders on scope, clarified trade-offs, and set clear boundaries before moving into detailed design.
Reviewing existing flows
Reviewing existing flows
Reviewing existing flows
We reviewed established payment flows, including Apple Pay and Apple Wallet, to understand best practices around discoverability and setup. Because the virtual card needed to live both within the Absa Mobile Banking App and external wallets, there was a risk of the feature being obscured by broader banking functionality. Studying Apple’s flows helped inform how to surface the feature clearly and streamline the setup experience.
We reviewed established payment flows, including Apple Pay and Apple Wallet, to understand best practices around discoverability and setup. Because the virtual card needed to live both within the Absa Mobile Banking App and external wallets, there was a risk of the feature being obscured by broader banking functionality. Studying Apple’s flows helped inform how to surface the feature clearly and streamline the setup experience.
We reviewed established payment flows, including Apple Pay and Apple Wallet, to understand best practices around discoverability and setup. Because the virtual card needed to live both within the Absa Mobile Banking App and external wallets, there was a risk of the feature being obscured by broader banking functionality. Studying Apple’s flows helped inform how to surface the feature clearly and streamline the setup experience.
Virtual card assumptions
Virtual card assumptions
During research, we identified a set of assumptions and risks that were validated with business and technical stakeholders:
NFC tokenisation would initially support wearable devices such as Garmin and Fitbit.
Apple devices might be excluded at launch due to Apple’s country-level enablement requirements.
Existing card and payment features would remain unaffected.
Failure to launch a mobile contactless solution risked customer churn.
Delaying the solution could increase branch visits for physical card-related support.
During research, we identified a set of assumptions and risks that were validated with business and technical stakeholders:
NFC tokenisation would initially support wearable devices such as Garmin and Fitbit.
Apple devices might be excluded at launch due to Apple’s country-level enablement requirements.
Existing card and payment features would remain unaffected.
Failure to launch a mobile contactless solution risked customer churn.
Delaying the solution could increase branch visits for physical card-related support.
User flows
User flows
Before wireframing, we defined six core user flows to cover setup, usage, and edge cases. These included registering for Tap to Pay, managing the digital wallet, the in-app Tap to Pay journey, one-tap and two-tap payment interactions, and key negative flows.
Wireframes
Wireframes
The wireframes focused on three core flows: creating a virtual card, managing card details, and using the card for online payments. Card creation was intentionally simplified, allowing users to select the card type and validity period with minimal steps. Once created, card details were accessible from the dashboard to support quick reference and management. For online payments, virtual cards were integrated into existing Absa transaction flows to avoid introducing new or unfamiliar payment patterns.
Designs.
The final designs were refined through close collaboration with stakeholders and developers, balancing user needs with technical and regulatory constraints. Feedback was used to adjust flows, reduce complexity, and ensure the solution could be implemented without compromising the core experience.
The final designs were refined through close collaboration with stakeholders and developers, balancing user needs with technical and regulatory constraints. Feedback was used to adjust flows, reduce complexity, and ensure the solution could be implemented without compromising the core experience.
Development Handover
Development Handover
We prepared detailed handover documentation covering components, states, edge cases, and interaction behaviour. This reduced ambiguity during implementation and ensured the designs could be built as intended without ongoing clarification.
We prepared detailed handover documentation covering components, states, edge cases, and interaction behaviour. This reduced ambiguity during implementation and ensured the designs could be built as intended without ongoing clarification.
We prepared detailed handover documentation covering components, states, edge cases, and interaction behaviour. This reduced ambiguity during implementation and ensured the designs could be built as intended without ongoing clarification.
We prepared detailed handover documentation covering components, states, edge cases, and interaction behaviour. This reduced ambiguity during implementation and ensured the designs could be built as intended without ongoing clarification.
Learnings and Takeaways
Learnings and Takeaways
This project reinforced the importance of designing secure payment experiences that remain simple and familiar for users. Key takeaways included:
This project reinforced the importance of designing secure payment experiences that remain simple and familiar for users. Key takeaways included:
Security vs usability: Sensitive actions required clear security cues without adding unnecessary friction to core payment flows.
Security vs usability: Sensitive actions required clear security cues without adding unnecessary friction to core payment flows.
Integration over isolation: The virtual card feature worked best when aligned with existing transaction patterns rather than introduced as a standalone experience.
Integration over isolation: The virtual card feature worked best when aligned with existing transaction patterns rather than introduced as a standalone experience.
Cross-functional alignment: Close collaboration with engineering helped resolve constraints early and ensured design decisions were feasible and consistently implemented.
Cross-functional alignment: Close collaboration with engineering helped resolve constraints early and ensured design decisions were feasible and consistently implemented.
“Ryan's leadership, UX skills and UI expertise have ensured that we will reach digital transformation milestones in our African market and acheive growth in customer registration and retention”
Jade Sasseen
Design Director, Absa
“Ryan's leadership, UX skills and UI expertise have ensured that we will reach digital transformation milestones in our African market and acheive growth in customer registration and retention”
Jade Sasseen
Design Director, Absa
“Ryan's leadership, UX skills and UI expertise have ensured that we will reach digital transformation milestones in our African market and acheive growth in customer registration and retention”
Jade Sasseen
Design Director, Absa
“Ryan's leadership, UX skills and UI expertise have ensured that we will reach digital transformation milestones in our African market and acheive growth in customer registration and retention”
Jade Sasseen
Design Director, Absa
Explore All Case Studies
Explore All Case Studies
View case studies for funded startups and established global companies
View case studies for funded startups and established global companies
View case studies for funded startups and established global companies
Coachbit: A Behavior-Driven Learning Platform
Empowering students to build lifelong skills through personalized coaching, daily accountability, and a habit-based curriculum.
Empowering students to build lifelong skills through personalized coaching, daily accountability, and a habit-based curriculum.
EdTech
🇺🇸 US Client
App
View project
Quicket: SA’s most effective online ticketing service.
Quicket is a fast and effective online ticketing service for events of all sizes. Explore this project from my time at Specno, a design agency.
Quicket is a fast and effective online ticketing service for events of all sizes. Explore this project from my time at Specno, a design agency.
E-commerce
🇿🇦 ZA Client
Dashboard
Landing Page
View project
Designed and Developed by Ryan Duell
Designed and Developed by Ryan Duell
Designed and Developed by Ryan Duell