Debit card entry flow
Product: An Online Fashion Brand
Tools Used: Figma
Project Timeline: 2 Days
What is the problem?
42% Users are dropping off from debit card entry screen
This is a huge percentage of drop-offs, almost half of the users are not able to complete the task of adding debit card on the platform
Why are they dropping?
Based on the information provided in the brief
Users are trying to enter credit card details, but only debit cards are supported.
Input fields are apparent
“CVV code” is hard for a customer to understand and find on the card.
Errors due to which they are failing
- They are entering wrong CVV code
- The page is for debit card but they are entering credit card information
- They are entering unsupported card details
Assumptions
- Users are not able to identify which page they are on
- Users are not provided clear context of which card they are suppose to add
- The CTA they clicked through which they landed on the page is not clear
- Debit card terminology is not what the users are much aware of, in rural areas they call debit as ATM Cards
- Users are not aware of the term “CVV” and the placement of it
As mentioned in the brief that this problem is majorly faced by rural area users. So here is what I think of this set of users.
- In rural areas people are able to pull off many complex task without even knowing the technical terms and process of that task.
Example: A photo studio guy who is not well versed with english language, knows how to use photoshop and within minutes he can adjust the size, crop the image, and print out the multiple copies for you.
Here the main task he had learnt from someone by observing and not really understanding each terminology and their core.
Design objective
We should give them more visual clues, use familiar terminology on the page, show them relevant information with regards to error they are facing.
Hence going by each problem faced by the user, following are the solution as per my approach towards making their experience better and easier at each step.
1. Users are trying to enter credit card details, but only debit cards are supported.
As per my assumption there could be a problem at the starting point of this entire flow where the users are not sure about what type of card they are going to add ahead. Possible reasons for this confusion might be an unclear Call to action “Add new card” or a single entry point for adding both type of cards.
Solution:
We should keep a clear distinction between a credit and a debit card at the starting point with clear CTAs. Entry point for adding a debit card should be different than of credit card.
2. They are entering unsupported card details
As mentioned is the brief, there is no indication about the card provider on the screen. This could be a valid reason for them to enter details of unsupported card type as they are not aware of what cards the platform allows them to add.
Solution:
We should show what all types of debit cards are supported on the platform. Ideally it would be great if we can include this information as an interactive step in the flow, that would ensure that this kind of error doesn’t occur.
3. Input fields are apparent and the terminology debit card is appropriate or not?
I feel that debit card term is commonly user in tier 1 cities, but the word which rural users are used to is ATM card. So we should clearly show them both the terms debit/ATM card in the entire journey. This will start from the very beginning of the flow itself where they’ll be able to choose which card they are going to add debit/ATM or credit card.
I don’t have the visual reference of what type of input field the users are currently interacting with. I would keep it fairly simple and commonly used UI for the input component for this problem.
4. CVV code was incorrect on failed attempts
As the brief says “CVV code” is hard for a customer to understand and find on the card. Here the users might be entering some other number related to the card, even their 4 digit pin in some cases. They are not aware of the term and the placement of it on the card. We should visually show them where they could find the CVV code of their card.
Wireframes
I choose to design the solution for a mobile app. If the deadline wasn’t short I would have include the desktop version also.
Final UI Screens
Reasoning for design decisions
How would we know if this solution worked or not?
I would like to know few metrics that will help us understand if the percentage of users drop decreased, and by how much %. Major errors have been prevented by enforcing few steps in the flow such as user can’t go ahead without choosing the type of debit card, user can chooses to add either debit or credit card from the 1st screen.
- Would love to see users recording for the entire flow on hotjar or fullstory to understand the outcome of the design and if any other problems users are facing.
- Also would like to know how many maximum number of cards sing user is adding. As adding new card section is placed after the added cards, if the numbers are high would need to scale down the added cards in carousal so that add new card section could come in the first fold itself.
- How many users are clicking on scan the card CTA on header
Project Takeaways
Given the timeframe for this design problem, I tried to understand the problems first and then started to ideate around each one of them. Surely this might not be the perfect solution but with further user data on the design would help to improve it further, that how good experiences are made.
