case

A Unified Story

At the start, we tried to coordinate our design with the design system of the Clearway bank application so that the client could feel the kinship between the products and see familiar entities. This applies to colors, typography, and shapes. 

The unified story was continued at the visual level—they suggested using seamless animations. They stretch and narrow, so you can trace the script from the starting point. The user understands where he started the current path from, and all the elements on the screen are the same. 

We have applied shapeshifting animations on all the main branches of the ATM: withdrawal, deposit, payment and other operations.

Optimizing the ATM Experience

To enhance efficiency and reduce wait times, we designed an intuitive interface that streamlines user scenarios and prevents queues at ATMs.

Using interactive prototypes in ProtoPie, we tested and refined the experience, eliminating unnecessary steps across key operations. One major improvement was optimizing cash input, allowing users to select denominations directly on the screen. Our custom banknote issuance solution ensures a faster, more user-friendly transaction flow.

Optimizing Cash Withdrawal with “Clicking” Bills

To streamline the user journey, we introduced the “clicking” of bills feature. This allows users to manually select the exact denominations they want to withdraw directly on the screen. Alternatively, they can enter the total amount, and the ATM will automatically calculate the banknote set. If a specific denomination is unavailable, it simply won’t be displayed, ensuring a seamless and frustration-free experience.

Pulse Animations: A Scalable Visual Solution

As part of the visual concept, we developed pulse animations—a dynamic, scalable solution that enhances user interaction. These animations appear when the ATM is waiting for user input, such as inserting a card or withdrawing banknotes, creating an intuitive and responsive experience.

Prototyping for Two Formats: Touch and Button-Based ATMs

We developed an interface for both touch and button-operated ATMs, addressing key differences in user interaction. While the touch version allows flexible placement of clickable elements for intuitive navigation, the button-based version presented unique challenges due to its physical keyboard constraints.

With only eight physical buttons, navigation and operation execution required a strictly structured approach to ensure a seamless experience. This adaptation ensures both versions provide an intuitive and efficient user flow, regardless of format.

UX Copywriting: Crafting Clear and User-Friendly Texts

We took a deep dive into UX copywriting, carefully refining the text to ensure maximum clarity and ease of understanding. This involved proofreading client-provided content and rewording it for better readability.
 

To enhance the user experience, we eliminated complex phrasing, bureaucratic language, redundancies, and other common mistakes, ensuring that every message is instantly clear at first glance.

Error Handling: Designing for Clarity and Usability

We carefully designed every aspect of error handling, covering intermediate screens, notifications, failure scenarios, and other edge cases. While these situations are rare in the user journey, they must be instantly clear and provide users with precise, actionable feedback when they occur. Our approach ensures a seamless experience, even in unexpected situations.

Quick Balance Check: Instant Access with One Tap

On touchscreen ATMs, users can view their balance from any screen, while button-operated devices display it only on the main screen. To ensure quick and effortless access, we introduced a simple yet effective solution.

We utilized the “*” key on the physical keyboard, allowing users to tap it at any time to instantly display their balance—no extra steps required. A seamless way to keep important information always at hand!

Icons: Crafting a Clear and Cohesive Visual Language

We designed a custom set of icons from scratch, carefully selecting intuitive metaphors to enhance user comprehension. To maintain a consistent visual identity, we based our approach on the iconography from the Clearway bank app, ensuring a seamless connection between digital and ATM experiences.
 

Given the ATM screen’s constraints, we optimized the icons for better readability by making them thicker and more contrasty, ensuring they remain clear and recognizable even at smaller sizes.

Optimal Screen Contrast: Balancing Visibility and Brand Identity

ATM screens are designed with a narrow viewing angle, requiring careful adjustments to ensure optimal contrast and readability. Our challenge was twofold: aligning the interface with Rosbank’s design language while also fine-tuning the contrast for real-world usability.

Through trial and error, we found the ideal balance—a design that maintains brand consistency while ensuring users experience the interface with maximum clarity, brightness, and visibility.