Когда продуктам и фичам нужен редизайн?

• Дизайн устарел, конверсия упёрлась в потолок — надо искать новое решение.

• Обновился брендинг или дизайн‑система — нужно подтянуть визуал.

• Руководитель посмотрел, что у конкурентов красиво, и захотел так же.

• Или всё вроде работает, жалоб нет… но столько сил уходит на поддержку, что проще переделать с нуля, чем каждый квартал латать старое.

На связи Иван Кунцевич, старший дизайнер сайта Альфа-Банк и мастер редизайнов. Сегодня расскажу про последний пункт — редизайн мобильной версии карт отделений и банкоматов.

Проблемы карт

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

Но под капотом всё трещало по швам:

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

• Фронтендерам приходилось чинить на ходу — костыль на костыле, потому что на полноценный рефакторинг времени не было.

• Продакт устал каждый квартал выцарапывать ресурсы на поддержку. А ещё техподдержка просила «маленькие доработки», которые больше походили на латание дыр, чем на развитие продукта.

В итоге все дружно пришли к выводу: «Хватит это терпеть!» Лучше один раз вложиться и сделать нормально, чем продолжать эти круги ада.

Если кажется, то надо проверить

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

Бюджета и времени на проведение полноценного исследования в нашем ресерч центре у нас не было. Но был я, который накопил достаточно опыта, чтобы проводить тесты самостоятельно

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

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

После подготовки сценария интервью и формулирования задач для теста я запланировал календарь встреч и провёл исследование.

Инсайты и на что обращать внимание

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

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

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

Например:

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

• Наличие персонального менеджера критично для части клиентов: «Лучше доехать до нужного отделения, чем стоять в очереди».

• Для других важно, чтобы банкомат работал круглосуточно и был с парковкой: «Мне проще сесть в машину и доехать до банкомата в отделении банка, чем идти к партнёру рядом».

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

• Шторка занимает половину экрана, но не все догадываются, что в ней можно настраивать фильтры.

• При клике на кластер из трёх банкоматов открываются 1–2. И не те, что нужны. Масштабирование ведёт себя странно.

• Многие не догадываются, что шторка раскрывается до конца и не видят список услуг в отделении.

Во время тестов я всегда уточняю:

• «А почему вы считаете, что это проблема?»

• «Насколько она раздражает по шкале от 1 до 10?»

• «Как вы обычно с этим справляетесь?»

Пользователи часто жалуются на вещи по инерции. Но это не значит, что всё критично. Если человек говорит: «очень бесит», но ставит 3 из 10, — значит это не самая приоритетная проблема.

Такие вопросы помогают успокоить эмоции и понять, насколько действительно болит. Один респондент, например, говорил, что его дико бесит слово «Phygital‑отделение». Но потом признал, что смысл понимает — просто раздражают англицизмы.

Что чаще всего мешало клиентам:

• 43% не могли включить определение геопозиции: кнопка просто терялась на фоне карты;

• 45% не нашли информацию об обслуживании премиум‑клиентов;

• 57% запутались в фильтрах: их слишком много, тяжело сориентироваться;

• 36% подумали, что серый цвет иконки отделения означает, что оно не работает (а это были отделения для малого бизнеса).

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

Карта и ничего лишнего

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

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

Главный принцип: интерфейс не должен мешать.

Если человек просто хочет найти ближайший банкомат, то зачем ему мешать фильтрами и шторками?

Поэтому я:

• убрал дергающуюся шторку, которая закрывала половину карты и сбивала фокус;

• фильтры уехали на отдельный экран — тем, кто не хочет настраивать, они не мешают;

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

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

В самой панели фильтров:

• под инпутом сразу показаны самые популярные параметры, чтобы не искать;

• остальное отсортировано по категориям;

• дополнительные фильтры ушли в аккордеон, чтобы не перегружать визуально.

Карточки банкоматов и отделений тоже обновились:

• название отделения логично переехало в хедер;

• добавил иконки блоков — теперь нужную информацию проще считать;

• тип обслуживания стал заметным и понятным через бейджи;

• график загрузки помогает выбрать время без очередей;

• курсы валют сразу дают понять, выгодно ли ехать;

• появилась возможность поделиться карточкой — удобно скинуть ссылку другу или сохранить для себя.

Снова тесты?

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

В нашем случае мешали две вещи: 

• куча багов в текущих картах, которые надо было срочно чинить,

• и поджимающие сроки.

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

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

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

• Дизайн‑критика. Регулярно приношу работу на рабочие группы, получаю фидбэк от коллег и лидов. Одна голова хорошо, а пять — лучше.

• Итерации и вовлечение команды. Я не рисую всё сразу до идеала. На ранних этапах показываю промежуточные версии продакту и разработчикам. Это помогает учесть ограничения и не влететь на доработки на последнем этапе.

Успех фичи — это не про одного дизайнера. Это про команду, которая шарит, зачем делает то, что делает.

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

Остались ли довольны картами?

Да. После релиза мы постепенно открывали карты на пользователей. Оценивали показатели отказов, анализировали сессии пользователей по записям экранов и собирали фидбэк от техподдержки. Когда поняли, что ничего не ломается, и более того — показатель отказов снизился на 8%, открыли карты на весь трафик. А ещё получили очень тёплый фидбэк от команд Альфа‑Онлайн — теперь они просят нас так же обновить и  десктоп.

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

Если вы работаете в продукте, не ждите задачи на редизайн. Ищите сами, где можно улучшить опыт. Покажите, как может быть круто — и команда, и бизнес это оценят.

Когда у тебя есть чёткое понимание ценности, понятная визуализация и внятная аргументация, время и ресурсы обязательно найдутся.