Как мы обновили интерфейс платежных терминалов банка по всей стране
Обновили интерфейс терминалов оплаты: улучшили UX, увеличили кросс-продажи, ускорили операции.
Задача:
Разработать вторую версию интерфейса платежных терминалов с учетом накопленных данных и изменений в дизайне, юзабилити и поведении пользователей.
Причина:
С 2011 года интерфейс устарел — за это время изменились ожидания пользователей, дизайн-тренды, бизнес-задачи и механики кросс-продаж. Требовалось кардинальное обновление визуала и логики.
Проект по редизайну интерфейса терминалов оплаты стал продолжением многолетнего сотрудничества с банком. Первая версия интерфейса была внедрена еще в 2011 году. Тогда команда впервые спроектировала унифицированный пользовательский опыт для всех терминалов оплаты, установленных по всей стране. За 9 лет эксплуатации накопился огромный массив аналитических данных: популярные операции, среднее время на выполнение сценариев, ошибки, предпочтения клиентов.
К 2020 году потребовалось полностью переосмыслить интерфейс с учетом:
эволюции digital-привычек пользователей;
обновленной бренд-концепции банка;
необходимости усилить UX и кросс-продажи.
Первым шагом стала аналитика накопленной статистики. Мы проанализировали:
сценарии использования;
целевые сегменты пользователей;
точки оттока и сбоя в сценариях;
опыт ТОП-20 банков России.
На основе этих данных был создан интерактивный прототип из почти 200 экранов. Каждый экран проходил тестирования и итеративные доработки. Задача была — сократить количество шагов в сценариях, не потеряв в понятности. Параллельно шло согласование с IT-инфраструктурой банка — интерфейс должен был соответствовать духу новой digital-концепции, но не использовать существующие веб-компоненты (браузерные и тач-интерфейсы слишком разные).
Нами была разработана собственная дизайн-система, адаптированная под терминалы:
каждый экран собирается из блоков-конструкторов;
более 200 экранов охвачены шаблонами;
все элементы имеют состояния (активный, выбранный, неактивный и др.);
размещение элементов строго регламентировано.
После утверждения прототипа началась фронтенд-разработка. Мы оказывали техническое сопровождение при внедрении: от тестов в эмуляторах до интеграции с серверной частью. Дополнительно была улучшена система сбора метрик: теперь интерфейс реагирует на изменение сценариев быстрее, чем раньше. Также особое внимание было уделено адаптивности визуальных компонентов, чтобы пользователи всех возрастов и категорий могли легко ориентироваться в интерфейсе. Мы внедрили динамическую адаптацию элементов под сценарии с повышенной сложностью, а также переработали визуальную иерархию элементов, чтобы повысить читаемость и сократить количество ошибок при взаимодействии.
Кроме того, мы оптимизировали взаимодействие с экранными формами для слабовидящих пользователей, усилив цветовой контраст и увеличив размер критически важных кнопок. Это позволило расширить охват пользователей и повысить доступность интерфейса. Интерфейс был протестирован на устройствах разных поколений и диагоналей, чтобы обеспечить стабильную работу на всей инфраструктуре банка. В дополнение был разработан гибкий механизм обновлений, позволяющий внедрять улучшения без остановки терминалов и с минимальными рисками сбоев.
Работа над проектом завершилась к зиме 2020–2021 годов. Обновленный интерфейс был установлен на тысячи терминалов по всей стране. Он стал логичным продолжением обновленной цифровой концепции банка и кардинально упростил повседневные действия клиентов.
Результат:
Количество шагов в сценариях снижено до минимума.
Среднее время выполнения операций сокращено до 6 раз.
Увеличены кросс-продажи сопутствующих продуктов.
Дизайн соответствует новой концепции digital-продуктов банка.
Создана масштабируемая дизайн-система под терминалы.
Повышена точность и глубина пользовательской аналитики.