Как мы обновили интерфейс платежных терминалов банка по всей стране

Мы разработали вторую версию интерфейса терминалов оплаты, которая уже используется на тысячах устройств и помогает клиентам быстрее совершать операции

Как мы обновили интерфейс платежных терминалов банка по всей стране — Источник изображения: Личный архив компании Tiqum

Задача и причина

Задача:

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

Причина:

С 2011 года интерфейс устарел — за это время изменились ожидания пользователей, дизайн-тренды, бизнес-задачи и механики кросс-продаж. Требовалось кардинальное обновление визуала и логики.

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

К 2020 году потребовалось полностью переосмыслить интерфейс с учетом:

эволюции digital-привычек пользователей;
обновленной бренд-концепции банка;
необходимости усилить UX и кросс-продажи.

Первым шагом стала аналитика накопленной статистики. Мы проанализировали:

сценарии использования;
целевые сегменты пользователей;
точки оттока и сбоя в сценариях;
опыт ТОП-20 банков России.

На основе этих данных был создан интерактивный прототип из почти 200 экранов. Каждый экран проходил тестирования и итеративные доработки. Задача была — сократить количество шагов в сценариях, не потеряв в понятности. Параллельно шло согласование с IT-инфраструктурой банка — интерфейс должен был соответствовать духу новой digital-концепции, но не использовать существующие веб-компоненты (браузерные и тач-интерфейсы слишком разные).

Нами была разработана собственная дизайн-система, адаптированная под терминалы:

каждый экран собирается из блоков-конструкторов;
более 200 экранов охвачены шаблонами;
все элементы имеют состояния (активный, выбранный, неактивный и др.);
размещение элементов строго регламентировано.

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

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

Работа над проектом завершилась к зиме 2020–2021 годов. Обновленный интерфейс был установлен на тысячи терминалов по всей стране. Он стал логичным продолжением обновленной цифровой концепции банка и кардинально упростил повседневные действия клиентов.

Результат