Absa: Pay with a virtual card, anywhere.
Problem statement
Jumla was developed by an engineering team who turned a blind eye towards design and the impact it could have. They focussed on being feature orientated, adding features that the developers and stakeholders assumed added the most value to users. Over time the app evolved to be feature rich but there were five pain points that needed to be addressed:
- Limited amount of buyers were completing the sign up procedure.Jumla was experiencing a decrease in purchases made buy existing buyers.
- Supplier management of prices and availability of product was causing logistic issues.
- Scalability issues for mobile have raised concerns in the past with potential investors and users alike.
- Competitors in the space have better design and simpler products, making their apps more attractive and usable for both sides of the market.
Competitor Analysis
Prior to starting the project we did a competitor analysis, where we looked at what other banks in South Africa (and abroad) were providing to their customers.
Some of our key findings were :
- The smallest of the banks was the first to adopt a virtual card and had the highest adoption rate.
- There was a lack of an indication of the safety benefits of using virtual cards.
- The process of adding a virtual card was often jargon heavy.
Brainstorm session
As we went through the design process we had multiple brainstorm sessions where we questioned what we should focus on and what we should avoid while designing. This was used as a way to formulate thoughts and ideas that weren’t necessarily discussed in detail in previous sessions.
Reviewing existing flows
Seeing as we were not the first to market, we had lots of existing flows we could review and dissect. One which was of some importance was Apple Pay and Apple Wallet feature.
Seeing as Absa’s goal was to not only allow the virtual card to be added to other payment wallets but also be accessible inside the mobile banking app itself, it presented a unique situation whereby the feature and the wallet could get lost within the other app features. We explored the Apple Pay flows to understand how we could streamline ours.
Virtual Card assumptions
During the research phase it became clear that we had multiple assumptions about Virtual cards and the impacts it would have on an Absa customer. These assumptions were discussed with the business and technical team to assure that all bases were covered.

- The virtual card tokenisation solution for NFC tap to pay will be enabled for wearable devices such as Garmin and Fitbit.
- The solution may exclude Apple phones on launch due to Apple having to enable the capability on a country level.
- All other features should not be impacted.Should this solution not be delivered we could lose customers for not being able to provide a contact-less solution.
- Should this solution not be delivered there could be an increase in footfall in the branches for physical card related queries and complaints.
Userflows
There were six main flows we explored before starting wireframes. These were: Register for Tap to pay, Digital Wallet, Tap to Pay in-app journey, One tap experience, Two tap experience, Negative flows.
Wireframes
The wireframes included screens for generating virtual cards, viewing virtual card information, and using virtual cards for online transactions. The virtual card generation process was designed to be as simple as possible, with customers able to select the type of virtual card they needed and the length of time they wanted it to be active.
Once a virtual card was generated, customers could view its information in the app, including the card number, expiration date, and security code. The virtual card information was also easily accessible from the app's dashboard, making it simple for customers to view and manage their virtual cards.
For online transactions, the virtual cards feature integrated seamlessly with the existing transaction flow of the Absa banking app. Customers could select their virtual card as the payment method, and the app would automatically populate the payment form with the virtual card information.
Designs
Based on feedback from stakeholders and the development team, the team refined the design, incorporating any necessary changes and making sure that the design met all requirements and was feasible for development.
Development Handover
We documented all design components in detail, including wireframes, visual designs, error and success messages, and interaction specifications. This provided the development team with a clear understanding of the design solutions and their implementation.
Learnings and Takeaways
This project taught me a lot about integrating new technologies into a user’s everyday experience and the importance of balancing security with a user-friendly experience.
"Ryan helped design a brand new interface, built a component library, carved customer-centric journey enhancements, and supported through the launch of our new feature"
Explore My Case Studies
View case studies for funded startups and established global companies
