Shape 2 Created with Sketch. Shape 2 Created with Sketch. Shape 2 Created with Sketch. 539A0822-23D1-4EB0-A2B6-ADC1427D73FD Created with sketchtool. BE83D970-80BD-429F-8FEF-15320EFC25BD Created with sketchtool. fb Created with Sketch. Imported Layers Copy 4 Created with Sketch. Page 1 Created with Sketch. 8E691C04-FCB2-4D28-A161-E18CE8F4274A Created with sketchtool. icon-increase2 icon-mail icon-phone Oval 20 Created with Sketch. icon-research icon-research2 Group 36 Created with Sketch. Imported Layers Copy 6 Created with Sketch. Imported Layers Copy 5 Created with Sketch. LOGO 50B11FD7-22F2-4934-A094-70A3E7FBFD64 Created with sketchtool.
Ко всем проектам

Локо-Банк

Разработка корпоративного сайта с каталогом банковских продуктов

250 000

посетителей

90+

банковских продуктов

Коротко о компании
Универсальный коммерческий банк, основанный в 1994 году. Занимает 4 место в рэнкинге банков по объему кредитования МСБ по итогам 2014 года («Эксперт РА»), входит в ТOP-10 банков по количеству выданных гарантий на исполнение госконтрактов и TOP-15 самых автокредитных банков России. Основными направлениями работы являются кредитование предприятий малого и среднего бизнеса и розничное направление.
Адрес сайта
Денис Зверик, начальник управления рекламы и маркетинга Локо-Банка (ДЗ)
Виктор Антонов, CX-директор Aero (ВА)
Какая задача стояла перед вами на старте работы с Локо-Банком?
ВА: Основными направлениями работы Локо-Банка являются кредитование предприятий малого и среднего бизнеса, а также розничное направление. Перед нами стояла задача сделать сайт эффективным инструментом продаж, разработать функционал для продажи услуг через сайт, увеличить конверсионность продуктовых страниц.

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

Как ребрендинг повлиял на новый дизайн?
ДЗ: При разработке нового сайта мы сознательно не пошли по пути «креатив в угоду функциональности», который стремительно набирает популярность в последние годы в интернет-пространстве и все чаще проявляется в банковских сайтах.

ВА: Новый дизайн Локо-Банка строится на сочетании простой и близкой аудитории тональности сообщений с рукописными слоганам, созданных в технологии Lettering. На первых порах мы строго руководствовались фирменным стилем, использовали только текстовые начертания и copy-based коммуникацию, без изображений. Однако по результатам исследования целевой аудитории мы выяснили, что такой подход оказался недостаточно эмоциональным. В результате, в розничных направлениях сайта мы начали использовать тематические фотографии.
Главная страница
Цель и польза проекта
Сделать сайт эффективным инструментом продаж, увеличить конверсионность продуктовых страниц
Переработать структуру сайта, облегчить навигацию по основным продуктам
Мотивировать клиентов к использованию системы "банк-клиент"
Снизить нагрузку на кол-центр в пользу самообслуживания на сайте
Реализовать новую коммуникационную и креативную стратегию
Промо-изображения не мешают пользоваться сайтом с мобильных устройств?
ДЗ: Сегодня более 30% интернет-пользователей заходят в сеть со смартфонов или планшетов, и их число с каждым годом увеличивается. Следуя этому тренду, сайт Локо-Банка является полностью адаптивным , то есть сайт автоматически подстраивается под размер экрана устройства, с которого зашел пользователь. Таким образом, клиент получает удобный и такой же функциональный интерфейс сайта, как при заходе с компьютера или ноутбука.

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

В чем заключается концепция адаптивности?
ВА: Мы не прорисовываем все адаптивные состояния всех страниц, но делаем гайд, помогающий верстальщикам адаптировать страницы под разные устройства и нужды. В нем прописаны все ключевые элементы сайта. Все самые важные элементы (такие, как «шапка», «подвал», баннеры и навигации) мы отрисовываем во всех состояниях. А более простые разделы перестраиваются каждый раз, исходя из прописанной в гайде логики. Например, мы определяем, что все заголовки статей будут перестраиваться в зависимости от устройства – к примеру, на ноутбуке их ширина будет составлять 22 пикселя, на мобильном устройстве - 16 пикселей, а на HD-дисплее - 32 пикселя. Фактически, при такой концепции дизайнер делает часть работы за верстальщика. Такие же правила прописываются для таблиц, подписей к рисункам и тд. Это позволяет значительно сократить время на разработку дизайна без потери качества. В общей сложности при создании сайта Локо-Банка мы сделали 70 макетов страниц, а для всех остальных написали правила адаптации.

