| Background |

With market mechanisms maturing and digital media widely used in financial services, traditional ATM usage has significantly declined. This project aims to change users' perception of ATMs by innovating their user experience, thereby increasing usage. We propose integrating ATMs with lifestyle service platforms like ibon, allowing users to perform everyday tasks such as purchasing tickets, making reservations, and making payments on a single machine. Unlike ibon, ATMs can dispense cash and are commonly found in supermarkets. By leveraging these advantages, we aim to transform ATMs into "lifestyle financial stations."
We have designed a new user interface for Cathay ATMs to provide a more convenient and multifunctional experience, hoping to change traditional perceptions and attract more users.

My Role and Responsibilities

I am responsible for designing ATM interfaces and conducting competitive analysis research. I collaborate with planners to strategize and optimize user flows, as well as create wireframes. Additionally, I conduct usability testing and iterate on the product to ensure its ease of use, assisting in the product's launch.

| Research Methods |

Before we start, the product's pain points

Before starting the design process, we distributed a questionnaire to understand users' pain points with Cathay ATMs. In addition to collecting basic demographic information, we explored specific difficulties they encountered during use, mainly focusing on the following two points:

• The operation takes a long time and involves lengthy waiting periods.

• The interface looks outdated and inconsistent.

As shown in the image below, there are seven different ways to display the information on the transaction completion page:

Simultaneously, we conducted data collection on relevant resources both domestically and internationally:

1/ Analyzing Other Domestic Bank ATM Usage

We conduct detailed comparative studies of ATMs from various banks, evaluating aspects such as interface design, functionality options, and ease of operation to understand crucial steps in the market's current state and user requirements. We observe factors like main menu layout, submenu hierarchy, clarity of text prompts, and responsiveness during operations.

2/ Collecting Domestic and International ATM Data

We explore innovative features in ATM designs from leading banks globally, assessing their suitability for integration into our designs. For instance, advanced ATMs may include features like voice commands, automatic identity recognition technology, or other user-friendly smart designs.

3/ Integrating Interface, Assessing Processes

We review the ATM's usage flow, focusing on key functions like withdrawals, deposits, transfers, and balance inquiries. Pain points such as complex procedures, unclear instructions, and long wait times may arise, causing user frustration. Analyzing these issues helps pinpoint areas for improvement and guides the design of a new ATM interface.

| Design Principle |

• Clear Information Display

  To accommodate various user habits, we simplify processes and ensure component design and layout are intuitive and easy to understand, reducing usage and waiting times.

• Visibility and Privacy

  ATMs need high-contrast colors for privacy stickers and to keep critical information centralized on larger screens to maintain focus.

• Brand Continuity

  The design follows the website's color scheme, with transition animations and illustrations to make the waiting experience more engaging.

| Design Output |

Based on our research, we'll showcase the sitemap, wireframes, and designs. Working with the planner, we structured wireframes and designed interfaces. For the first phase launch, key functionalities include withdrawals, transfers, balance inquiries, and other commonly used services at ATMs.

Here is the wireframe we created, illustrated with several key screens.

User Interface Design

We adopt Cathay's corporate identity colors: green, yellow, and orange-red, with #009E49 green as the primary color. Yellow is used to highlight important buttons and transaction prompts on the homepage, while orange-red accents important content or warning messages. In graphic design, we avoid excessive gradients and realistic effects, opting for a flat and simple style to keep users focused on the workflow and primary operations. Icons and graphics are used sparingly for supplementary decoration. Button designs feature rounded corners, which not only appear visually friendly compared to sharp corners but also enhance interface uniqueness and user comfort.

Personalized Information and Privacy Films

To personalize the ATM experience, we initially proposed placing lifestyle sections, monthly finances, and lottery results on the homepage. However, mindful of user privacy concerns, we decided to relocate this information to the lower part of the screen, allowing users to cover it with their bodies during transactions.
‍
During simulated operations, we observed that most ATM screens are equipped with privacy films. This necessitated adjustments in color usage. We opted for brighter colors, increased saturation, and contrast to ensure that even with privacy films, information remains highly legible and recognizable.

