Что стоит за удобным экраном: путь от гипотез к интерфейсу, который работает

OTP Bank

Jul 14, 2025 • 14:18

Данная страница содержит «вставки» с других сайтов, скрипты которых могут собирать ваши личные данные для аналитики и своих внутренних потребностей. Редакция рекомендует использовать браузеры с блокировкой трекеров для просмотра таких страниц. Подробнее →

Дизайн — это не только про внешний вид, но и про удобство, комфорт клиента и работу продукта.

Сегодня делимся кейсом редизайна экрана платежей в мобильном приложении ОТП Банка. Расскажем, с чего начинается редизайн, как работает дизайн-спринт, какие подходы использует команда и к каким результатам пришли.

Почему возник запрос на обновление

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

На этом фоне было принято решение не просто доработать существующее решение, а пересобрать его с нуля.

С чего начинается редизайн: исследование и анализ

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

Цель была не просто вдохновиться, а зафиксировать:

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

Параллельно команда изучает поведение клиентов внутри текущего продукта:

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

Эти данные дополняются глубинными интервью, которые помогают отследить логику пользователя, его ожидания и привычки.

От структуры к решению: как рождается концепт

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

Но одна структура — не интерфейс. Чтобы добавить смысл и детали, дизайнеры собирают мудборд — примеры удачных решений из разных интерфейсов, включая концепты и нестандартные подходы. Это помогает взглянуть на задачу шире и выйти за рамки привычного.

Что такое дизайн-спринт и как он работает

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

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

После анализа результатов вносятся корректировки. Это и есть тот финальный этап, после которого команда получает не просто новый интерфейс, а решение, проверенное на практике.

От идеи — к внедрению: как изменился экран платежей

Результатом дизайн-спринта стал новый концепт разводящей страницы — точка входа в разные виды переводов и платежей. Вместо привычного заголовка «Платежи» — акцентный блок «Перевести». Он сразу показывает, где находится пользователь, без лишнего шума. Ниже — плитки с самыми востребованными сценариями, а внизу экрана — возможность настроить порядок отображения, скрывать или добавлять нужные опции.

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

Иконки и визуальный язык: что ещё изменилось

Редизайн платежного экрана подтолкнул команду к определению нового стиля иконок. Вначале тестировали 3D, выглядело ярко, но не вписывалось в тёмную тему и усложняло поддержку. Команда отказалась от объёмных элементов в пользу лаконичных 2D-иконок. Результат — новый икон-пак, отрисованный специально под потребности интерфейса. Сегодня он используется не только в платежах, но и в других частях приложения.

Шаблоны и автоплатежи: новый подход

Ранее шаблоны были спрятаны, пользователь не всегда понимал, что они вообще существуют. В новом интерфейсе шаблоны вынесли на отдельный экран, а в случае отсутствия шаблонов показали «пустое состояние» — с иллюстрацией и капибарой, чтобы добавить эмоцию.

Теперь шаблоны и автоплатежи объединены в один список. Автоплатёж визуально отличается — с пометкой периода действия. Если срок действия завершён, пользователь видит это сразу и может продлить.

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

Что команда вынесла из кейса:

1. Сформировали подход, где и когда использовать 2D- и 3D-графику.

2. Зафиксировали обязательность проверки макетов в светлой и тёмной теме.

3. Заложили визуальные и технические стандарты для будущих релизов. Одним из них стал новый пак 2D-иконок — он разрабатывался сразу для приложения, сайта и внутренних сервисов. Платежи стали первым экраном, где иконки прижились: тогда отрисовали более 30, сейчас в паке — уже свыше 200.