01. ГАЗПРОМБАНК - РЕДИЗАЙН САЙТА
КОНТЕКСТ ЗАДАЧИ
Газпромбанк - это один из крупнейших универсальных банков России, занимающий лидирующие позиции в финансовой системе страны. Сайт является ключевой точкой входа для клиентов.
В рамках данной задачи необходимо было провести редизайн сайта с созданием новых
компонентов и документации.
ПРОБЛЕМЫ
- Пользователи не понимают, с чего начать взаимодействие с продуктом, из-за отсутствия явного основного сценария и конкурирующих действий на первом экране;
- Пользовательский путь к целевым действиям содержит лишние шаги, что увеличивает время выполнения сценария и повышает вероятность оттока;
- Интерфейс перегружен информацией, из-за чего пользователю сложно быстро считать ключевую ценность продукта и принять решение о дальнейшем действии;
- Ожидания пользователя от продукта не совпадают с фактическим опытом, что снижает доверие и увеличивает вероятность отказа.
ОГРАНИЧЕНИЯ
- Проект разрабатывался в условиях сложной продуктовой и бизнес-среды:
- Несколько разрозненных продуктов с разной логикой и сценариями;
- Необходимость сохранить привычные процессы для постоянных клиентов;
- Консервативная аудитория с устоявшимися паттернами поведения;
- Большое количество бизнес-требований от разных отделов
ЦЕЛИ
- Убрать визуальный шум и навести иерархию. Очистить интерфейс от устаревших декоративных элементов (лишние рамки, тени, градиенты), увеличить «воздух» между блоками и сделать так, чтобы заголовки и кнопки действий (CTA) явно доминировали над второстепенным текстом.
- Сделать сайт полностью адаптивным (Mobile First). Перестать «зажимать» десктопную версию в мобильном экране. Переработать навигацию, увеличить размер кнопок и шрифтов для комфортного управления одной рукой со смартфона.
- Пересобрать визуальный язык. Привести цветовую палитру к современному контрасту и отказаться от устарвешей графики в пользу минималистичных иконок или иллюстраций.
- Обеспечить мгновенную обратную связь. Добавить плавные анимации при наведении на кнопки, эффекты при клике и понятные состояния для всех интерактивных элементов.
- Повысить доступность. Обеспечить достаточную контрастность текста, сделать видимые индикаторы фокуса для навигации с клавиатуры и логическую структуру заголовков.
МОЯ РОЛЬ
Я подключилась к проекту на раннем этапе и вместе с арт-директором довела его до финала. Моей зоной ответственности были исследование существующего опыта, формирование UX-гипотез, проектирование пользовательских сценариев, создание кликабельного прототипа, дизайн всего сервиса и участие в разработке общей дизайн-системы продукта.
ГИПОТЕЗЫ
Я проанализировала существующие продукты Газпромбанка, а также пользователей и готовые решения на рынке, что помогло мне получить инсайты, на основе которых я приняла несколько решений:
Гипотеза 1: Рост конверсии в целевое действие
Если увеличить визуальный вес и контрастность ключевых кнопок (CTA), убрать отвлекающий визуальный шум (лишние баннеры, рамки) и разместить формы в «теплой» зоне экрана, то процент завершенных целевых действий вырастет минимум на 15-20%, потому что пользователю не придется искать кнопку глазами, а когнитивная нагрузка при принятии решения снизится.
Гипотеза 2: Увеличение времени на сайте (глубины просмотра)
Если заменить «простыни текста» на визуальную иерархию (заголовки + короткие абзацы + буллиты), добавить карточки услуг вместо скучных таблиц и внедрить плавную анимацию появления блоков при скролле, то пользователи будут просматривать на 1-2 страницы больше за визит, потому что интерфейс перестанет вызывать визуальную усталость и желание закрыть вкладку в первые 10 секунд.
Гипотеза 3: Рост доверия к бренду и снижение обращений в поддержку
Если унифицировать все формы ввода (сделать их визуально понятными, с валидацией в реальном времени) и добавить прозрачную обратную связь (тосты об успехе/ошибке, анимацию загрузки), то количество брошенных форм уменьшится на 30%, а число повторных заполнений «на перепутанные поля» — снизится вдвое, потому что пользователь будет понимать, что от него требуется, и видеть, что система его слышит (снижение тревожности при взаимодействии).
КЛЮЧЕВЫЕ РЕШЕНИЯ
- Дизайн-система и UI-кит
Разработала масштабируемую дизайн-систему:
Документация каждого блока;
Единые состояния и паттерны;
Ускорение разработки новых разделов.
- Внедрение «акцентного CTA» и тотальную чистку от визуального мусора.
Удалить все устаревшие баннеры, рамки и фоновые текстуры, которые не несут функциональной нагрузки.
- Пересобрать навигацию и типографику по принципу «Mobile First».
Установить базовый размер шрифта для всех текстов (кроме мелких примечаний) не менее 16px на мобильных устройствах.
Сделать все кнопки, ссылки и поля ввода удобными для нажатия пальцем (без риска задеть соседний элемент).
- Реструктурировать контент в сканируемый формат с микро-анимацией.
Заменить таблицы (где возможно) на карточки с визуальным весом (легкая тень или бордер).
Добавить анимацию ховера для блоков, чтобы удерживать внимание при скролле.
- Спроектировать «отзывчивую» систему форм и обратной связи.
Унифицировать все поля ввода под единый стиль
Добавить тост-уведомления (всплывающие в углу) об успешной отправке, ошибке сервера или загрузке, чтобы пользователь всегда знал статус своего действия.
РЕЗУЛЬТАТЫ
- Результат №1 (после усиления CTA и очистки от шума)
Рост конверсии в целевое действие на 15–25%.
Увеличится процент пользователей, доходящих до отправки формы / клика по кнопке
Снизится количество уходов с главного экрана без взаимодействия (улучшится «первый клик»).
Результат №2 (после Mobile First-навигации и шрифтов)
Снижение показателя отказов на мобильных устройствах на 20–30%.
Уменьшится количество сессий длительностью менее 10 секунд со смартфонов.
Вырастет доля пользователей, которые успешно находят нужный раздел меню с первой попытки (без случайных нажатий).
Результат №3 (после сканируемой структуры и анимации)
Увеличение времени на сайте и глубины просмотра.
Средняя длительность сессии вырастет на 30–40 секунд.
Пользователи станут просматривать на 1–2 страницы больше за визит (рост pages per session).
Снизится быстрый скролл до подвала без чтения контента.
Результат №4 (после отзывчивых форм и обратной связи)
Снижение числа брошенных форм и обращений в поддержку.
Количество незавершенных отправок форм уменьшится на 25–35%.
Сократится число повторных обращений в чат/почту
Повысится доверие к сайту (субъективно — меньше тревожности при взаимодействии).