Virtuca
Web application to create virtual credit cards to use of different ad platforms.
JAN 2021
UI design, Web design
Summary
Virtuca is a web application to create multiple virtual credit cards to use on different ad networks like facebook, google ad sense, twitter, Instagram and other ad platforms. Users can refill the cards with money from via the payment gateway or the wallet. Users also have access to manage the card and also view the transactions and can also generate 3D secure codes on the platform.
My role
Freelance UI Designer
Tools
Adobe XD, Photoshop, Illustrator
The challenge
Prior to this project starting Virtuca didn't even have a platform. The client just had the idea of the project. There were competitors but we were unable to do a competitor research because all these platforms are very secured and we could get a chance to get a demo. The client briefly explained me the project overview.
My role was to design the web application screens without the low fidelity prototypes because it was a time sensitive project and the client wanted the whole design delivered in 3 business days. I had to skip all the ideation process and just dive into the project.
My design approach
As I had limited time to design the final project, I had a call again with the client to gather the exact requirements and provided my inputs. We just ideated in our minds. I wanted to design a clean and minimalistic product. I went through dribble to get some quick inspirations. Got some inspirations and started to work on the project right away.
User needs
- Can create multiple virtual credit cards and manage them.
- Can top-up the cards, view transactions.
- Can add money to virtuca wallet.
User flows
Dashboard
- Dashboard that displays all the cards in one page.
- Designed to provide all the important features in one page to promote usability.
- Cards, Virtuca wallet, transactions are the three important features.
- User can create a new card from the dashboard.
Cards page
- Displays all the cards and the selected card information is populated in the page.
- Balance, card details, transaction history of that card and 3Ds authorization history.
- In this page user can refill the card view the full card number, refresh card details and manage all cards.
Card options popups
- User can view card, add a new card and refill cards.
- View card is used to display the hidden card numbers and also prompts OTP for security reasons.
- While adding a new card user can select card issues like visa, mastercard, discover etc.
- User can refill card from the wallet balance, if the wallet balance is low the user can add money the wallet.
Detailed transaction history
- User can select a particular card and check its transaction history.
- The transaction history table provides all the details such as description of the transaction, transaction id, amount, status of the transaction, payment method, and invoice.
- Used different label colors for the payment statuses which helps users to identify the status very easily.
- Users can download the report in formats available.
- Robust filters to search to tough the transactions very easily.
