Dibs
To design a touchscreen interface for an Automatic Teller Machine (ATM) geared towards kids aged 10-15 whose parents have opened a savings account for them. These ATMs will be located in public places, such as at malls. They can be used to encourage kids to save money.
Role
Analysis
Problem Identification
Ideation
Wire-framing
User flow
Usability testing
Prototyping
UI Design
Illustration
Tools
Figma
Procreate
Adobe Rush
Platforms
ATM Kiosk
Design Process
User centred design approach has been used in order to create the best possible experience for the kids using the ATM kiosks.
Understanding
User experience
Research started with understanding the Savings account ecosystem in order to understand the services the kids have control over and kids' development in the targeted age group based on the bank savings account plans in order to list down the tasks that needed to be focused on.
Bank ecosystem
Kids: They have partial control where they can withdraw and deposit cash along with checking current balance etc.
Guardians: They have full control over the account in case of withdrawals, deposits, PIN change, Balance checking, etc
-
Children’s Savings account: In India kids cannot have individual savings accounts but are shared with the guardians.
-
Notifications regarding the account are sent to the registered mobile number, and official matters need to have parental approval.
-
Kids are encouraged to save and decide how they use their money along with how to manage money when it comes to pocket money and weekly expenses.
Kids Development
-
After the age of 10 kids usually develop the Logical way of Thinking and also have a good basic understanding of money and how it works. They start understanding that some items have more worth than others.
-
They are capable of learning about savings accounts and their importance and how it can impact their lives.
-
Kids in this age category can start joint savings accounts with their parents or guardians, and also start planning some expenses like buying gifts or treats for themselves family or friends from their own pocket money or savings.
-
This also helps the pre-teen and early teens to develop the confidence they need to make informed choices regarding financial decisions.
Logical learning and Intelligence
Kids this age group show rapid logical and mental growth. They are high function in math skills and have a good understanding of calculations and savings.
Social Development
They start considering themselves adults and start taking more and more responsibilities in their life. They like making their own decisions in regard to their everyday life.
Notion of Money
They already understand that saving money can buy them the extra something they need, so they can spend it on leisure activities or developing their hobbies and exploring interests. They understand money is valuable and should be used carefully.
Observation Study
Direct user research was conducted through observing kids use ATMs followed by a short interview. During the usability study the kids were asked to perform 3 Tasks-
-
Withdrawal of Cash
-
Deposit of Cash
-
Checking account balance
Insights from observation study
-
Not able to understand some of the complicated steps. For example one of the kids found it hard to choose from the multiple choices available on the screen since they found most of the similar.
-
Took a lot of time making each choices, they took their time to read the whole thing before making the choices,
-
Were disappointed when they didn’t get to see the balance before withdrawing money since they didn’t know if they had that much amount of money in the account.
-
Impatient in removing the card when the transaction was still going on. And found it hard to place the money in the deposit holder.
-
Didn’t have much difficulty remembering the pincode.
-
Some ATMs don’t show the deposited amount or rupee notes right away making them agitated about the same.
Specify user needs
Based on the insights from usability tests user needs were specified starting with creating user persona, user journey mapping and finalizing user needs.
Persona
Persona is based on the observation study and user interviews that were done.
Alicia 13yo
7th grade Student Bangalore
Bio
Alicia is very much interested in Art and crafts and saves all the money she has in her piggy bank in order to buy her art supplies. But sometimes she has trouble keeping track of the amount of money she has and spent. She is not completely comfortable to either carry all the money in her pockets or leave it in the piggy bank. So she asks the dad for help regarding the same. So they decide to start a joint bank account for the same so she can keep the money safe and withdraw as required
Pain points
-
Having trouble navigating the user interface due to the text heavy interface.
-
Not able to check balance before withdrawing money.
Goals
-
Being able to save and spend on quality supplies rather than cheap ones.
-
Having better independence
-
Learn to manage her spending without parental dependence.
User journey mapping
User: Alicia
Scenario: Alicia has decided to buy a new medium of paint to improve her skills. She decided to visit the craft store in the mall nearby her house, but she needs to withdraw money before going there to buy the paint.
Expectations:
-
Ability to easily perform the task
-
Make informed decisions
-
Buy the required art supplies.
Observation
Seeking help:
Kids tend to look for the guardians help whenever they have doubts.
Growing confidence:
After a couple of times of operating the ATM they became more confident in using it, even if they turn to a guardian once in a while.
Questioning:
Sometimes they tend to question why something is present or not, so they can understand the process rather than just blindly following what they are told to do so.
Pain points
No help:
If the guardian is not present they have no one to turn to for help, or are required to ask strangers in order to finish the transaction. This made them agitated.
Error prevention:
There was no indication on why something is wrong rather ATM screens just inform them something is wrong, so this confuses them.
Flexibility:
They don't have the option of accessing multiple services in single authentication, which frustrates them.
Inference
Error prevention is mandatory:
Showing error messages and why it has occurred is also important in order for them to rectify it and also guide them through the process.
Flexibility is the key:
Flexibility to change actions after authentication can be given in Kids accounts to make it easier for them to navigate as opposed to rigid structure of the adult's ATM transaction process to ease them into the process slowly.
Guidance:
Kids should be able to access guidance easily if required rather than looking to guardians or strangers for the same.
Design ideation
Based on the inference from the user studies, I came up with three concepts.
CONCEPT 1
Keeping the flow as minimal as possible
Reduce the number of steps and make it clear thestep they are in so that it reduces the stress in the kids.
This way they will know which step they are in and can also easily anticipate and learn the process quickly in order to finish the task.
CONCEPT 2
Make the interface more clickable and pattern oriented
Remove the necessity to type in the kids interface and increase clickable components for easy selection and completion of the task. This way kids can make the choice easier and also faster and efficient completion of the tasks. Also show the progress they have made in the past few weeks to encourage them in saving more.
.png)
CONCEPT 3
Integrate voice assistant and face ID
Face ID and Voice assistant integrated screens that would just move across the transactions in a flow like a conversation.
Evaluate solutions
Usability testing was conducted with the same kids who I had interacted with during the user research. The main reason to involve the same set of people is to understand how their previous experience was compared to the new improved experience that is being designed.
Phase 1: The testing was conducted remotely using paper prototypes and asked the kids to go through the tasks of withdrawing, depositing and checking balance.
Phase 2: Figma prototypes were made, and the interaction between kids and the prototype was recorded to understand the pros and cons of each design.
Digital Prototypes
Digital Prototypes
ATM password: 1234
Withdraw amount: ₹150
Prototype 1
Prototype 2
Results
CONCEPT 1
Keeping the flow as minimal as possible
Pros:
-
Reduced number of steps taken to complete the task.
-
Easy understanding of which step they are in to complete the task.
-
Easy understanding of the interface and steps.
Cons:
-
Remembering PIN might be a challenge.
-
Does Not show progress.
CONCEPT 2
Make the interface more clickable and pattern oriented
Pros:
Pattern is easier to remember since it’s regularly used in mobile phones.
Only having to select the amount was easier for the younger kids
Showing progress keeps them motivated
Cons:
Only having to select from the given denominations during the process was frustrating for the older kid.
CONCEPT 3
Integrate voice assistant and face ID
Pros:
Reduced number of steps taken to complete the task.
Easy understanding of which step they are in to complete the task.
Easy interaction with the system
Cons:
Speaking out instructions in Indian situations where people enter ATM’s or in case it is placed in open areas will be hard.
Final solutions
Rather than choosing 1 best design that satisfies users from the 3 options, I instead decided to use the functions that satisfy the user needs best from each option and create a design with integrating those functions to create the best possible solution for the users in the present context.
User flow
Lo-fi screens
Introducing Dibs
Authenticate
Even though patterns are easy to remember, PIN login is given so that kids can get used to the normal process slowly.
Select service
Only the services related to the kids accounts are given to make the process easy for them.
Tutorials
Small animated tutorials are given on every page incase kids have doubts in between.
Cash withdrawal
The amount already in the account is indicated so the Kids can withdraw accordingly, this helps them make an informed decision.
Cash deposit
Clear indication on amount inserted, the number and designations of rupee notes are mentioned so they don’t get agitated about the money inserted.
Current balance
Current balance is shown along with the last few transactions so they don’t get confused about why it is higher or lower than they expected.
Finish transaction
This screen indicates the current progress in the present transaction along with a little encouraging message for them so save more.
Thank you screen
Thank you screen indicates the end of transaction and reminds them not to forget their ATM card after the successful transaction.
Scenario 1
​Alicia is visiting to withdraw money from the ATM located in the mall near her home, so she can pay for her art classes. This is the first time she is going to be doing it by herself, since her parents always accompanied her and guided her whenever she had trouble.
Scene 1
During the authentication she suddenly has a doubt on how it works and decides to check the tutorial.
Scene 2
She continues to finish the withdrawal after that.
Scenario 2
Alicia has recently received spending money from her parents and also from her grandmother when she visited, since she has more than necessary she decides to deposit it in her account for later use, along with that she also wishes to check her recent transactions to be informed of her spendings.
Scene 1
She first decides to check her transactions for tracking.
Scene 2
Followed by that she decides to deposit her money in the bank. Since the rupee notes inserted and the amount entered is clearly indicated she has little trouble in the process.
Clear error messages and assistive texts are given for the sake of kids.
Easy transitions after finishing one part of a transaction want to perform another function, so that kids don’t have to enter PINs again and again.
Kids also have the control to cancel a transaction at any point of it, in case they get doubtful.
Try it yourself
ATM Screens prototype
ATM PIN: 1234
Withdraw amount: 450
Deposit amount: 650