Menu

Resume

Introduction

Context

Our Goal

User Research

HMW Statement

Design

Usability Test

Implementation

Outcomes

Reflection

VTM Aging-friendly Design

VTM Aging-friendly Design

VTM Aging-friendly Design

Fintech

Fintech

UX Design

Inclusive Design

Design System

User Research

Touch Interface

User Research

Touch Interface

Summary: I created a new design system and implemented it on the Aging-friendly Comfort Mode of the remote video teller machine (VTM) platform, enhancing its accessibility. Since launch, the platform has supported over one million transactions, serving an average of 100,000 older adults each month. The marked improvement in user satisfaction as a result of this initiative encouraged us to file a patent for the unique design methodology.

Summary: I created a new design system and implemented it on the Aging-friendly Comfort Mode of the remote video teller machine (VTM) platform, enhancing its accessibility. Since launch, the platform has supported over one million transactions, serving an average of 100,000 older adults each month. The marked improvement in user satisfaction as a result of this initiative encouraged us to file a patent for the unique design methodology.

Fintech, UX Design, Inclusive Design, Design system, User Research, Touch Interface

What is VTM?

What is VTM?

VTM, or remote video teller machines, are extensively available across various branch locations of Banks. These innovative machines enable customers to perform a range of banking transactions, such as balance inquiries, deposits, or the issuance of bank cards.

Context

Context

  • The prior VTM system designs lacked inclusive design considerations

  • Project timeline: 6/2022 - 10/2022

  • Stakeholders: 2 Product managers, 2 UX designers, 3 tech-teams, Customers, Users

  • Tools: Sketch, Figma, Principle, ProtoPie

  • My role: UX UI lead designer, UX co-researcher

✅ Our Goal

✅ Our Goal

  • Design an aging-friendly and inclusive version – Comfort Mode

  • Design a comprehensive design system specifically for elderly users and implement it to the new Comfort Mode.

  • Ensure accessibility while maintaining brand identity, aligning the design with WCAG AA/AAA standards.

  • Work with testing teams to iterate and refine the designs.

  • Collaborate with business managers and product managers to integrate Comfort Mode into the entire VTM service journey

  • As a UX UI lead designer, one of my extra goals is to foster greater collaboration between the business and tech departments,

Initial Analysis

Problems of Current Homepage

Problems of Current Homepage

  • Accessibility Limitations: Insufficient color contrast on certain UOS platforms affects readability, particularly for users with visual impairments.

  • Usability Barriers: Complex textual instructions and limited system feedback create friction in navigation, making interactions less intuitive.

  • High Dependency on Staff Assistance: Many users, especially elderly customers, struggle with small font size and unclear interface elements, leading to increased reliance on frontline staff for support.

User Research

User Research

Middle-aged and elderly users make up 70-80% of the VTM system's audience, with their primary needs including account management, financial transactions...

Due to the extensive scope of the business involved, it is not feasible to complete the design overhaul at one time. Therefore, it will be carried out in four phases, starting with a redesign of the homepage.

* We conducted comprehensive user research—consisting of 221 questionnaire survey responses, interviews with 8 lobby managers, and contextual inquiries with 15 users.

Users' main Pain Points

Users' main Pain Points

According to user research results, we identified the following key user pain points:

HMW Problem Statement

HMW Problem Statement

How might we redesign the user interface to enhance readability and ease of interaction for elderly users, ensuring they feel confident and engaged when using the system? 

How might we redesign the user interface to enhance readability and ease of interaction for elderly users, ensuring they feel confident and engaged when using the system? 

Brainstorm Solutions

Design

Design

Visual & Accessibility

Visual & Accessibility

  • Implemented increased color contrast and enlarged fonts to enhance accessibility for elderly users.

  • Designed skeuomorphic icons to improve visual recognition and usability.

  • Integrated a screen reader function for better navigational support.

Interaction & Service Flow

Interaction & Service Flow

  • Redesigned interaction flows to simplify use for elderly users.

  • Strengthened the Remote Customer Service Assistance function.

System-Level Design Work

System-Level Design Work

  • Conducted research on age-friendly design guidelines.

  • Created a new Design System tailored for the elderly.

  • Seamlessly integrated Comfort Mode into the full service journey to ensure end-to-end accessibility.

Tailored Design System & Design Guidelines

Tailored Design System & Design Guidelines

I created both the original (regular) and Comfort Mode design systems, enhancing color contrast, font size, and UI components in the latter to meet WCAG AA/AAA accessibility standards.

I created both the original (regular) and Comfort Mode design systems, enhancing color contrast, font size, and UI components in the latter to meet WCAG AA/AAA accessibility standards.

Typography - Enlarged Fonts

Meets WCAG 2.1 AA/AAA standards

Regular Mode Color System

Enhanced Color Contrast for Comfort Mode

Regular Mode Buttons

Comfort Mode Buttons (Larger & More Legible)

Input Field

Replace Linear Icons to Skeuomorphic Icons

Replace Linear Icons to Skeuomorphic Icons

We replaced the linear icons from the standard version with skeuomorphic ones. According to some secondary research, skeuomorphic icons are easier for older adults to comprehend and recognize compared to flat designs.

We replaced the linear icons from the standard version with skeuomorphic ones. According to some s have shown that skeuomorphic icons are easier for older adults to comprehend and recognize compared to flat designs.

Regular Mode V.S. Comfort Mode

  • Simplified the homepage by reducing business sections from 8 to 6, based on previous survey results.

  • Removed advertisements to reduce distraction and cognitive load.

Regular Mode Homepage

Regular Mode Homepage

Comfort Mode Homepage

Comfort Mode Homepage

