ATM Interface Refinements

wireframes | tech scoping | Diebold ATM units | Design Systems

The situation

Stakeholder feedback highlighted usability issues with the current U.S. Bank ATM interface; issues with functionality, button size, click radius, and an added request to include a contrast feature to the main menu.

A consultation with the stakeholder and developer narrowed down the scope of what we would address in the short term before the next release:

Quick display balances button
High/low contrast button
Hide/Show balance button

My Role

Synthesized feedback from stakeholder
Adhered to ATM Transactional Styleguide while auditing for opportunities to apply the newer, always expanding SHIELD design system styles.
Documented wireframes for handoff to development

Tools

Adobe Illustrator
Jira
InVision
Keynote

refinement #1 Display quick balances

Replaced the arrow icon with a button and expanded click radius.

Refinement #2 ‘HIgh/Low contrast’ button

Terminology & placement

In addition to the button style recommendation and expanding the click radius, the label terms were also explored. Concern that ‘Day/Night mode’ might not translate to the users and that ‘Bright/Dark view’ might imply that the user could control the level of intensity, ‘Dark/Light display’ seemed the most straightforward and simple choice of wording.

Previously, the button lived on the Login screen only. In the future, it would be ideal to include this function in the main menu but due to time constraints and the flexibility of not having to comply with having it sit below the ADA line, the button is currently located in the upper right corner of Main menu.

Refinement #3 ‘Show/Hide balances’ control

ATM users were confused with how to interact with the toggle switch on the machine. .A button with expanded click radius replaced the toggle switch and was the style choice in accordance with the most recently updated SHIELD styleguide.