Touch Screen ATM

Product Design • Front-End Development • University Project

The challenge

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.

Timeline

Sep 2017, 1 month

Role

Research, wireframing, visual design, UI design, front-end development

Module

User Interface Programming & Graphics

Tools

Visual Studio, Adobe Illustrator, Adobe Photoshop

Languages

Material Design Lite, CSS, HTML, JavaScript

Research

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:

Inaccessibility: Buttons lack sufficient contrast either having no background color or button text is too light/unclear.
Difficult navigation: Users are unable to go back a step in case they make a mistake. Instead users have to cancel the transaction and start over the entire process.
Distracting ads: Overly prominent ads distract users from primary tasks at hand. Most users will stop to understand what the content is and only move on after understanding that the content is an ad. This increases the time taken to complete a transaction which in turn will increase ATM queue.

User Flow

Project highlights

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.

Basic PIN validation is carried out using JavaScript to check whether PIN field is empty, corect or invalid.

A maximum of three attempts is provided to users in order to ensure security.

Project highlights

Main Menu

All the different services offered by the bank are presented in this page:

Withdraw
Deposit
Transfer
Balance Enquiry
Change PIN

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.

Project highlights

Withdraw

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.

Project highlights

Deposit

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.

Project highlights

Transfer

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.