КХБ

Опубликовано: 16 декабря 2019

01цель

наша
миссия
и задачи

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

Проанализировать действующий сайт;
Исследовать сайты конкурентов;
Спроектировать прототипы страниц и продумать пользовательское взаимодействие;
Разработать дизайн-решение для сайта

02наши шаги

цели
работы

Анализ

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

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

Исследование веб-сайтов основных конкурентов банка, анализ их структуры, сбор данных

Прототип

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

Дизайн продукта

Разработка дизайн-концепции для сайт, работа с фирменным стилем банка

03детали

типографика
& цвета

Шрифт

Leto Sans

Regular

Bold

Основные цвета

Дополнительные цвета

04страницы

первый
концепт

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

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

Часть 1

Корпоративный сайт

Главная страница

Часть 1

Корпоративный сайт

Страница сравнения вкладов

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

Часть 1

Корпоративный сайт

Страница вклада

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

онлайн
банк

Часть 2

Онлайн банк

Главная страница

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

Внешний вид страницы можно настраивать. Объекты перемещаются с помощью перетаскивания.

Часть 2

Онлайн банк

Страница кредитной карты

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

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

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

05страницы

второй
концепт

Часть 1

Корпоративный сайт

Главная страница

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

Часть 1

Корпоративный сайт

Сравнение вкладов

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

Часть 1

Корпоративный сайт

Страница вклада

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

онлайн
банк

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

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

Часть 2

Онлайн банк

Главная страница

Часть 2

Онлайн банк

Страница кредитной карты

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