Airtm Virtual card home

Airtm Virtual Card complete case study

Comprehensive UX, UI and Research study for Airtm virtual card

Step by step process of designing solutions for the digital products

1. INTRODUCTION

In this presentation, I presented the process of design for virtual card. As I got the liberty to update UI and UX for seamless experience, I use this opportunity to improve the overall look and feel of the product along with more relevant illustrations, fonts, colours and spacing. Its very important to have right balance of different elements so that the experience for setting up and using virtual card becomes even more better. My timeline for this task was 7 days

2. TASK

Imagine Airtm were to add a prepaid virtual debit card functionality to give users access to spending the funds on their Airtm account anywhere that visa or master is accepted online. Please create view for the place where you access your card information. Please include the following functionalities :

1. Buy card

2. Fund card

3. Card balance

4. Cancel or block card

5. Transaction history

6. Transaction details

7. Anything else that is missing or you would like user to give access to

3. GOAL

1. Onboarding for first time users should be smooth and painless.
2. Convey about new feature in the easiest way possible.
3. Develop a sense of security and trust is required so that they could have faith in Airtm.
4. Represent minimum cross border payment fees that Airtm offers.

4. RESEARCH

I. For UX

Its very important to understand UX part primarily. So that whatever be the solution I want to provide should have consistency, smooth user interaction and painless user journey. So the best way I like to start with is to understand the competitors/market to get an idea of how different companies approaching the problem and their ways of solving it in real-time.

I searched on internet for lots of platforms regarding the virtual card system and I really enjoy solutions provided by Transferwise, Paytm and SBI. They did a good job on the onboarding and making the virtual card system easy to understand for the first time users.

II. For UI

User interface is equally important to deliver a seamless experience to the users. Each and every element plays an important role on the screen, so I can’t ignore even a single detail. For UI I usually explore platforms like Dribbble, Behance, Awwwards, Pinterest. Ofcourse, I also get inspiration in UX also from these platforms. For me UI is not merely interface design but I get the opportunity to create an emotional connection with the user. Design is the language speak by the products, so it is important that the language should be understandable by the users.

III. My key points on the research

Now is the time to conclude all my research and other things that I save, screenshot, saved as notes etc into sticky notes. I pasted these sticky notes in my office, and update/improve it if something cross my mind or something that I feel was not correct or relevant. So after all the back and forth and wandering on the internet I am able to draw these: What I have to focus, and what I need to avoid (These are few sticky notes as the part of example):

5. PROBLEMS IN CURRENT DASHBOARD

6. APPROACH

During assignment I research, create prototypes and try to find solutions by having them solved in the easiest way possible. And this is the approach that I used here . I explored the best practices which implemented in existing virtual card related products in the market and at the same time rethink the Airtm’s virtual card section about how we could improve it to make it more user friendly and apply better experiences. I wanted to give a complete refreshing and more relevant look and feel to the Dashboard. I thrive on fusing the functionality with the design to get the best outcome. I feel the need to have a unique personality that Airtm will stands for.

7. PROCESS OF DESIGNING

The process which I follow to work is very simple and more inclined towards minimising the bridge between humans and digital device. I focus on working for building solutions. And the steps that take me to the solutions are mentioned below:

8. USERFLOW

9. WIREFRAMES

Wireframes are first drawn on Whiteboard and then convert it digitally via Balsamiq. Whiteboard gives me freedom to iterate as many times as I want to cover all the functionalities along with deciding layout, buttons placement etc and then transform it digitally via balsamiq to get the most accurate wireframes

9. DESIGN SCREENS ANALYSIS

This section covers in depth about all the screens one by one, my decisions about choosing elements and to take you through all the design decisions

…

…

…

…

…

…

…

11. ENTRY POINTS

1. Sending newletter via email to users about the virtual card feature

2. We could use left sidemenu space to promote virtual card feature

3. Use NEW tag in Virtual card tab in sidemenu to inform user about this option when they visit dashboard

12. UABILITY TESTING

After getting designs completed and prototyped in Marvel. Its time to reach users who are using similar products to assess our designs and provide genuine feedback. I gave user task to “Order your new virtual card” After users completed the task and review app completely I usually ask questions like: “How was the experience?” “What things you like/dislike in this prototype?” “Anything that is difficult to understand at first glance” “Any app you are using currently related to finance or virtual card?” “Overall Rating” I also noticed the time taken by them for overall journey to see how fast they could understand things.

I always get very useful insights with these one-to-one sessions to get a more depth about their mindset and understanding about how they perceive products. Below are insights extracted from conversations with the users:

13. USABILITY TESTING SUMMARY

14. LEARNINGS

Every project is different from each other. And the good part is every project teaches me something, same happens with this project. My main learnings from this project is time management. As i got timeline of 7 days, its very important to plan each and every hour to get the most quality work stress free. I spent almost 3 days on Research, exploration, trying different platforms, it also includes usability testing and to arrange all the important things got from the users as the part of testing. And rest 4 days for the wireframes, interface, prototype, documentation etc.I worked 10–12 hours daily to cover all this process step by step. I manage to complete all of these within the time but I think if I plan all these things more precisely and smartly from the beginning I am able to cover all these steps within 6-6.5 days. And I get more time to go through all the things again and again. And contemplate the designs for any further improvements/refinements. But I am happy at the end with what I got but as a designer there is always room for improvement no matter how good/satisfactory the solution is :)

15. WORKING PROTOTYPE

Check live prototype on the link below:

https://marvelapp.com/4680c61

That’s it from my side. I hope you like the overall presentation and find it useful. Feel free to share your thoughts/feedback in the comments below. For other updates that I did related to Airtm logo, website and other minor things please visit the link below:

Airtm general improvements and fixes

For more interesting creations, please visit :

Prakhar Neel Sharma

Prakhar Neel Sharma on Behance

Prakhar Neel Sharma - Design Director - Spacetouch, EvoAI, Artora | LinkedIn