Shape 2 Created with Sketch. Shape 2 Created with Sketch. Shape 2 Created with Sketch. 1588D71D-671A-40A9-96DE-BF5F3C267598 Created with sketchtool. 539A0822-23D1-4EB0-A2B6-ADC1427D73FD Created with sketchtool. BE83D970-80BD-429F-8FEF-15320EFC25BD Created with sketchtool. icon-consulting fb Created with Sketch. F471C7B0-93AA-4A24-B0CB-8EEE8AA343E7 Created with sketchtool. Page 1 Created with Sketch. 8E691C04-FCB2-4D28-A161-E18CE8F4274A Created with sketchtool. icon-increase2 A00BE9EE-9E2C-4B16-A7A4-7ADF0D205D60 Created with sketchtool. 81897709-C9B7-4E51-8F7A-22FEB68F7CAE Created with sketchtool. D2397EF4-D11A-47C4-B4D1-5C8735A936A1 Created with sketchtool. icon-mail microphone Created with Sketch. icon-mvp icon-phone Oval 20 Created with Sketch. icon-research icon-research2 Group 36 Created with Sketch. icon-roadmap 58CDFB41-56B4-4914-9D32-F64663D44F09 Created with sketchtool. icon-team tie Created with Sketch. Imported Layers Copy 6 Created with Sketch. whiskey 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

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