Поступил запрос от бизнеса о редизайне текущей формы. “Люди жалуются, что в целом вот им эта штука не нравится...”
Это очень важный элемент для всего продукта, 70% работы с формами в системе.

Формирую цели:
Какие проблемы клиента тут мы решаем? Какие наши бизнес задачи? Какие метрики улучшаем?
Сформулировать гипотезы улучшения и применить их в новом интерфейсе формы.

Организовал обратную связь и собрали статистику от пользователей после прохождения платежа.
Вывод: Полученные данные подтвердили, что форма работает хуже, чем аналоги, и вызывает недовольство клиентов.

Кроме того, мы знали о высоком оттоке пользователей из-за устаревшего UX нашего банка. Все эти факты указывали на необходимость переработки формы и улучшения её удобства.

Совместно с командой сформулировали способы улучшения формы.
Гипотезы оценил по методу ICE (Влияние. Уверенность Простота) Приоритизировали задачи:

На основании исследований показали реальную картину существующих проблем.
11 проблем. Из них 3 высококритичные

Реализовал макеты, собрал rликабельный прототип для коридорного тестирование (7 бухгалтеров). Пользователи заполняли форму без подсказок, что позволило выявить проблемы в навигации и понимании отдельных элементов, а также подтвердить часть гипотез.
На основе полученного фидбэка стал дорабатывать решения.

Проблема: таблица перегружена параметрами, нет чёткой структуры и визуальной иерархии: страдают выравнивание, отступы и читаемость документов, не помещаются все параметры, отсутствует горизонтальный скрол.

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

Проблема: длинная простыня, не помещается в видимую область экрана, приходится скроллить вниз-вверх. Перегруженность параметрами, некоторые даже не просматриваются, как выяснилось на исследовании.

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

Проблема: перегруженность параметрами, сложно проверять данные.

Решение: оставил только ввод ПИН-кода, проверка параметров осуществляется на предыдущем шаге.

Проблема: пользователь не имеет возможности просматривать сразу сумму, реквизиты, историю документа и подписывающих на одном экране, приходиться переключаться табами.

Решение: объединил историю вместе с подписывающими, вывел на один экран с параметрами.

Проблема: при отклонении платежа пользователю показывают лишь статус документа «Отказано». Чтобы узнать, причины, приходиться сверять данные переключаясь между вкладками и вчитываться в текст. Это замедляет работу и провоцирует повторные ошибки.

Решение: объединил параметры и вывел все на одном экране, указав причину и шаги по исправлению.

После итераций проектирования мы реализовали новый интерфейс и провели A/B-тесты с выборкой (5 тыс. пользователей). Выяснилось, что новая форма работает лучше прежней, но так же выяснились новые недочеты и баги.

Исправили и провели дополнительное тестирование. В результате большинство проблем были устранены, достигнуты метрики:

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

Новый интерфейс формы полностью перенесен на компоненты обновлённой дизайн-системы (токены, стили).

1 мес. На разработку дизайна.
3-4 мес. На разработку и тестирование.

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