Hugo Cheung

MENU
CLOSE

ATM Redesign

UX & UI Case Study

Projecs

UX & UI case study

Tools

User Interviews

Google Forms

Figma

Midjourney & ChatGPT

Roles

Project owner

Product designer

 

Year

2025

Projects Timelines

2-4 weeks

Research

Understanding real user challenges and accessibility barriers when using ATMs.

  • Conducted online survey (70+ responses)

  • Performed in-depth user interviews

  • Observed common usability frustrations

  • Identified issues such as confusing menus, small buttons, and language barriers

Outcome: Clear understanding of user pain points and usability challenges.

2-4 weeks

Discovery

Transforming research insights into actionable experience goals.

  • Created user personas representing seniors, immigrants, and everyday users

  • Developed user journey maps to identify emotional and functional pain points

  • Defined usability priorities and accessibility needs

  • Evaluated simplified interaction models through A/B testing insights

Outcome: Insight-driven design direction focused on clarity, confidence, and accessibility.

2-4 weeks

Solution

Designing and refining a modern, accessible ATM experience.

  • Simplified task flows and navigation structure

  • Designed clear UI with larger touch targets and readable typography

  • Introduced multi-language support and universal icons

  • Implemented cardless and mobile-assisted interaction concepts

  • Refined interface through usability validation

Outcome: A clear, accessible ATM interface that improves efficiency, reduces errors, and builds user confidence.

Definition

Withdrawing cash seems simple, but for many people (especially older users), the experience is stressful.
Transactions are often complicated, requiring users to act quickly in a busy environment while also dealing with language barriers, confusing interfaces, and security concerns. Current ATM solutions often lack personalization, convenience, and inclusivity, making it difficult for users to have a smooth and confident experience.

I saw this as not just an ATM problem, but a system problem, I defined the problem as:

How might we reduce stress, mistakes, and security concerns during ATM cash withdrawal—especially for elderly and mobile-savvy users?

This project focuses on key UX decisions rather than full flow documentation.

Turn issues into a story, not a list

For many users, especially seniors, using an ATM feels overwhelming.

Menus are packed with options that compete for attention. Buttons are small and difficult to tap accurately. Screens change too quickly, forcing users to rush decisions they don’t fully understand.

These design choices create anxiety — and in a financial context, anxiety quickly turns into distrust.

In-depth interviews

To gain a deeper understanding of how elderly users interact with ATMs and the challenges they face, I conducted in-person interviews with two older adults. Each interview lasted about 20 minutes and focused on their habits, pain points, and suggestions for improving the ATM experience.

I gathered insights about them.

Too Many Options

Too many buttons on screen cause confusion.

“I might press the wrong one.”

Small Buttons & Touch Issues

Hard to tap small buttons accurately.

“They’re tricky to press.”

Too Fast Transitions

Screens change too quickly to read.“I can’t read everything in time.”

Visual & Text Barriers

Text is hard to read, and privacy feels lacking.

“I want more privacy.”

Unclear Labels

Some words or buttons are hard to understand.

“I’m not sure what they mean.”

Online Survey

The survey on young people and ATMs shows that many still face challenges when using ATM services.

46.8% are most concerned about security, while 35.4% find the menu too complicated.

Received 70 responses in a week*

The problem

Security Concerns
0 %
Complicated Menus
0 %
Language Barriers
0 %
Card Dependency
0 %
Card Dependency
0 %

I realized the ATM should not carry the entire cognitive load.

If part of the decision-making happens on a familiar device — the user’s phone — the ATM interface itself can become simpler, calmer, and easier to use.

The problem

Security Concerns
0 %
Complicated Menus
0 %
Language Barriers
0 %
Card Dependency
0 %
Card Dependency
0 %

Solution

Cardless QR system: Scan a QR code from the app, no physical card needed.

Simplified UI flow: Fewer steps, clear buttons, and progress indicators.

High-contrast design: Larger fonts, clear icons, and multilingual support.

Insight

Through this redesign, I realized the biggest issue wasn’t missing features, it was cognitive overload.

Users didn’t need more options. They needed reassurance, clarity, and time.

The goal became clear: reduce mental effort, increase confidence, and let users feel in control at every step.

User Persona

Based on Potential User Interview*

Maria Dela Cruz (65)
Retired, living in Toronto, Originally from the Philippines

As an independent senior, I want to use the ATM securely and without confusion.

ABOUT

65 years old, Originally from the Philippines, now living in Toronto for a long time. She has moderate experience using ATMs but struggles with new features like cardless withdrawal.

TECH KNOWLEDGE

ATM Use
Mobile Apps
Cardless/Advanced Tech

MOTIVATIONS​

  • Maintain independence by handling personal finances without assistance.
  • Feel secure while using ATMs, especially when entering her PIN.
  • Have a simplified ATM experience that reduces confusion and errors.

