Когда продуктам и фичам нужен редизайн?
Дизайн устарел, конверсия упёрлась в потолок — надо искать новое решение.
Обновился брендинг или дизайн‑система — нужно подтянуть визуал.
Руководитель посмотрел, что у конкурентов красиво, и захотел так же.
Или всё вроде работает, жалоб нет… но столько сил уходит на поддержку, что проще переделать с нуля, чем каждый квартал латать старое.
На связи Иван Кунцевич, старший дизайнер сайта Альфа-Банк и мастер редизайнов. Сегодня расскажу про последний пункт — редизайн мобильной версии карт отделений и банкоматов.
Проблемы карт
Как я уже говорил, критичных проблем у карт не было. Карты несколько лет спокойно работали, помогали пользователям находить отделения и банкоматы, не вызывали негатива, да и метрики были в порядке. Даже процент отказов — в зелёной зоне.
Но под капотом всё трещало по швам:
Тестировщики устали заводить баги: шторка лагает, кнопки не жмутся, пины на карте то не прогружаются, то отображаются с ошибками, а геопозиция вообще живёт своей жизнью.
Фронтендерам приходилось чинить на ходу — костыль на костыле, потому что на полноценный рефакторинг времени не было.
Продакт устал каждый квартал выцарапывать ресурсы на поддержку. А ещё техподдержка просила «маленькие доработки», которые больше походили на латание дыр, чем на развитие продукта.
В итоге все дружно пришли к выводу: «Хватит это терпеть!» Лучше один раз вложиться и сделать нормально, чем продолжать эти круги ада.
Если кажется, то надо проверить
Мне стало интересно: а действительно ли проблема только в багах? Почему при этом пользователи почти не жалуются? Может, они просто молчат, а мы не замечаем скрытые сложности?
Бюджета и времени на проведение полноценного исследования в нашем ресерч центре у нас не было. Но был я, который накопил достаточно опыта, чтобы проводить тесты самостоятельно
К тому же все ресурсы были под рукой. Проанализировал текущие карты, выделил поверхностные баги и составил гипотезы, как улучшить функционал. Расписал пользовательские сценарии и уточнил, какие задачи наши карты помогают решать. Кстати, карты в таком виде работают не только на сайте, но и в Альфа‑Онлайн для клиентов.
Только экспертным аудитом было не обойтись. Поэтому через наши каналы набрал респондентов для проведения модерируемых тестов, чтобы понять, с какими проблемами при выполнении сценариев на самом деле сталкиваются клиенты.
После подготовки сценария интервью и формулирования задач для теста я запланировал календарь встреч и провёл исследование.
Инсайты и на что обращать внимание
Мне было важно не просто проверить, как работают наши карты, а понять, в каком контексте клиенты ими пользуются и что действительно для них важно.
Интервью начинались с простых вопросов: когда последний раз пользовались картами, зачем, где находились, что понравилось, а что раздражало. Это помогло увидеть реальный контекст и ошибки — без заданных сценариев и ограничений.
Ошибки, конечно, могли не повториться в тестах, но подобные истории показывают зоны, на которые точно стоит обратить внимание. Ведь цель — не просто сделать рабочую фичу, а попасть в ожидания и повседневные привычки пользователя.
Например:
При поиске банкоматов людям важнее условия снятия и пополнения в устройствах партнёров, чем их близость к текущей геолокации.
Наличие персонального менеджера критично для части клиентов: «Лучше доехать до нужного отделения, чем стоять в очереди».
Для других важно, чтобы банкомат работал круглосуточно и был с парковкой: «Мне проще сесть в машину и доехать до банкомата в отделении банка, чем идти к партнёру рядом».
Когда мы перешли к заданиям, то стало ясно, что помимо багов, о которых мы уже знали, есть ряд неочевидных, но сильно раздражающих деталей:
Шторка занимает половину экрана, но не все догадываются, что в ней можно настраивать фильтры.
При клике на кластер из трёх банкоматов открываются 1–2. И не те, что нужны. Масштабирование ведёт себя странно.
Многие не догадываются, что шторка раскрывается до конца и не видят список услуг в отделении.
Во время тестов я всегда уточняю:
«А почему вы считаете, что это проблема?»
«Насколько она раздражает по шкале от 1 до 10?»
«Как вы обычно с этим справляетесь?»
Пользователи часто жалуются на вещи по инерции. Но это не значит, что всё критично. Если человек говорит: «очень бесит», но ставит 3 из 10, — значит это не самая приоритетная проблема.
Такие вопросы помогают успокоить эмоции и понять, насколько действительно болит. Один респондент, например, говорил, что его дико бесит слово «Phygital‑отделение». Но потом признал, что смысл понимает — просто раздражают англицизмы.
Что чаще всего мешало клиентам:
43% не могли включить определение геопозиции: кнопка просто терялась на фоне карты;
45% не нашли информацию об обслуживании премиум‑клиентов;
57% запутались в фильтрах: их слишком много, тяжело сориентироваться;
36% подумали, что серый цвет иконки отделения означает, что оно не работает (а это были отделения для малого бизнеса).
Я понял, что это реальные поводы пересмотреть интерфейс, убрать лишнее и сфокусироваться на главном. Этим я и занялся.
Карта и ничего лишнего
Особое внимание я уделял UI. Я считаю, что недостаточно сделать удобный, логичный интерфейс. Он должен быть визуально приятным, чтобы у пользователя сложилось полноценное приятное впечатления от опыта использования карт.
Связав воедино требования от тестировщиков и разработчиков, а также инсайты с тестов, прикинул гипотезы, что изменить и зачем. А потом начал накидывать варианты, за счёт чего этого можно добиться.
Главный принцип: интерфейс не должен мешать.
Если человек просто хочет найти ближайший банкомат, то зачем ему мешать фильтрами и шторками?
Поэтому я:
убрал дергающуюся шторку, которая закрывала половину карты и сбивала фокус;
фильтры уехали на отдельный экран — тем, кто не хочет настраивать, они не мешают;
геопозиция определяется автоматически, а если что‑то пошло не так, то всегда можно вбить адрес вручную.
Из редизайна сайта, про который я писал тут, в шторку переехал новый хедер и табы для быстрого переключения между отделениями и банкоматами, которые раньше прятались среди общих фильтров.
В самой панели фильтров:
под инпутом сразу показаны самые популярные параметры, чтобы не искать;
остальное отсортировано по категориям;
дополнительные фильтры ушли в аккордеон, чтобы не перегружать визуально.
Карточки банкоматов и отделений тоже обновились:
название отделения логично переехало в хедер;
добавил иконки блоков — теперь нужную информацию проще считать;
тип обслуживания стал заметным и понятным через бейджи;
график загрузки помогает выбрать время без очередей;
курсы валют сразу дают понять, выгодно ли ехать;
появилась возможность поделиться карточкой — удобно скинуть ссылку другу или сохранить для себя.
Снова тесты?
По‑хорошему, после подготовки концепта его бы протестировать на пользователях. Но жизнь продуктового дизайнера — не сказка, и часто всё идёт не по учебнику.
В нашем случае мешали две вещи:
куча багов в текущих картах, которые надо было срочно чинить,
и поджимающие сроки.
Решили запускать концепт сразу в разработку, а уже потом, поэтапно, проверять его на бою. Это не идеальный сценарий, но реалистичный.
Я не считаю, что исследования — обязательный этап любой задачи. Это инструмент. Один из многих. Есть другие способы обкатать решение:
Экспертиза. У меня есть насмотренность, я знаю паттерны, понимаю поведение пользователей. Иногда этого достаточно, чтобы не тратить недели на проверку очевидного.
Дизайн‑критика. Регулярно приношу работу на рабочие группы, получаю фидбэк от коллег и лидов. Одна голова хорошо, а пять — лучше.
Итерации и вовлечение команды. Я не рисую всё сразу до идеала. На ранних этапах показываю промежуточные версии продакту и разработчикам. Это помогает учесть ограничения и не влететь на доработки на последнем этапе.
Успех фичи — это не про одного дизайнера. Это про команду, которая шарит, зачем делает то, что делает.
Отрисовав все экраны карт, связав флоу переходов и проработав крайние состояния, передал макеты в разработку, и ребята сделали магию. Из-за того, что до финальных макетов мы грумили возможности реализации, разработка была быстрой и без компромиссов по пути.
Остались ли довольны картами?
Да. После релиза мы постепенно открывали карты на пользователей. Оценивали показатели отказов, анализировали сессии пользователей по записям экранов и собирали фидбэк от техподдержки. Когда поняли, что ничего не ломается, и более того — показатель отказов снизился на 8%, открыли карты на весь трафик. А ещё получили очень тёплый фидбэк от команд Альфа‑Онлайн — теперь они просят нас так же обновить и десктоп.
Работая в продукте, мы часто попадаем в ловушку фичегонки. Постоянно нужно растить метрики, искать инновационные решения, привлекать аудиторию за счет разработки нового. А тем временем старый функционал пылится в бэклоге годами — никто не трогает, пока не загорится. Но опыт клиента — это не только новое, это и то, как работают текущие вещи. Лучше заняться бэклогом на своих условиях, чем в момент, когда уже всё рухнуло.
Если вы работаете в продукте, не ждите задачи на редизайн. Ищите сами, где можно улучшить опыт. Покажите, как может быть круто — и команда, и бизнес это оценят.
Когда у тебя есть чёткое понимание ценности, понятная визуализация и внятная аргументация, время и ресурсы обязательно найдутся.
