The prior VTM system designs lacked inclusive design considerations
Project timeline: 6/2022 - 10/2022
Stakeholders: Business Department, Technology Department, Customers, Users
Tools: Sketch, Figma, Principle, ProtoPie
✅ Our Goal
Design an aging-friendly and inclusive version – Comfort Mode
Design a comprehensive design system specifically for elderly users and apply 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
UX UI lead designer, UX co-researcher
As the lead UI/UX designer for the VTM system's B2C version, I am part of the technology department, serving the product managers from business department. The VTM system's B2C edition is a key project within the company that our UI/UX team in the technology department took over from the business department.
The product managers have specified the need for a comprehensive overhaul of the VTM system's UI/UX, focusing on minimal yet crucial modifications to the existing Information Architecture in order to control the amount of development. Additionally, the task involves formulating complete design system and working closely with developers to integrate these designs into a front-end component library.
Additionally, as Xi'an UX UI lead designer, one of my extra goals is to foster greater collaboration between the business and technology departments, thereby increasing the UX UI team's involvement and influence throughout the entire project lifecycle.
The middle-aged and elderly people are the primary audience for the VTM system accounting for 70%~80%. The most common service elderly people use on VTM are applying for a bank card, business signing, modifying personal information, viewing the account, transferring money, searching details, financial products, and deposit products.
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.
Limited accessibility, such as inadequate color contrast poses challenges on certain UOS platforms.
Fraught with operational challenges, such as intricate textual directions and limited feedback from Interactions.
VTM Machine
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
Conducted thorough research on age-friendly design guidelines and tailored a new Design System specifically for Comfort Mode.
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.
Strengthened the Remote Customer Service Assistance function for easier user interaction.
Redesigned interaction flows to simplify and improve the overall user experience for elderly users.
Seamlessly integrated Comfort Mode into the entire VTM service journey, ensuring a cohesive and user-centered end-to-end experience that enhances accessibility and usability for elderly customers.
Tailored Design System & Design Guidelines
Implemented increased color contrast, enlarged fonts and design elements to comply with WCAG AA/AAA.
Design System & Design Guidelines
Replace Linear Icons to Skeuomorphic Icons
We replaced the linear icons from the standard version with skeuomorphic ones. Some studies have shown that skeuomorphic icons are easier for older adults to comprehend and recognize compared to flat designs.
Regular Mode V.S. Comfort Mode
Retain core business in homepage functionalities for the elderly based on the previous survey results
Elimination of advertising to minimize disruption to older persons
Prior Homepage - Regular Mode
Prior Homepage - Regular Mode
Regular Mode V.S. Comfort Mode
Simplify professional jargon to more elderly understandable language
Replace text buttons with more intuitively designed button styles
Prior Homepage - Regular Mode
Prior Homepage - Regular Mode
Regular Mode V.S. Comfort Mode
Hide less frequently used features, such as compliance language, and make them accessible through a pop-up window triggered by user tap
Add the “Regular Mode” switch button to provide the entry back to the prior regular mode
Prior Homepage - Regular Mode
Prior Homepage - Regular Mode
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 of our business screens.
Bank Transfer - Confirmation
Add more Entry Points for Remote Customer Service Assistance Function
We have added more entry points for remote customer service assistance to reduce seniors' cognitive burden and assist them in operating VTM machines for business.
Bank Transfer - Confirmation
Tailored Interaction Design Approach
Tailored approach to interaction design for elderly customers.
Follow the interactive mode of mobile banking App
Adjusted Interaction Mode - Reduced interaction steps
Redesigned the process for sending the verification code to minimize the interactive steps.
Send Verification Code Process in the regular mode
Adjusted Interaction Mode - Reduced interaction steps
Problem 1
The Comfort Mode entrance is not obvious and can be easily overlooked.
Prior Homepage - Regular Mode
After Modification
Once elderly customers aged 65 and over successfully log in at the SPD Bank's VTM, the system will automatically switch to the Comfort Mode interface and workflow.
Meanwhile, integrate the Comfort Mode recommendation text bubble into the Regular mode for a smoother user experience.
Prior Homepage - Regular Mode
Problem 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
Prior Homepage - Regular Mode
After Modification
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
Prior Homepage - Regular Mode
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
Since it launched...
The total number of transactions has exceeded
1,000,000
The average monthly service for elderly customers has reached
100,000
The Comfort Mode of the VTM system has been implemented across our network, covering branches totaling
1,700+
Follow-up user interviews
