This individual assignment was for the module, User Interface Programming & Graphics, during my Bachelors Degree in Computer Science at Taylor's University. The purpose of this assignment was to design and develop a touch screen enabled ATM where users can carry out basic transactions while keeping in mind its broad range of users including the elderly.
The project was required to be developed using Material Design Lite, a framework which I wasn't previously familiar with. Additionally, I did not have any practical experience using an ATM.
Sep 2017, 1 month
Research, wireframing, visual design, UI design, front-end development
User Interface Programming & Graphics
Visual Studio, Adobe Illustrator, Adobe Photoshop
Since I had never used an ATM before and considering the short timeline, I decided to watch YouTube videos to understand the different flows and functionalities of an ATM. I mainly focused on watching videos regrading prominent Malysian banks' ATMs such as Maybank, CIMB and Hong Leong Bank.
During my research, I found some common problem areas:
To enable full touch screen functionality, an on-screen keypad has been added to enable users to enter PIN. In additon, there are buttons to clear input, confirm PIN entry and exit in case user doesn't want to carry out any transaction.
A maximum of three attempts is provided to users in order to ensure security.
All the different services offered by the bank are presented in this page:
There's also and option to exit in case user doesn't want to carry out any transaction. Upon tapping Exit, ATM card will be ejected.
To begin, user has to select account type either Savings or Current they want to withdraw from. Then, user either has to select a pre-defined amount or enter other amount to withdraw.
After transaction is successful, if user taps "No" to performing another transaction, they are prompted to take cash followed by card and receipt.
To begin, user has to select account type either Savings or Current they want to deposit to. Then, user has to place cash into the deposit box. The denomitions allowed for deposit are RM100, RM50, RM20, RM10, RM5 & RM1. Additionally, a maximum of 200 notes are allowed to be deposited.
After notes deposited are processed, a deposit summary is shown and user is give the option to add more cash, if they desire. Once user confirms the deposit amount, the transaction is processed.
If transaction is successful and user taps "No" to performing another transaction, they are prompted to take their card and receipt.
To begin, user has to select account type either Savings or Current. Then, user has to select beneficiary bank.
If user selects other banks, a list of bank codes along with a keypad to enter bank code will be shown. User then has to enter account number they want to transfer to and the transfer amount.
After user confirms beneficiary details, the transaction is processed. If transaction is successful and user taps "No" to performing another transaction, they are prompted to take their card and receipt.