UX-дизайн банкоматов для парка Росбанка

Главное о кейсе

В результате работы облегчили и сократили путь пользователя — разложили экраны так, чтобы операция проходила в два клика. Учли все тонкости разработки экранов как для сенсорных, так и для кнопочных аппаратов. Протестировали интерфейс с использованием интерактивных прототипов, собранных в Protopie.

––––––
As a result, we made the user's way easier and shorter: we arranged the screens so that the operation could be done in two clicks. We took into account all the peculiarities of the screen's design for both touch and button devices. We tested the interface using interactive prototypes assembled in Protopie.

Бизнес-задача и ее решение

Необходимо было разработать UX-дизайн банкоматов, проработать весь путь пользователя от входа на первый экран до совершения услуги. Спроектировать интерфейс, с которым пользователи не совершают лишние операции у банкомата.

На старте старались согласовать наш дизайн с дизайн-системой приложения Росбанк Онлайн, чтобы клиент чувствовал родство между продуктами и видел знакомые сущности. Это касается цветов, типографики и форм.

Единую историю продолжили и на визуальном уровне — предложили использовать бесшовные анимации. Они растягиваются и сужаются, благодаря этому от начальной точки можно проследить сценарий. Пользователь понимает, откуда он начал текущий путь, а все элементы на экране едины.

Разработали интерфейс, чтобы сократить пользовательский сценарий и не собирать очереди у банкомата длиной в Великую Китайскую стену. Убрали лишние шаги основных веток банкомата и проработали способ ввода купюр, при котором пользователь сам выбирает на экране необходимый номинал, который хочет получить. При этом можно и ввести цифру на экране классическим способом — банкомат сам посчитает набор купюр. Если какая-то купюра недоступна, она не будет отображаться на экране.

Разложили экраны так, чтобы операция проходила в два клика.

На уровне визуальной концепции разработали масштабируемое концептуальное решение: импульсные анимации. Они появляются на экране, когда банкомат ждёт пользовательского действия, например, вставить карту или забрать купюры.

Разработали интерфейс для сенсорных и кнопочных версий аппарата.

Основательно поработали над копирайтингом. Занялись вычиткой входящих текстов от клиента. Переформулировали их таким образом, чтобы они стали максимально понятны пользователю с первого прочтения. Для этого исключили сложносочиненные формулировки, канцелярит, повторы и другие распространенные ошибки.

Отрисовали с нуля множество иконок, подбирая к ним понятные метафоры. За основу старались брать ассеты из приложения Росбанк Онлайн, чтобы у пользователя складывалась единая стилистическая история с банком.

Учли момент, что на экране банкомата мелкие иконки должны хорошо считываться – сделали их толще и контрастнее.

––––––
It was necessary to work out the UX design of the ATMs, to work out the whole way from the user's first entry until the service is provided. We needed to design an interface for the users to avoid unnecessary operations at the ATM.

We tried to coordinate our design with the Rosbank Online system, so the client could feel the similarity between the products and see familiar entities. This applied to the chosen colors, typography, and forms.

The unity of the story continued on the visual level as well: we suggested using seamless animations. They stretch and taper so that the scenario can be traced from the starting point. The user understands where he started the current path, and all the elements on the screen are the same.

We developed the interface to shorten the user scenario and not collect lines the length of the Great Wall of China at the ATM. We removed extra steps of the main branches of the ATM and worked out a way to enter banknotes where the user themselves chooses the desired denomination they want to get on the screen. At the same time, you can also classically enter a number on the screen: the ATM will calculate the banknotes set. If a banknote is unavailable, it will not be displayed on the screen.

We laid out the screens in a way that the operation could be carried out in two clicks.

On the level of the visual concept, we developed a scalable conceptual solution: pulse animations. They appear on the screen when the ATM is waiting for a user action, such as inserting a card or picking up banknotes.

We have developed an interface for touch and push-button versions of the machine.

We thoroughly worked on the copywriting. We proofread incoming texts from the client and paraphrased them so that they became as clear to the user as possible from the first reading. To do this, we excluded complex formulations, officialese, repetitions, and other common mistakes.

We drew a lot of icons from scratch and chose understandable metaphors for them. We used the assets from the Rosbank Online application so that the user could form a single stylistic story with the bank.

We considered that small icons should be easily read on the ATM screen, making them thicker and more contrasting.

Прочая информация о кейсе

Проект разработки UX-дизайна банкоматов для парка Росбанка — для сенсорных и кнопочных аппаратов. В распоряжении банка 36 000 банкоматов партнерской сети и 1500 собственных аппаратов.

–––––––
A UX design project for Rosbank's ATMs for both touch and push-button machines. The bank has 36 000 ATMs of the partner network and 1500 of its own devices.

Скриншоты