Design Procces

The WCAG 2.1 guidelines were reviewed, focusing on the "Perceivable" section, and the most relevant directives for elderly users were selected. A linear flow with clear visual, auditory, and cognitive feedback was designed.

Wireframes (flow summary)

Welcome: Large «Enter» button. Sound and help icon.
PIN entry: Large keypad. «Cancel» and «Enter» buttons.
PIN error: Message in red. «Try Again» button.
Main actions: «Withdraw Cash» and «Check Balance». «Close» button.
Enter amount: Large keypad. «Cancel» and «Enter» buttons.
Confirmation amount: Displays the amount. «Confirm» button.
Transaction successful: Clear message. «Yes» and «No» buttons.
Session ended: Final message. Prompts to remove the card.

WCAG application

High contrast: High contrast on buttons and messages.
Large icons: Large and meaningful icons.
Audio alternatives: Audio alternatives on all screens.
Perceivable errors: Clearly perceivable errors.
Critical confirmation: Confirmation of critical actions.
Clear closure: Clear session ending.
Linear flow: Linear and understandable flow. 

A bank ATM exit interface with 'InternationaL BanK' text in the upper right and a blue speaker icon centered at the top. The center features three lines of text: 'Thank you. Your session has ended.', 'Please take your card', and 'Have a nice day!'. A help icon is located in the bottom left corner.
A bank ATM interface for PIN entry with 'InternationaL BanK' text in the upper right. At the top left, there is a 'Return' button with a left arrow, and a blue speaker icon is centered at the top. The main section displays a 'Pin Entry' header above an input box showing five dashed lines. Below this is a light purple numeric keypad (1-9, and 0 spaced out at the bottom) with a hand icon pointing toward it. At the very bottom, there is a red 'Cancel' button and a green 'Enter' button, with a help icon in the bottom left corner.
A bank ATM main menu interface with 'InternationaL BanK' text in the upper right. At the top left, there is a red 'Close' button, and a blue speaker icon is centered at the top. The middle section offers two choices: an icon of an ATM slot dispensing cash above a blue 'Withdraw Cash' button, and an icon of a bank card with a magnifying glass above a blue 'Check Balance' button. A help icon is in the bottom left, and an 'Advanced Options' button with a right arrow is in the bottom right.
A bank ATM interface for entering a withdrawal amount with 'InternationaL BanK' text in the upper right. At the top left, there is a 'Return' button with a left arrow, and a blue speaker icon is centered at the top. The main section displays an 'Enter Amount' header above an empty input box. Below this is a light purple numeric keypad (1-9, a 0 button on the bottom left, and a backspace icon button on the bottom right). At the very bottom, there is a red 'Cancel' button and a green 'Enter' button, with a help icon in the bottom left corner."
A bank ATM confirmation interface with 'InternationaL BanK' text in the upper right. At the top left, there is a 'Return' button with a left arrow, and a blue speaker icon is centered at the top. The middle section displays the text 'Amount: 2.000 $' above the question 'Is this amount correct?'. Below the text, there is a red 'Cancel' button on the left and a green 'Confirm' button on the right, with a help icon located in the bottom left corner.
ATM Cash Withdrawal User Flow

Result

The ATM allows Sergio to perform operations safely, quickly, and autonomously. The interface reduces cognitive load, prevents errors, and offers clear feedback at every step. Conclusion
This project demonstrates how visual and auditory accessibility can transform an everyday experience into an inclusive interaction. Designing for human diversity not only improves the lives of people like Sergio; it also creates more robust, secure, and universal products.

User

Sergio is 82 years old. He never learned to read, his vision is reduced, and his hearing has declined with age. Even so, he manages his own money and visits the ATM weekly. Current interfaces cause him confusion, fear of making mistakes, and dependency on third parties.

Problem

Traditional ATMs rely heavily on text, small icons, and weak sounds. For Sergio, this means: Reading difficulties: Struggle to read instructions. Small numbers: Problems seeing small numbers. Weak sounds: Not perceiving high-pitched tones. Confusing steps: Confusion during the process steps. Insecure endings: Insecurity when finishing the operation.

Design objetive

To create a perceivable, understandable, and secure ATM that works even when visual and auditory channels are weak or ineffective. Design process
The WCAG 2.1 guidelines were reviewed, focusing on the "Perceivable" section, and the most relevant directives for elderly users were selected. A linear flow with clear visual, auditory, and cognitive feedback was designed.

Return
Scroll al inicio