Regular Mode V.S. Comfort Mode

  • Rephrased complex financial terms using plain language, such as renaming “Account Overview” to “My Account”.

  • Upgraded text buttons to more visually intuitive styles to improve accessibility.

Regular Mode Homepage

Regular Mode Homepage

Comfort Mode Homepage

Comfort Mode Homepage

Regular Mode V.S. Comfort Mode

  • Non-critical but required compliance information is hidden by default and revealed only when needed via a tap-triggered pop-up.

  • Added a "Regular Mode" toggle button for easy switch back to the standard interface

  • Used the term “Comfort Mode” to respectfully refer to designs tailored for older adults, avoiding age-sensitive language like “old” or “senior”.

Regular Mode Homepage

Comfort Mode Homepage

Add Screen Reader Function

Add Screen Reader Function

To reduce the visual burden on the elderly and to care for people with visual impairment, we have added a screen reader function to some important business screens.

Transfer - Confirmation

Transfer - Confirmation

Add more Entry Points for Remote Customer Service Assistance

Add more Entry Points for Remote Customer Service Assistance

Apply for a Bank Card - Select a Card

Tailored Interaction Design Approach for the elderly

Tailored Interaction Design Approach for the elderly

Two-Step Font Adjustment

Follows standard mobile banking interface logic

One-Tap Font Adjustment

Instant feedback and easier interaction for seniors

Two-Step Verification Process in Regular Mode

Dropdown selection required before sending verification code.

One-Tap Streamlined Flow in Comfort Mode

Verification method embedded in the interface for direct access, reducing interaction complexity.

Usability Testing Reveals & Iterative Designs

Usability Testing Reveals & Iterative Designs

Usability Testing Reveals & Iterative Designs

Three Rounds of Usability Testing

Issue 1

The Comfort Mode entrance is not obvious and can be easily overlooked.

Prior Homepage - Regular Mode

Solution and Improvements

  • Once elderly customers aged 65 and over successfully log in, the system will automatically switch to the Comfort Mode interface.

  • Integrate the Comfort Mode recommendation text bubble into the Regular mode.

Revised Homepage - Regular Mode

Issue 1

The Comfort Mode entrance is not obvious and can be easily overlooked.

Solution and Improvements

  • Once elderly customers aged 65 and over successfully log in, the system will automatically switch to the Comfort Mode interface.

  • Integrate the Comfort Mode recommendation text bubble into the Regular mode.

Prior Homepage - Regular Mode

After Revision - Add Feedback Motion Design

Issue 2

The interactive feedback provided when users switch from "Standard Mode" to "Comfort Mode" is not adequately distinct, leading to confusion about which mode they are currently in

Solution and Improvements

We decided to integrate more pronounced motion design elements to better highlight this change by providing clearer visual cues - Add Motion Design Elements on popups to provide clear feedback

Issue 2

The interactive feedback provided when users switch from "Standard Mode" to "Comfort Mode" is not adequately distinct, leading to confusion about which mode they are currently in

Solution and Improvements

We decided to integrate more pronounced motion design elements to better highlight this change by providing clearer visual cues - Add Motion Design Elements on popups to provide clear feedback

Three Rounds of Usability Testing

Seamless Implementation of Comfort Mode Throughout the VTM Service Journey

Seamless Implementation of Comfort Mode Throughout the VTM Service Journey

Seamless Implementation of Comfort Mode Throughout the VTM Service Journey

Collaborate with business managers and product managers to ensure a cohesive and user-centered end-to-end experience that enhances accessibility and usability for elderly customers.

Collaborate with business managers and product managers to ensure a cohesive and user-centered end-to-end experience that enhances accessibility and usability for elderly customers.

VTM Service Journey

Outcomes

Outcomes

Since it launched...

Improved Onboarding Process

35%

35%

Increase in User Retention

100,000

100,000

The Comfort Mode has been implemented across our network, covering branches totaling

1,700+

1,700+

Significantly enhanced customer satisfaction, which led our team to file a related patent application

Recently, staff at SPD Bank branches have observed a shift in elderly customers' attitudes towards using remote intelligent banking (VTM) and mobile banking. Whereas a few years ago, elderly customers often complained that electronic channels were cold, functionally complex, and involved too many steps, now they find these services convenient and faster, with no need to wait in line.

Recently, staff at SPD Bank branches have observed a shift in elderly customers' attitudes towards using remote intelligent banking (VTM) and mobile banking. Whereas a few years ago, elderly customers often complained that electronic channels were cold, functionally complex, and involved too many steps, now they find these services convenient and faster, with no need to wait in line.

Follow-up User Interviews

Reflection

Reflection

Early Dev Involvement & Tailored Interaction design

With limited project time, it is critical to involve the tech team early in the design cycle. This allows for synchronized development of the underlying front-end component libraries, increasing overall project efficiency and reducing costs associated with tests and reviews.

It is easy to default to established interaction patterns in design in order to maintain the original information architecture and reduce cognitive load. However, what works in our mobile banking application or VTM regular mode may not be suitable for the VTM comfort mode designed for older users, even though they are both designed as touch interfaces.

Early Dev Involvement & Tailored Interaction design

With limited project time, it is critical to involve the development team early in the design cycle. This allows for synchronized development of the underlying front-end component libraries, increasing overall project efficiency and reducing costs associated with tests and reviews.

It is easy to default to established interaction patterns in design in order to maintain the original information architecture and reduce cognitive load. However, what works in our mobile banking application or VTM regular mode may not be suitable for the VTM comfort mode designed for older users, even though they are both designed as touch interfaces.

I cannot showcase most of the project in detail because of confidentiality. Contact me if you want to learn more.