Designing Payment Experiences with Virtual Card Management
Designing Payment Experiences with Virtual Card Management
Designing Payment Experiences with Virtual Card Management
Due to the terms and conditions surrounding this project, certain information will be withheld, and the product will be referred to as the S-app throughout the entirety of the case study. Thank you.
Due to the terms and conditions surrounding this project, certain information will be withheld, and the product will be referred to as the S-app throughout the entirety of the case study. Thank you.
Due to the terms and conditions surrounding this project, certain information will be withheld, and the product will be referred to as the S-app throughout the entirety of the case study. Thank you.
Project Status: Design Phase Completed
Date Started
2023
Client Name
The Prito Company
Industry
Product Manageement
Introduction
Picture a group of people trying to make payments with their physical bank cards but can't due to some restrictions imposed in Nigeria. The time of this writing is sometime in 2023 and this restrictions still exist
S-app is a fintech product.
I had to put this out there to quell the outcry that may follow this statement. First of all, I acknowledge that there are a lot of fintech solutions, some struggling, some disbanded and some thriving.
Yes, I also acknowledge that people believe there is a saturation of fintech products, but here’s the thing: this was the client’s request, and my job was to deliver what the client wanted.
Now that we’ve gotten that out of the way, let’s continue with the background.
Over the years, Nigerians have experienced challenges and restrictions with the creation and maintenance of virtual cards. The client’s goal was to address these restrictions.
The idea of virtual cards and even the effort to curtail the challenges surrounding Nigerian owning one isn’t a novel concept, as many other fintech outfits have tried to solve this very same problem.
The client has been into virtual card creation for over 10 years now with a steady customer base, so it’s safe to say that the client knows what they’re doing. Their major need was to automate their services, easing the creation and maintenance of virtual cards for Nigerians.
I would also like to add that they already had a prototype of what they wanted and needed a designer to fine-tune and update the design to a product that was more aesthetically pleasing, functional, effective and intuitive.
Product Overview
Product Overview
The S-app comes with a wallet system for easy deposit and withdrawal of funds. The flow is such that users who migrate to the app fund their wallet and use the funds to get a virtual card. The wallet system aids in trust
Most virtual card systems offer USD, but the S-app’s USP is GBP. When a user deposits money in their wallet, they can switch between currencies. This switch is quite different from converting money. When they switch between currencies, they can see the value of your money in another currency.
The S-app comes with a wallet system for easy deposit and withdrawal of funds. The flow is such that users who migrate to the app fund their wallet and use the funds to get a virtual card. The wallet system aids in trust
Most virtual card systems offer USD, but the S-app’s USP is GBP. When a user deposits money in their wallet, they can switch between currencies. This switch is quite different from converting money. When they switch between currencies, they can see the value of your money in another currency.
Onboarding New and Existing Users
Onboarding New and Existing Users
Onboarding New and Existing Users
S-App starts with the good old onboarding process that allows users to create new accounts or log into existing ones.
S-App starts with the good old onboarding process that allows users to create new accounts or log into existing ones.
Home Flow
Home Flow
Home Flow
Once a user launches the app, they are met with the home page. The home page gives them a glimpse into their most recent transaction, their balance in GBP with the toggle option for other currencies, and finally, two CTAs (Call To Actions) for Withdrawal and Deposit actions. With either of the CTAs, users get to set the amount and mode of payment.
Once a user launches the app, they are met with the home page. The home page gives them a glimpse into their most recent transaction, their balance in GBP with the toggle option for other currencies, and finally, two CTAs (Call To Actions) for Withdrawal and Deposit actions. With either of the CTAs, users get to set the amount and mode of payment.
Creating a Virtual Card
Creating a Virtual Card
Creating a Virtual Card
The card creation starts by informing users about the financial requirements for their cards. Once they have digested this info, they get to start the creation process proper.
The card creation starts by informing users about the financial requirements for their cards. Once they have digested this info, they get to start the creation process proper.
The creation process is in three stages, a common practice with other virtual card creations. These three stages will see the user take a liveness test, alias selfie, upload a valid government document, and finally choose the type of card they would prefer.
The creation process is in three stages, a common practice with other virtual card creations. These three stages will see the user take a liveness test, alias selfie, upload a valid government document, and finally choose the type of card they would prefer.
After the registration is done and a user selects what type of card they want, they get to see a preview of the card and relevant information attached to the card. To ease their journey, they have the option to add or withdraw funds and also delete the card.
After the registration is done and a user selects what type of card they want, they get to see a preview of the card and relevant information attached to the card. To ease their journey, they have the option to add or withdraw funds and also delete the card.
Monitoring Previous Transactions
Monitoring Previous Transactions
Monitoring Previous Transactions
Everyone needs to see what they've been up to and how their funds have been spent. The transaction modals give users just that: a breakdown of their use with specific details like the date and amount. It also allows them options to print the receipt— if they maybe need proof to back up their spending.
Everyone needs to see what they've been up to and how their funds have been spent. The transaction modals give users just that: a breakdown of their use with specific details like the date and amount. It also allows them options to print the receipt— if they maybe need proof to back up their spending.
Doing More With S-App
Doing More With S-App
Doing More With S-App
What more? Users get access to profile settings, security settings and most importantly, a help and live chat that can assist with any issue they may encounter— not like anyone wishes their users encounter problems — it's a reassurance that the client has got them covered.
What more? Users get access to profile settings, security settings and most importantly, a help and live chat that can assist with any issue they may encounter— not like anyone wishes their users encounter problems — it's a reassurance that the client has got them covered.
Part 2
Approach To Creating This Solution
Approach To Creating This Solution
Research and Understanding The Problem
Research and Understanding The Problem
As I stated earlier, the client has an existing customer base and thus provided demographic information about the users and their habits. I continued the research by delivering into competitive analysis. With the domination of fintech products, I had enough products to study and monitor their flows. This was particularly important because of Jakob's law
In summary, this law states that users are used to a certain layout and flow because they use other apps and if you decide to build an app in a niche they're familiar with, it would do you some good to design around a flow their families with.
Okay. That wasn't a summary in any way, but you get the gist of the matter now. No matter how much novelty I intended to add to this product, it had to be recognisable.
If it walks like a fintech and talks like a fintech, it has to look like a fintech.
As I stated earlier, the client has an existing customer base and thus provided demographic information about the users and their habits. I continued the research by delivering into competitive analysis. With the domination of fintech products, I had enough products to study and monitor their flows. This was particularly important because of Jakob's law
In summary, this law states that users are used to a certain layout and flow because they use other apps and if you decide to build an app in a niche they're familiar with, it would do you some good to design around a flow their families with.
Okay. That wasn't a summary in any way, but you get the gist of the matter now. No matter how much novelty I intended to add to this product, it had to be recognisable.
If it walks like a fintech and talks like a fintech, it has to look like a fintech.
Defining The User Flow/Journey
Defining The User Flow/Journey
After analysing various competitive platforms, I adapted a flow that was smooth. The flow maximised the function users are supposed to undertake without overwhelming them with too many decisions. For example, on the home page, they have just two functions and on any given day, they can either undertake both or just one. I maintained the same idea for the card flow, transaction flow and manage flow.
After analysing various competitive platforms, I adapted a flow that was smooth. The flow maximised the function users are supposed to undertake without overwhelming them with too many decisions. For example, on the home page, they have just two functions and on any given day, they can either undertake both or just one. I maintained the same idea for the card flow, transaction flow and manage flow.
Creating Design Driven Ideas
Creating Design Driven Ideas
The initial overall design was in dark mode. I went with this design layout to lead the conversation, and it laid the groundwork for what the client wanted and absolutely didn't want. In the end, the client wasn't interested in being all dark and moody and thus went for a blend between both modes, which saw some inclusion of dark themes into light themes.
The initial overall design was in dark mode. I went with this design layout to lead the conversation, and it laid the groundwork for what the client wanted and absolutely didn't want. In the end, the client wasn't interested in being all dark and moody and thus went for a blend between both modes, which saw some inclusion of dark themes into light themes.
Visual Design
Visual Design
The final rendition was based on the client's initial prototype. For design systems, I leveraged existing ones like the Flowbite and Rayna UI to give life to the product.
The final rendition was based on the client's initial prototype. For design systems, I leveraged existing ones like the Flowbite and Rayna UI to give life to the product.
Development and Product Testing
Development and Product Testing
The role of a designer goes only as far as a client allows, and as of the publication of this case study, I can’t say whether the client has started the development process or not. So, there are no developmental metrics. However, having adhered to the best possible design practices with consideration to user needs and existing design laws, I am confident this design can be adapted to serve the needs of the users.
The role of a designer goes only as far as a client allows, and as of the publication of this case study, I can’t say whether the client has started the development process or not. So, there are no developmental metrics. However, having adhered to the best possible design practices with consideration to user needs and existing design laws, I am confident this design can be adapted to serve the needs of the users.
Final Thoughts
Final Thoughts
The entire design experience was a learning one. I had to find a way to design a unique product that happens to fall into the category of the most popular niche in the ecosystem without replicating the concept of existing apps in that niche. Safe to say, it tasked my brain, but I gained the satisfaction that my client was impressed with her job.
The entire design experience was a learning one. I had to find a way to design a unique product that happens to fall into the category of the most popular niche in the ecosystem without replicating the concept of existing apps in that niche. Safe to say, it tasked my brain, but I gained the satisfaction that my client was impressed with her job.
Thank you for reading 🤩
Thank you for reading 🤩
Thank you for reading 🤩
read next documentation on security
read next documentation on security