Since 19-inch ATMs had not yet been introduced to the Taiwan market at that time, we adopted a spirit of experimentation and innovation. After numerous discussions and research iterations, we ultimately designed three styles and conducted usability testing.

Transition Animations

To alleviate user boredom during wait times, we have incorporated small animations into transition pages. This keeps the interface dynamic rather than static while users wait. These animations not only capture user attention but also enhance visual enjoyment, thereby improving the overall user experience. Here is a demonstration video of the deposit process.

| Usability Testing |

We invited 11 participants to conduct usability testing and interviews. In addition to presenting three visual interface designs for users to choose from, our testing involved tasks such as withdrawals, deposits to the same bank, and deposits to other banks.

Our testing method involved linking design drafts into a prototype and exporting the file as HTML to be placed in the ATM, simulating actual user conditions while recording with a mobile phone. We divided into two groups, each with a facilitator and a recorder (I was responsible for recording). After completing the task tests, we conducted user experience interviews.

Visual Feedback

Participants favored Design B for its alignment with Cathay United Bank's brand, highlighting its clear contrast and color hierarchy. Most preferred Layout C with Design B colors, allowing quick access to the fast withdrawal feature for enhanced operational convenience.

Operational Feedback

The test results from 11 participants indicated no issues with the deposit and withdrawal processes. However, adjustments are needed across various pages; for instance, participants found fonts too small on the subsequent pages of the large screen, some buttons or functions were not prominent enough, and information hierarchy needs further enhancement.

For example, during usability testing, most participants did not notice the card information at the bottom of the homepage. This feature, when clicked, displays account balances and free cross-withdrawal information. Once participants discovered this feature, they greatly appreciated it and suggested enhancing the visibility of the collapsed card information.

During the withdrawal and deposit processes, half of the participants did not notice the step guide in the upper right corner. Those who did notice it felt that the guide was helpful for longer transactions and for older users. Therefore, we decided to remove decorative design elements from the interface and adjust the information hierarchy and the style of the step guide components.

Lifestyle Marketing

To understand user perspectives on integrating lifestyle features into ATMs, we placed ads on the login homepage and transition pages. Most users noticed marketing on the homepage, but during transactions, they focused solely on operations, making homepage ads more effective than transition page ads.

Participants showed varied interest: Five were interested in using ATMs for lifestyle tasks like booking tickets or shopping directly from their accounts. Two expressed concerns about lengthy ATM operations inconveniencing others. Others would consider new features if they offered unique products or discounts in collaboration with ATM providers.

Final Implementation

After multiple discussions and adjustments with Cathay, we changed the circular buttons in our design to square ones, as the client felt square buttons conveyed a greater sense of stability. Additionally, we adjusted the overall interface colors to better align with the client's corporate identity. Although the client ultimately removed the marketing ad space, believing the homepage should be more reserved, we successfully completed the task after several revisions and optimizations. By March of the following year, we successfully launched the 19-inch ATM interface, which is now widespread across Taiwan!

During the transition from a 15-inch to a 19-inch interface, we created a version of the new ATM design for 15-inch screens. This approach ensured design consistency throughout the machine replacement process.

| Feedback & Takeaway |

Learning from the Process

The project schedule was tight, often making me dream of modifying components and pages. We faced many challenges, like subjective design adjustments, but presenting our research and facilitating communication helped us stay on track. Despite the pressure, I gained valuable experience.

This project was incredibly interesting! Opportunities to work on financial products like ATMs are rare. We learned about issues like privacy screens and visual blind spots on large screens. Initially, we thought larger screens would allow more information display, but realized users might still overlook it. Thus, careful interface layout is essential. Observing user interactions during usability testing was fascinating and taught me a lot about necessary design adjustments.

In summary, though stressful, this project was highly rewarding. Seeing our work go to market and receive positive user feedback was an indescribable achievement. The following video showcases the actual ATM process used in the metro station.