Задача

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

История ребрендинга компании

Первое значительное изменение в дизайне случилось в конце 2018 года. Банк БелВЭБ не только освежил сайт, но и поменял логотип.

Стрелка, указывающая направление вверх, с крупной надписью БелВЭБ — главный символ банка и сегодня. А графитовый и белый цвета стали основными для сохранения преемственности от основного акционера — государственной корпорации развития «ВЭБ.РФ».

до 2018-го

2018-2021

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

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

2020 год.

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

Общий тренд развития банков и как это влияет на дизайн

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

Как стиль может повлиять на количество клиентов?

Средний возраст пользователей банковских продуктов — люди от 30 лет, но важно помнить, что сегодняшние студенты — это завтрашние успешные бизнесмены. Уже сейчас эти молодые люди используют различные финансовые продукты — при этом современные банковские услуги не ассоциируются у молодежи с сервисами, с которыми она может эффективно взаимодействовать. Что говорит молодежь? «Ходить в банки скучно, там не понимают нас, а мы не понимаем их». Здесь нет доверия. Однако исследования говорят, что никаких специфических финансовых продуктов молодой аудитории не нужно, но требуются другие коммуникации и впечатления, которые молодежь получает во взаимодействии с банком и сервисами, в том числе — и с сайтом. Нужно другое позиционирование старых добрых продуктов.

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

Этапы дизайна

При разработке интерфейсов банковских сервисов мы не используем готовых решений. Наши клиенты — это 80% банковского сектора Беларуси, и для каждого разрабатывается своя стратегия, проводится исследование рынка, определяется подходящий стек технологий.

Дизайн составляет существенную часть работ и состоит из следующих этапов:

• исследование и анализ,
• проектирование,
• прототипирование,
• визуальная стратегия и дизайн,
• документация.

А теперь по порядку:

— Исследование продукта и анализ аудитории

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

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

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

— Проектирование

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

Большая часть аудитории банковских сервисов — это мобильные пользователи, поэтому в проектировании большое значение уделяем механике мобильного использования.

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

Благодаря разделению на продукты и справочные (второстепенные) страницы, экран с 50 ссылками выглядит легко, а ориентироваться в нем просто.

— Прототипирование

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

— Визуальная стратегия и дизайн

Команда банка подготовила и презентовала нам совершенно новый UIKIT со стилями для продуктов в онлайне: были продуманы цвета, подобран прекрасный шрифт Cera Pro. Дополнительно использовались градиенты и 3D иконки в новом стиле Glassmorphism (глассморфизм). Все это определило вектор движения и в дизайне сайта.

А вот про цвета поподробнее.

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

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

И вот какое решение мы нашли.

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

Во-вторых, проектируем основные элементы на сайте: кнопки, табы, формы заявок, калькуляторы — и красим их в уже определенные ранее основные цвета. Например, все элементы взаимодействия (кнопки, селекты) окрашены в синий цвет. Элементы второго уровня (табы, слайдеры) — в розовый. Согласно подобным внутренним правилам строится дизайн всего сайта. Эти же цвета будут использованы в приложении и других сервисах. Так мы достигнем единства дизайна сайта и других приложений банка.

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

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

Бизнес и премиум

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

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

— Составление документации

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

Вывод

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

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

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

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

Попробуйте сами belveb.by :)