UX Researcher
Redesigning the ATM Landscape (Part 2)
Rapid UI building
A UI kit was created to ensure consistency across the UI - text and colour styles were created along with component symbols. Templates were also created of every layout variation. This allowed for rapid UI building.
A user pain was not knowing if a device had a certain cash amount or if deposits were available (canisters can get full at the end of the month leaving the device out of service). Previously you'd only find out once you’ve started a transaction. Displaying this information up-front avoided users having to join the queue again to use another device.
Know device cash note status at a glance
Faster visual flow
Layout templates were created around button hotspots. The bottom buttons were the most accessible from the keypad. Most commonly selected or proceeding buttons were placed on the right. Secondary or back navigation placed on the left. Buttons were stacked on the right to encourage faster scanning with the proceeding buttons.
Most-used features brought up a level
Fullscreen button layouts followed a different pattern. The ‘CTA’ that related to the title are primary buttons and alternatives not relating to the title would be secondary buttons. ‘View balance’ was brought-up a level as a lot of users would check this before a withdrawal.
Easy to understand copy
A contextual header was used above the title for screens after the transaction menu that acted as a breadcrumb. Active words were used in headers to help guide users (e.g. Choose/Enter/Confirm). Simple English was used button terminology for clarity (e.g. ‘View recent transactions’ vs ‘Print mini statement’).
Contextual help available when needed
Extra information needed to make a decision was displayed to help guide users (e.g. Notes available). On input screens, the keypad 'help text' was displayed and are colour coded to the actual keypad for better relation of onscreen to physical.
Apply for a personal loan on an ATM
The backend upgrades created an opportunity for the ATMs to connect to a web-server and consume APIs. This allows a new unique offering to the previous ‘cash and dash’ device.
Adjusting web components for the ATM
The personal loan flow was consumed from an existing web application, however not all the components translated well on the ATM. Non-depositor devices did not have a keyboard for an email address input, so to solve, an API pulled and displayed it. Tooltips don't work for a non-touchscreen, and was solved by adding a ‘See definitions’ button.
Solving for slow connectivity
Due to the devices being slow, dynamic calls couldn't be made with the API. This was solved by having the client choose their loan amount first, then displaying their monthly instalments by their corresponding terms. This worked out great as an affordability tool for the client.
Scrolling for non-touchscreen
Another challenge was displaying the terms and conditions on-screen. Small scroll buttons that lined-up to the physical buttons were added, this avoided the problem of either printing out the T&Cs or displaying pages of them.
