合作金庫商業銀行 launched a new generation of ATMs with an initial rollout of 166 machines. The redesign introduced 19-inch vertical multi-touch screens, phone-like interactions, and support for services such as cardless transactions and QR-code payments.
I worked on the frontend system used to build the ATM interface. It generated 399 standalone screens across 15-inch and 19-inch machine layouts, with Chinese and English content throughout.
The bank shared more about the rollout in its official announcement.
The challenge
An ATM interface is not one application screen. It contains hundreds of states across withdrawals, deposits, transfers, payments, account selection, warnings, errors, biometric interactions, and QR-code guidance.
The screens needed to stay visually consistent across two machine sizes, support both languages, and run in an IE11-compatible environment.
Building the system
Reusable components
I built the screens with Handlebars templates and 42 reusable interface components, including buttons, inputs, selectors, tables, keyboards, warnings, and animated states.
Shared helpers handled positioning, grouping, SVGs, and data parsing. This kept repeated patterns consistent while still allowing each transaction state to be configured independently.
Supporting two screen sizes
The 15-inch and 19-inch builds shared the same screen naming and transaction-flow structure. Layout-specific templates and styles handled the differences between the two formats.
Reviewing hundreds of screens
Webpack generated one standalone HTML file for each screen. Builds could target the full interface or a single numbered screen group, which made iteration faster.
I also built a review index that organized the interface into 24 categories and 67 transaction flows. It provided live previews, reference images, thumbnails, and missing-screen checks.
Shared interactions
Shared runtime scripts handled transitions, page locking, input behavior, account selection, bank-code selection, and other repeated interactions. GSAP powered the screen transitions and motion.
Result
The final system generated 399 standalone ATM screens while keeping the interface components, interactions, and review process manageable.
The most valuable part of the project was building the tooling around the screens. Without reusable templates, targeted builds, and the review index, maintaining that many transaction states across two layouts would have been much slower and more error-prone.
If I revisited it, I would add visual regression testing and localization validation, then generate both machine-size variants from a shared screen schema.