PAIN POINTS

  • Withdraw cash securely and easily
  • Perform basic ATM tasks independently
  • Avoid complex steps in transactions

GOALS

  • Withdraw cash securely and easily
  • Perform basic ATM tasks independently
  • Avoid complex steps in transactions

Based on Potential User Story*​

Jason Chan (28)
Junior Software Engineer, living in Vancouver, Originally from Hong Kong

I want a fast and secure ATM experience without relying on a physical card.

ABOUT

28 years old, originally from Hong Kong, now living in Vancouver. Tech-savvy and familiar with mobile banking, Jason often finds ATM interfaces outdated and slow. He prefers modern solutions like cardless withdrawals but feels current ATMs lack speed and personalization.

TECH KNOWLEDGE

ATM Use
Mobile Apps
Cardless/Advanced Tech

MOTIVATIONS​

  • Quick, secure cardless transactions.
  • Prioritize safety, especially in crowded areas.
  • Desire a personalized, easy-to-use ATM experience.

PAIN POINTS

  • Frustrated by slow, cluttered ATM interfaces.

  • Often forgets physical card, dislikes relying on it.

  • Concerned about security risks like skimming.

  • Wants faster, customizable transaction options.

GOALS

  • Fast, efficient ATM transactions.

  • Withdraw cash without a card using secure digital options.

  • Strong security (biometrics, etc.).

  • Simplified, customizable interface for quick access.

User Journey Mapping

Mapping the current (As-Is) ATM journey revealed key pain points, including confusion from too many on-screen options, small and unclear text, and emotional stress caused by time pressure and fear of making mistakes. We then designed an improved (To-Be) journey featuring clearer guided steps, larger accessible buttons, and mobile-assisted cardless withdrawals to create a smoother, safer, and more confident user experience.

Awareness
Preparation
Arrival at ATM
Interaction with ATM
Getting Cash
Reflection
Needs to withdraw money for daily shopping.
Grabs debit card, puts on glasses, and reminds herself of the steps.
Goes to her regular ATM near the grocery store.
Sees many options on screen
Takes the cash, card, and receipt.
Relieved, but wishes the screen was easier to understand.
Wants to be independent, avoid asking family for help.
Mentally rehearses: Insert card → PIN → Withdraw.
Hopes no one is in line behind her to avoid pressure.
Struggles to find “Withdraw” button among too many functions like “Deposit,” “Transfer,” or “Balance.”
Double-checks the amount and confirms.
Thinks the process is too complicated for older users.
Heard from a friend that ATMs are safer now.
Tries not to forget her PIN.
Looks around to make sure it’s safe.
Screen text is small and buttons are close together—hard to read and press accurately.
Machine makes loud beeping sounds while processing.
Feels rushed, even though she wants to take her time.
Thinks using ATM saves time compared to lining up inside the bank.
Doesn’t want to carry too much cash.
Stands at the ATM but hesitates before starting.
Needs to pause and think through each step—worried about pressing the wrong button.
Gets money, but unsure if she took all her items.
Thinks: “It would be easier if the screen guided me one step at a time.”

Research Process

Our survey reveals several key issues that users face with current ATMs, along with suggestions for improvements.

Usability testing

I conducted usability testing with 5 Android users and 5 iOS users (10 participants total) via Skype and Zoom. I also had the opportunity to conduct two Android tests in person. Since I usually test remotely, this in-person testing was a real pleasure 🙂

ATM Authentication with PIN

1/ QR Code

The user generates a QR code in the mobile app and displays it on their phone.

2/ The ATM scans this QR code to begin the transaction.

The user enters this PIN into their app to confirm and complete the transaction.

User Feedback

Some users found it slightly inconvenient to switch between showing the QR code to the ATM and then entering the PIN on their phone, as it added steps to the process.

Users felt reassured by the extra PIN step, which added a sense of security.

Result

✅ 75% felt the process was simpler and more private

✅ 65% said it was easier to understand step by step

⚠️ 60% mentioned that it may not work on all ATMs (older models)

Mobile App Authentication at ATM

1/ The app offers both NFC tap and QR code scan options on the same screen.

2/ Users can choose their preferred method for completing the transaction.

NFC Function

Scan the QR Code Using Mobile

User Feedback

Users liked having multiple options available in one place.

While some initially felt the interface was busy, most adapted easily and appreciated the flexibility.

NFC was seen as modern and quick, especially by users familiar with tap-to-pay features.

Result

✅ 72% liked having both NFC & QR code options

✅ 68% felt it was faster and more modern

✅ 55% said it was easy to adapt to, despite a slightly busy layout

✅ 70% liked that it works with more types of ATMs

Design Concepts

The design and delivery  process focused on creating an inclusive and efficient ATM experience for all users. By analyzing user pain points, the design emphasizes accessibility, safety, and consistency across various ATM systems. Each concept was developed to ensure a smoother interaction and practical delivery in real-life usage.

 

ATM UX&UI Redesign