Еще одна специфика дизайна - это раздел для VIP-клиентов. Он наследует принципы построения интерфейса обычных страниц сайта, но выполнен в других цветах и имеет другое графическое наполнение. Это создает другую атмосферу и позволяет VIP-клиентам чувствовать свою уникальность.
Задачи
Сделать удобную навигацию в противовес старой сложной
Упростить управление контентом
Разработать функционал для продажи услуг через сайт
Разобраться с корректным отображением на всех устройствах
Спроектировать новую архитектуру сайта и провести usability-тестирование
Разработать короткие формы заявок на всех продуктовых страницах
Разработать адаптивный дизайн для удобства пользования с мобильных устройств
Теперь немного про функционал сайта. Что вы сделали для того, чтобы повысить число продаж?
ДЗ: В новом проекте мы стремились сделать сайт максимально удобным для посетителя: не перегружать сайт «лишними» страницами, сделать адаптивный дизайн, чтобы было удобно работать с сайтом со смартфона. Разработать различные виды простого визуального сравнения продуктов, чтобы клиенту не приходилось заходить на страницу каждого продукта отдельно и пытаться сравнить их в голове.

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

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


ДЗ: Помимо этого, все калькуляторы обладают функцией предзаполнения полей. Когда клиент рассчитывает условия продукта и, остановившись на приемлемых для себя параметрах, решает подать заявку, ему достаточно нажать кнопку «отправить заявку» - и в окне заявки автоматически будут заполнены поля с параметрами продукта, которые пользователь уже выбрал. Это позволяет сэкономить время клиента на заполнение 3-7 полей заявки.


Как вы меняли навигацию?
ВА: Навигацию мы тоже значительно упростили. Мы проанализировали карту движения клиентов по сайту и сократили главное меню, сфокусировав на несколько самых важных разделов: «частным лицам», «корпоративным клиентам», «малому и среднему бизнесу» и private banking (для vip-клиентов).


ДЗ: Теперь, клиенту сразу понятно где именно расположена интересующая его информация: все продукты и предложения доступны в один-два клика, что значительно увеличивает показатели usability с точки зрения клиентского опыта.


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

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


Какие ещё интересные «фишки» были реализованы на сайте?
ДЗ: Карта офисов стала полностью интерактивной – клиент выбирает какую операцию хотел бы совершить в специализированных фильтрах, и сайт показывает ближайшее отделение с контактными данными, временем работы этого отделения, текущими курсами валют в выбранном отделении.

Немаловажными также являются некоторые «фишки» сайта, позволяющие сэкономить время пользователя. Например, на странице «Ипотека» помимо условий ипотечных программ и калькуляторов, посетитель сайта видит все объекты, аккредитованные Локо-Банком, на карте. Выбрав подходящий объект, пользователь получает основную информацию о данной недвижимости и может перейти на сайт объекта прямо с его карточки на сайте Локо-Банка. Таким образом, нет необходимости переходить в поисковик и в нем искать сайт объекта
Решения и процессы
Переход от навигации по профилю пользователя к навигации по продуктам.
Непрерывная пользовательская цепочка «EXPLORE – BUY – TRACK».
Отказ от табличного представления данных в пользу интерактивных калькуляторов и инфографичного представления.
Мотивирующая статистика и удачный опыт в цифрах для ключевых продуктов.
Мотивирующая статистика и удачный опыт в цифрах для ключевых продуктов.
Полная интеграция платформы с информационной системой банка.
Шифрованный протокол HTTPS для безопасности информации, которую вводят пользователи при работе с калькуляторами и отправке онлайн-заявки.
Шаблоны и конструкторы лендингов новых предложении и продуктов с помощью готовых блоков и специального интерфейса.
Геолокационный сервис и интерактивная карта отделений.
Интерактивный график изменения курсов валют ЦБ, с информацией в реальном времени о курсах покупки и продажи в отделениях банка.
Общий результат
Спроектирован сквозной клиентский опыт выбора, покупки и использования продуктов на сайте и в отделениях банка.
Переработана структура, навигация и продуктовые страницы с акцентом на визуализацию преимуществ и персонализацией под клиента.
Реализованы интерактивные калькуляторы для всех продуктов банка с возможностью отправки онлайн-заявки.
Разработан раздел "Карьера" с возможностью отправить резюме, интеграция с внутренней информационной системой.
Отзыв клиента
Денис Зверик, начальник управления рекламы и маркетинга Локо-Банка:
«Мы стремились сделать сайт максимально удобным для посетителя: не перегружать сайт «лишними» страницами, сделать адаптивный дизайн, чтобы было удобно работать с сайтом со смартфона. Разработать различные виды простого визуального сравнения продуктов, чтобы клиенту не приходилось заходить на страницу каждого продукта отдельно и пытаться сравнить их в голове. Уверен, что клиенты оценят наше стремление сделать сайт максимально удобным, простым и функциональным.»
Платформа и интеграции
Платформа: «1С:Битрикс»
ERP: внутренняя система банка
Система управления приложениями AppStore и GooglePlay
Другие проекты
Расскажите о проекте
Подпишитесь на рассылку о eCommerce

Благодарим вас за подписку! В ближайшее время пришлем вам интересные статьи

Этот адрес уже подписан на нашу рассылку

eCommerce стикеры №1

Мы нарисовали первый eCommerce стикерпак, чтобы вам было еще проще обмениваться своими эмоциями!

Telegram iMessage

eCommerce стикеры №1

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