HSBC ATM Redesign

Designing for ATM's

My End-to-End Experience in ATM User Experience Improvement

One of the most tangible projects in my portfolio involved redesigning the user interfaces for HSBC ATM screens. Unlike purely digital web or mobile experiences, ATMs present unique constraints: physical hardware, diverse user demographics (including elderly or less tech-savvy customers), strict security and compliance requirements, limited screen real estate, and the need for quick, error-resistant interactions in public spaces.

This project allowed me to apply user-centered design principles to a high-frequency touchpoint that millions of customers rely on daily for cash withdrawals, deposits, balance inquiries, and more.

‍

Context & Opportunity

HSBC's existing ATM interfaces had grown outdated, with legacy flows that led to longer transaction times, higher error rates (such as card insertion issues or confusing navigation), and suboptimal accessibility.

  • Customers expected faster, more intuitive experiences similar to modern mobile banking apps, while competing banks and fintech solutions raised the bar for self-service banking.
  • Key challenges included maintaining global brand consistency, adhering to rigorous security standards (e.g., PCI compliance, fraud prevention), supporting multiple languages and accessibility needs (large text, high contrast, screen reader compatibility where applicable), and working within the technical limitations of existing ATM hardware.
  • Common pain points observed included low contrast visuals, unclear error messaging, overly complex menu structures, and friction in multi-step processes like transfers or cheque deposits.

    My Role

    I led the UX/UI redesign from discovery through to implementation support. This involved:

    • Conducting user research (observations, interviews, and usability testing at branches and with diverse participants).
    • Creating journey maps, wireframes, and high-fidelity prototypes tailored to ATM screen resolutions and touch interactions.
    • Collaborating closely with product managers, developers, hardware vendors, compliance teams, and branch staff.
    • Ensuring designs met HSBC brand guidelines, accessibility standards (e.g., WCAG considerations for kiosks), and performance requirements for reliable, secure operation.

    Impact

    The redesigned ATM screens delivered measurable improvements:

    • Reduced average transaction time by streamlining flows and minimizing steps.

    • Lowered error rates and support calls related to ATM usage through clearer instructions, better feedback, and intuitive error recovery.

    • Increased customer satisfaction and self-service adoption, easing pressure on branch tellers.

    • Enhanced security perception and actual fraud resistance via improved authentication cues and session management.

    • Better accessibility for a wider range of users, promoting financial inclusion.

    Key Improvements Delivered

    Key improvements delivered included:

    • Simplified Main Navigation: Reorganized menus into clear, task-based categories with larger touch targets and visual hierarchy (e.g., prominent "Fast Cash" as the primary action).
    • Enhanced Onboarding & Flow Guidance: Progressive disclosure for complex transactions, step indicators, and real-time confirmation screens to reduce abandonment.
    • Improved Accessibility & Visibility: High-contrast modes, larger fonts, iconography with text labels, and multilingual support optimized for quick scanning.
    • Error Handling & Recovery: Contextual, helpful error messages with one-tap resolutions (e.g., "Card not read? Try inserting again" with visuals).
    • Modern Visual Design: Updated to align with HSBC's contemporary digital brand while ensuring readability under various lighting conditions.
    • Security Features: Clearer prompts for PIN entry, contactless options where supported, and session timeout visualizations.

    Project visuals at a glance

    The redesign focused on creating a cleaner, more intuitive interface that prioritizes speed, clarity, and accessibility while staying true to HSBC’s brand. By simplifying complex flows, enhancing visual hierarchy, and incorporating user feedback at every stage, the new ATM screens deliver a noticeably more modern and confident experience for customers of all ages and tech levels.

    [interface] interface of ai tool (for an ai saas company)
    [background image] image of contact office (for a general contractor)
    image of game development process (for a mobile gaming) - conceptualization stage
    image of beer tastings (for a craft brewer)

    COLLEAGUES feedback

    Trusted by HSBC Colleagues

    Richard's depth of experience, product intuition, and unwavering commitment to customer-centric design have shaped some of our most critical digital journeys. From complex onboarding flows to multi-channel servicing experiences, his work consistently demonstrated both strategic thinking and meticulous execution.

    Richard is collaborative, data-informed, and relentlessly focused on delivering experiences that feel simple and empowering to customers. His contributions have had a lasting positive impact on our digital adoption and customer satisfaction metrics.I strongly recommend Richard for any senior UX or product design role—he is an exceptional talent who consistently raises the bar.

    image of historical photos of the preschool
    Robert Schuster
    Head of UX / UI Design for the Americas at HSBC Bank

    Over nearly two decades, Richard played a pivotal role in the evolution of HSBC’s public website experience. His ability to balance brand, customer needs, regulatory constraints, and commercial priorities made him an invaluable partner in some of our most complex and high-visibility initiatives. Whether doing a full redesign, redesigning core product journeys or driving improvements to content structure and navigation, his work consistently elevated the quality and clarity of our digital presence.

    image of community involvement for a furniture store
    Tracy Wong
    Head of Public Website for HSBC Bank Canada

    Richard played a key role in shaping the evolution of our public website into a more personal, relevant and customer-focused experience. His ability to align brand, customer needs, regulatory considerations and commercial goals made them an invaluable partner across our most visible digital initiatives.He worked seamlessly across product, engineering, marketing and compliance teams, helping us move from static information delivery to tailored journeys and more intuitive paths to product discovery.

    community outreach event: educational workshop
    Kerri Dawson
    Head of Digital Channels for HSBC Bank Canada

    Working with Richard made an immediate impact on product quality. He proactively involved QA during design reviews, clarified edge cases, and documented behaviors that used to show up as late-stage defects. Our team felt empowered instead of reactive, and it significantly improved collaboration between QA, design, and development. I can confidently say UX played a major role in reducing defects and making our releases smoother.

    [interface] image of a tablet showing a saas product interface (for an ai saas company)
    Graeme Taylor
    Senior Digital QA & Test Manager

    Across many years and countless digital sales campaigns, Richard proved to be one of our most reliable and insightful UX partners. Beyond exceptional design skills, his breadth of digital knowledge — spanning UX, content, SEO, performance, accessibility and customer behaviour — made him uniquely effective at turning complex propositions into clear, relevant and commercially strong customer journeys.

    image of office environment [interface]
    Naomi Dias-Hawe
    AVP Digital Sales at HSBC Bank Canada

    Richard was a key contributor to HSBC Bank Canada's digital transformation programme. His strong UX expertise helped us redesign and streamline critical customer journeys, especially onboarding and account opening.Richard’s user-centered approach removed major friction points, resulting in smoother, more intuitive experiences, lower drop-off rates, and faster time-to-value for new customers. His collaborative style and focus on measurable impact made him an excellent partner in delivering a world-class digital banking experience.I highly recommend Richard for any UX or digital product role—he consistently puts the customer first and delivers results.

    image of team member explaining a conservation project
    Jun Shen
    Head of Online and Mobile Banking Channels at HSBC Bank Canada
    View on LinkedIn