> ## Content Index > Fetch the complete content index at: https://admin.kod.ru/llms.txt > Use this file to discover other available public pages before exploring further. # Что стоит за удобным экраном: путь от гипотез к интерфейсу, который работает - URL: https://admin.kod.ru/put-ot-gipotez-do-interfeisa-otp-bank/ - Published: 2025-07-14T11:18:40.000Z - Updated: 2025-07-14T11:22:57.000Z - Description: Сегодня делимся кейсом редизайна экрана платежей в мобильном приложении ОТП Банка. Расскажем, с чего начинается редизайн, как работает дизайн-спринт, какие подходы использует команда и к каким результатам пришли. - Author: OTP Bank - Tags: Блоги Дизайн — это не только про внешний вид, но и про удобство, комфорт клиента и работу продукта. Сегодня делимся кейсом редизайна экрана платежей в мобильном приложении ОТП Банка. Расскажем, с чего начинается редизайн, как работает дизайн-спринт, какие подходы использует команда и к каким результатам пришли. ## Почему возник запрос на обновление ​​Со стороны пользователей экран выполнял свои функции, ключевые сценарии были понятны и работали. Однако внутри продуктовой команды становилось всё заметнее: интерфейс устарел технически, усложнились процессы тестирования, доработки занимали непропорционально много времени, а структура не отражала реальную логику пользовательского поведения. ![](https://admin.kod.ru/content/images/2025/07/image-43.png) На этом фоне было принято решение не просто доработать существующее решение, а пересобрать его с нуля. ## С чего начинается редизайн: исследование и анализ Перед тем как приступить к проектированию, команда проводит исследование пользовательских сценариев, как внутри продукта, так и на рынке в целом. Анализ охватывал не только интерфейсы банков, но и цифровые сервисы, где переводы и транзакции являются ключевым элементом. Цель была не просто вдохновиться, а зафиксировать: - какие паттерны чаще всего используются в интерфейсах; - какие сценарии считаются интуитивно понятными; - где решения конкурентов расходятся с ожиданиями пользователей; - какие нестандартные подходы уже существуют на рынке. Параллельно команда изучает поведение клиентов внутри текущего продукта: - какие функции используются чаще всего, - на каких этапах возникают ошибки, - какие действия требуют лишних кликов или вызывают затруднение. Эти данные дополняются глубинными интервью, которые помогают отследить логику пользователя, его ожидания и привычки. ## От структуры к решению: как рождается концепт После анализа команда выстраивает user flow — схему пользовательского пути. Этот шаг помогает заметить слабые места, которые не всегда видны в аналитике, но влияют на удобство сценария. Так появился первый концепт: чистый, ожидаемый, собранный на знакомых паттернах. Его использовали как основу — скелет будущего решения. Но одна структура — не интерфейс. Чтобы добавить смысл и детали, дизайнеры собирают мудборд — примеры удачных решений из разных интерфейсов, включая концепты и нестандартные подходы. Это помогает взглянуть на задачу шире и выйти за рамки привычного. ![](https://admin.kod.ru/content/images/2025/07/image-44.png) ## Что такое дизайн-спринт и как он работает Чтобы собрать всё воедино и системно, команда запускает дизайн-спринт — методологию, которая позволяет в сжатые сроки перейти от разбора задач к работающему прототипу. Это пятидневный интенсив, в ходе которого команда проходит путь от постановки задачи до тестируемого прототипа. Участвуют специалисты из разных подразделений: дизайнеры, аналитики, эксперты по безопасности. Такая сборная команда помогает взглянуть на задачу под разными углами и выйти за рамки привычных решений. ![](https://admin.kod.ru/content/images/2025/07/image-45.png) После анализа результатов вносятся корректировки. Это и есть тот финальный этап, после которого команда получает не просто новый интерфейс, а решение, проверенное на практике. ## От идеи — к внедрению: как изменился экран платежей Результатом дизайн-спринта стал новый концепт разводящей страницы — точка входа в разные виды переводов и платежей. Вместо привычного заголовка «Платежи» — акцентный блок «Перевести». Он сразу показывает, где находится пользователь, без лишнего шума. Ниже — плитки с самыми востребованными сценариями, а внизу экрана — возможность настроить порядок отображения, скрывать или добавлять нужные опции. ![](https://admin.kod.ru/content/images/2025/07/-----------_2025-07-14_212242667.png) Важно: в момент дизайн-спринта команда сознательно не ограничивала себя рамками. Вначале идеальный сценарий, потом сопоставление с техническими и бизнес-реалиями. Так рождается компромисс между тем, как хочется, и тем, как можно уже сейчас. ## Иконки и визуальный язык: что ещё изменилось Редизайн платежного экрана подтолкнул команду к определению нового стиля иконок. Вначале тестировали 3D, выглядело ярко, но не вписывалось в тёмную тему и усложняло поддержку. Команда отказалась от объёмных элементов в пользу лаконичных 2D-иконок. Результат — новый икон-пак, отрисованный специально под потребности интерфейса. Сегодня он используется не только в платежах, но и в других частях приложения. ![](https://admin.kod.ru/content/images/2025/07/image-47.png) ## Шаблоны и автоплатежи: новый подход Ранее шаблоны были спрятаны, пользователь не всегда понимал, что они вообще существуют. В новом интерфейсе шаблоны вынесли на отдельный экран, а в случае отсутствия шаблонов показали «пустое состояние» — с иллюстрацией и капибарой, чтобы добавить эмоцию. ![](https://admin.kod.ru/content/images/2025/07/-----------_2025-07-14_212251816.png) Теперь шаблоны и автоплатежи объединены в один список. Автоплатёж визуально отличается — с пометкой периода действия. Если срок действия завершён, пользователь видит это сразу и может продлить. ![](https://admin.kod.ru/content/images/2025/07/image-49.png) Сортировку списка перенесли в отдельную кнопку, чтобы не перегружать карточки. Параллельно это учит пользователя, что экран можно настраивать под себя. Такая точка входа в настройки — это и функциональность, и элемент обучения. Тем более что к сортировке обращаются нечасто, и нет смысла показывать иконку на каждой карточке. Важнее — это показать возможность, а не навязывать её. ![](https://admin.kod.ru/content/images/2025/07/image-50.png) **Что команда вынесла из кейса:** 1\. Сформировали подход, где и когда использовать 2D- и 3D-графику. 2\. Зафиксировали обязательность проверки макетов в светлой и тёмной теме. 3\. Заложили визуальные и технические стандарты для будущих релизов. Одним из них стал новый пак 2D-иконок — он разрабатывался сразу для приложения, сайта и внутренних сервисов. Платежи стали первым экраном, где иконки прижились: тогда отрисовали более 30, сейчас в паке — уже свыше 200. ![](https://admin.kod.ru/content/images/2025/07/image-51.png) 4\. Добавили в приложение эмоциональные элементы и пасхалки, чтобы сделать опыт теплее и живее.