More Calm and Accessible ATM interface

With part of the process handled on mobile, the ATM interface can focus on clarity instead of complexity.

The redesigned ATM uses fewer options per screen, larger touch targets, and slower, more readable transitions. Each step is clearly labeled, allowing users to confirm actions without feeling rushed.

 

Key UX improvements

  • Larger buttons for better touch accuracy

  • Reduced menu depth to avoid choice overload

  • Clear visual hierarchy and spacing

  • Accessible design for users of different ages and abilities

The ATM becomes a confirmation tool, not a decision-making burden.

Black represents system-level entry points, red highlights primary transaction choices, blue indicates safe interaction steps, and green confirms successful completion.

This hierarchy reduces cognitive load and helps users understand where they are in the process at a glance.

Universal Compatibility

Many older ATMs cannot support NFC or cardless features. By updating the user interface instead of the hardware, users can still enjoy mobile cash withdrawal functions, ensuring compatibility across all machines.

Inclusive & Accessible Design

The interface is designed to be user-friendly for everyone — including seniors and people with visual impairments. Flexible button layouts and touch-screen options improve accessibility and make interactions simple and intuitive.

Quick & Secure Mobile Withdrawal

The mobile cash withdrawal feature allows users to get cash quickly and securely, especially during busy hours. It enhances safety by reducing physical contact and minimizing card-related risks.

ATM Flow​

Black represents system-level entry points, red highlights primary transaction choices, blue indicates safe interaction steps, and green confirms successful completion.

Black represents system-level entry points, red highlights primary transaction choices, blue indicates safe interaction steps, and green confirms successful completion.

This hierarchy reduces cognitive load and helps users understand where they are in the process at a glance.

Mobile Cash Withdrawal

Reducing stress before reaching the ATM

The first part of the solution lives on mobile.

Instead of making all decisions at the ATM, users can prepare their cash withdrawal in advance using a mobile app. The app allows users to select the withdrawal amount and generate a secure QR code.

Why this matters

  • Reduces time pressure at the ATM

  • Removes the need for physical cards

  • Shifts complex steps to a familiar, personal device

By the time users reach the ATM, they already know what to do — increasing confidence and reducing errors.

The new withdrawal flow allows users to initiate and confirm transactions directly from the mobile app, reducing physical interaction and making the process faster and more secure.

The integration supports instant confirmation, seamless authentication, and cash withdrawal without a physical card.

This flow eliminates dependency on debit cards, improves accessibility for users who prefer contactless experiences, and minimizes security risks related to card skimming or PIN theft.

UI Design

I completed high-fidelity desktop and mobile interfaces in Figma that align with the brand’s visual identity and clearly document all interaction states, ensuring a smooth developer handoff.

Mobile Cash Withdraw Flow

To identify the most user-friendly and secure cardless ATM withdrawal experience, I designed a Mobile Cash Withdraw Flow that allows users to withdraw cash easily using their mobile app instead of a physical card.

Or

Users can begin the withdrawal process directly from the Login Page or Home Page.

After logging in, users can select the withdrawal amount and choose the bank account.
They can also decide whether to receive a receipt or keep the transaction paperless.

Once at the ATM, users open the app and prepare to connect.
The app displays a QR code or NFC option for quick interaction.

Users can simply scan the QR code or tap with NFC to confirm the transaction on their phone.
They can then collect their cash securely to complete the process.

ATM Redesign

Cash Withdraw

  • PIN-protected access for secure cardless transactions

  • Quick preset amounts on home screen for faster selection

  • Bill-based amount input (visual dollar system) reduces cognitive load

→ Designed to be secure, fast, and easy to decide

Cash Deposite

  • No PIN required

  • No manual amount entry

  • System auto-detects inserted bills

  • Real-time feedback (accepted / rejected cash)

→ Designed to be fast and frictionless

Cheque Deposite

  • Manual amount input required

  • Added confirmation step for accuracy

  • Clear progress indicator to reduce errors

→ Designed for accuracy and security

Usability Testing

This process identifies pain points, gathers feedback, and ensures the app is intuitive and meets user needs effectively.

Prototype Testing for Mobile Cash Withdrawal

Mission Overview

0 %

Success Rate

0 %

Drop-off

0 %

Mistake Rate

Prototype Testing for Selecting Withdrawal Amount

Mission Overview

0 %

Success Rate

0 %

Drop-off

0 %

Mistake Rate

What I Learn

This project transformed how I see UX design,  I now design not just for screens, but for clarity, safety, confidence, and the emotional comfort that makes someone feel secure simply pressing a button.

For the UI stage, I experimented with using AI tools to generate visual assets and interface concepts, which helped me iterate faster and explore multiple design directions before refining the final system in Figma.

 

Hi, I’m Hoi Kwan Cheung

Product & Visual Designer

Socials

linkedin
Instagram
vsco

© 2025 Hoi Kwan • Built in Wordpress