Редизайн сайта банка

Hamkorbank

Сайт розничного банка в Узбекистане, на котором продукт находят за пару кликов, курс доллара всегда перед глазами, а карту или кредит можно оформить онлайн

Роль

Пользовательские исследования, дизайн, UI-kit, прототип

Результаты

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

Открыть сайт

Ситуация

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

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

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

Задача

Превратить сайт в канал онлайн-продаж и обновить его на основе исследований

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

Редизайн на основе исследований банка и внутренней аналитики.

UI-kit: единая библиотека компонентов для сайта.

Моя роль: пользовательские исследования, концепция под руководством лида, UI-kit и кликабельный прототип для desktop и mobile.

После: меню по аудиториям сверху, курс доллара в шапке, баннер и карточки продуктов

До: боковое меню слева и рекламный баннер

Главная страница до и после редизайна. Самые востребованные продукты видно сразу: их не нужно искать по меню, любой открывается с одного клика.

Исследования

Начала с данных банка и рынка, а потом пошла к людям

Рынок

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

Данные банка

Разобрала исследования по кредитам и дебетовым картам: кто клиенты и как они выбирают продукт. Атрибуты выбора карт стали бенефитами на страницах, а частые вопросы ушли в FAQ, чтобы снять нагрузку с колл-центра.

4 глубинных интервью

Понимания потребностей не хватало, и я провела интервью с клиентами банка о том, каким они видят Hamkorbank.

Что важно клиентам при выборе банка

Качество обслуживания58%
Удобство мобильного приложения36%
Безопасность средств32%
Скорость переводов29%
Репутация банка29%
Комиссия за переводы и платежи25%
Доступность банкоматов25%
Доставка18%
Бонусы за выполнение заданий10%
Рекомендации знакомых7%

Опрос 341 клиента банка, Андижан

Инсайты интервью

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

Людям в Узбекистане важно видеть в банке свою культуру и идентичность

О продукте хочется видеть минимум информации, только главное

Решения

Спроектировала новый сценарий и семь решений, которые выросли из исследований

01Навигация по трем аудиториям

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

Прототип: вкладки «Частным лицам» и «Для бизнеса» полностью меняют главную, а курс доллара в шапке ведет на страницу обмена

02Курс доллара в шапке и онлайн-конвертер

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

Хочу получить

Нужно заплатить1 202 000

Обменять в приложенииНайти отделение

1 USD = 12 020 сум · Курсы условные, для демонстрации

03Кредитный калькулятор

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

Сумма кредита

Срок кредита

Тип расчетаАннуитетный
равными частямиДифференцированный
по убыванию

Ежемесячный платеж

Ставка

ДокументыПаспорт

Оставить заявкуРасчет предварительный

04Пошаговые онлайн-заявки

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

05Фильтр вкладов

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

Раздел «Вклады» с фильтром по сумме, валюте и сроку и быстрыми чипсами

06Единый стиль с приложением

Сайт продолжает мобильное приложение банка: те же цвета, компоненты и логика, чтобы сервисы ощущались одним целым. Мобильную версию сайта собрала по тем же правилам.

Мобильное приложение Hamkor: главный экран с балансом, картами, вкладами и кредитами — Мобильное приложение

Мобильная версия сайта: главная с баннером карты HUMO и курсом доллара — Мобильная версия сайта

07Национальный паттерн

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

Баннер карты Humo с национальным паттерном

UI-kit

Собрала UI-kit и описала каждый компонент

Состав

Кнопки, инпуты, выпадающие списки, слайдеры, поля валюты и телефона, карточки услуг, тарифов и банковских карт.

Описание

Для каждого компонента: анатомия, состояния, размеры для desktop и mobile и пример использования в интерфейсе. Плюс кликабельный прототип сайта и мобильной версии для демонстрации и для разработчиков.

Результат

Карту теперь можно оформить прямо на сайте, самые востребованные продукты доступны в 1 клик, а курс доллара виден на каждой странице

глубинных интервью с клиентами банка

аудитории разделены уже на входе

решений выросли из исследований

С момента проектирования прошло три года, а сайт по-прежнему работает на этом дизайне. Он легко масштабируется под новые продукты и выглядит лаконично и современно.