Редизайн сайта «Халвы»

Сделали UX-аудит, новую дизайн-концепцию и прототипы

Команда Совкомбанка обратилась к нам, чтобы обновить сайт своего главного продукта — карты «Халва».

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

Наши задачи:

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

В проекте участвовало более 20 специалистов со стороны банка и AGIMA. Расскажем, как мы работали и каких результатов достигли.

Провели UX-аудит

Чтобы зафиксировать, как пользователи воспринимают сайт до и после редизайна, мы провели исследование по методологии SUPR-Q.

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

После редизайна показатели выросли:

общий балл поднялся до 4,91;
восприятие визуальной привлекательности выросло почти в два раза;
удобство взаимодействия — на 28%.

Пользователи отмечали, что сайт стал понятнее, проще и выглядит современно.

Создали дизайн-концепцию  и новые визуальные решения

Всего мы представили три дизайн-концепции, а одну, финальную, защищали в главном офисе Совкомбанка.

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

У главной страницы появилась четкая структура и визуальная логика  по «этажам»: каждый следующий экран раскрывает продукт чуть глубже —  от возможностей карты к реальным сценариям использования.

Прозрачность

Ключевым визуальным образом нового дизайна стала прозрачная карта «Халва». Он отражает главную суть продукта: «Халва» делает покупки прозрачными и понятными. Пользователь сразу видит, что может тратить свои средства, брать рассрочку или зарабатывать кэшбэк — без скрытых условий.

Простота

Мы сознательно отказались от типичных «банковских» паттернов  и использовали лучшие визуальные решения из e-commerce и других сфер. Благодаря этому сайт стал живее, понятнее и ближе к продуктам, которыми люди пользуются каждый день.

Вовлечение

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

Сделали прототипы и спецификации

Мы проработали более 40 пользовательских сценариев и собрали  около 50 ключевых экранов с детализированными спецификациями: интерактивные элементы, экранные формы, логика переходов.

Провели арт-дирекшен

Дальше к проекту подключилась дизайн-команда Совкомбанка, а мы помогали наиболее точно приземлить концепцию на макеты рабочих страниц.

Что делали:

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

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

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

Андрей Жикалов

Арт-директор AGIMA

Вызовы проекта

Разветвленная структура ЛПР

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

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

Технические ограничения

Часть решений было сложно перенести на живые страницы сайта, поэтому мы вместе с командой разработчиков Совкомбанка искали нужные инструменты, референсы и давали технические советы.

Результаты

Новый сайт «Халвы» стал современным, удобным  и визуально привлекательным, с четкой структурой  и понятной навигацией.
Конверсия формы «Оформить карту» выросла на 1,5 пп.
Доля заявок с мобильных устройств увеличилась на 0,6 пп.
Средний балл удовлетворенности по SUPR-Q поднялся  до уровня выше среднего мирового (выше 4.0 баллов).
Новый дизайн стал точкой роста: он помогает банку  не только привлекать клиентов, но и формировать современный образ бренда.

Над проектом работали

Команда AGIMA

Петрова Татьяна

Руководитель проектного офиса
Тимакова Елена

Заместитель руководителя отдела проектирования и дизайна
Кулида Николай

Руководитель проектов
Подлужный Дмитрий

Руководитель направления проектирования интерфейсов
Гриценко Артём

Руководитель отдела  проектирования и дизайна
Левена Виктория

Руководитель отдела  продуктовой аналитики
Жикалов Андрей

Арт-директор
Тарасов Данила

UX-исследователь

Команда Совкомбанка

Мачехин Антон

Директор по рисковым и коммуникационным стратегиям
Нечаев Олег

Руководитель  департамента дизайна
Вишнякова Наталья

Заместитель директора по рисковым и коммуникационным стратегиям
Герасимов Илья

Руководитель отдела  поисковой оптимизации
Наталия Шрамко

Начальник офиса ИТ-продуктов  и интеграций
Светлана Гайнетдинова

Руководитель управления  электронной коммерции
Хохлов Вадим

Руководитель проекта
Строков Евгений

Главный аналитик