Банк Инноваций и Развития
01
Описание
Клиент
Банк Инноваций и Развития
Задача
Комплексное обновление сайта российского банка:
- Упрощение структуры и переработка контента сайта
- Автоматизация и изменение процессов под новые требования
- Добавление удобных фильтров в продуктовые страницы
- Разработка быстрой и удобной системы управления сайтом Банка
- Создание современного дизайна и удобного интерфейса сайта
- Адаптация сайта под мобильные устройства
- Обновление логотипа и фирменного стиля Банка
02
Цели
Изначально при первой постановке задачи нам требовалось лишь «осовременнить» дизайн-шаблоны. Однако, детально изучив сайт, мы пришли к выводу, что проще, дешевле и эффективней разработать новый сайт с полной переработкой функционала и контента.
Предыдущая версия сайта служила верой и правдой более 13 лет. За это время все правила поддержки были забыты и переосмыслены в нелучшую сторону. Накопилось множество недочетов и ошибок. Система управления, которая должна была упростить жизнь сотрудникам Банка, не использовалась совсем. Структура сайта и контент превратились в сложных монстров. А сам дизайн и стиль не вызывали никакого доверия у посетителей. Отсутствие адаптации под мобильные устройства, сложная схема презентации контента и невозможность сравнения услуг Банка, делали свое дело — количество отказов по статистике в метрике составляло более 50 процентов.
Все это говорило о том, что Банк остался далеко в прошлом, не желая развиваться и быть в ногу со временем, не смотря на свое инновационное название. Таким образом простой редизайн превратился в полноценную и глобальную перезагрузку сайта с акцентом на функциональную составляющую и автоматизацию процессов. Также было решено немного изменить и лицо Банка, доработав логотип и часть фирменного стиля.
Логотип
Приступив к задаче по разработке новой версии сайта, мы пришли к мысли, что есть деталь, которая никак не стыкуется с тем, чего мы хотим достичь. Деталь, которая стопорит эмоционально весь процесс работы, которая идет вразрез всей атмосфере иновационности и развития. Деталь, которая должна задавать весь ритм и поддерживать настроение компании. Особенно той компании, в названии которой заложен весь смысл динамичности, современности и технологичности.
Этой деталью является логотип — лицо и основа визуальной идентификации компании. Начертание текстовой части старой версии логотипа было основано на антиквенном шрифте. Засечки в буквах создавали определенную атмосферу роскоши, старины и застоя. Эта атмосфера никак не пересекалась со словами в названии компании и не поддерживалась идеей и целями, стать действительно современным и инновационным Банком.
Чтобы создать новое настроение, но при этом не потерять прежнюю узнаваемость Банка, было решено доработать логотип. Таким образом мы избавились от засечек, подобрали и модифицировали новый шрифт, и разработали действительно современный и строгий логотип, подходящий Банку, название которого состоит из слов «Инновация» и «Развитие».
Фирменный стиль
Создавая фирменный стиль для Банка, мы заложили в основу главные правила: все детали должны быть простыми, реалистичными и понятными.
Все оформление должно строиться на основе простых форм, легкой типографике с необходимыми акцентами и lifestyle-фотографий, без добавления чужеродной графики и коллажирования со стилезацией. Не допускается добавление инородных цветов и шрифтовых начертаний.
Банк должен создавать атмосферу строгой, дружелюбной, клиентоориентированной и современной команды. Все материалы должны создаваться по общим правилам, без траты времени на сложный креатив и оформление.
Также важнейшей задачей являлось и создание такого фирменного стиля, который бы не повторял стиль Сбербанка, при схожем наборе родных цветов.
Структура сайта
Структура предыдущей версии сайта была нелогичной, сложной и непонятной, даже для сотрудников Банка. Некоторая информация устарела, какие-то определения противоречили друг другу на разных страницах, очень трудно было найти необходимое. Проще было, наверное, позвонить в Банк и запросить информацию прямо по телефону.
Мы проверили на предмет актуальности всю информацию со старого сайта и составили новую карту, после чего структурировали все данные по разделам. После этого добавили новую информацию, которая ждала своего часа, и обновили всю структуру.
Данные в каждом разделе мы причесали и отформатировали, чтобы можно было быстро выделить глазом важную информацию. Привели к общему виду и параметры на продуктовых карточках и страницах услуг, чтобы клиент смог сравнить показатели и выбрать то, что больше подходит. До этого никаких сравнительных инструментов на сайте не было.
Проектирование и дизайн
На основе обновленной информационной структуры разработали прототип сайта, на котором проверили работоспособность всех функциональных блоков и карту переходов по всему сайту.
После этого приступили к оформлению и проработке дизайна страниц сайта, а также подготовили и отрисовали макеты для всех типов экранов, чтобы сайт правильно отображался и на комьютерах, и на мобильных устройствах.
Главная страница
Поскольку Банк Инноваций и Развития обслуживает клиентов по трём главным направлениям, и каждое направление является равноценным по приоритету, мы решили разработать для сайта три главных страницы, как три важных точки входа для различных клиентов.
Все главные страницы по структуре похожи друг на друга, имеют одинаковые презентационные и информационные блоки, и отличаются лишь набором услуг и описанием контента.
Ниже услуг идут контентные блоки и промо-блоки из параллельных направлений, сделанные по единому шаблону.
Страницы вкладов
На главной странице вкладов для физических лиц пользователь может ввести желаемые коэффициенты, и система автоматически отберёт подходящие предложения и покажет рузельтирующие цифры.
Нет необходимости ходить по страницам всех предложений и просчитывать по отдельности все детали. Теперь достаточно выбрать выгодный тариф на агрегирующей странице, и уже после этого изучить на странице вклада всю информацию более детально.
На внутренней странце вклада также можно ввести вводные параметры, и система автоматически покажет, сколько клиент заработает на вкладе в конце срока.
Система также сделает сравнение текущего вклада с другими вкладами. Таким образом пользователь может без труда подобрать для себя наиболее выгодный тариф с минимальными усилиями.
Страницы банковских карт
По схожему принципу работает и раздел с банковским картами как для физических, так и для юридических лиц.
На общей странице можно сравнить предложения по всем типам валюты, а на внутренней странице уже изучить детально особенности и заказать выпуск карты.
Обмен валюты и денежные переводы
Самыми популярными и используемыми услугами среди физических лиц на сайте Банка являются обмен валюты и денежные переводы.
В первой итерации глобального изменения сайта мы не стали сильно вглубляться в специфику и переделывать функционал с учетом многих недоработок. Лишь причесали текущий функционал.
11
Управление документами
На старом сайте все публичные документы размещались на одной странице, которую было сложно найти. Документы не были никак структурированы.
Еще печальней, что у менеджеров Банка не было никакой интранет-системы, где они могли бы держать в актуальном состоянии все документы, и при этом как-то обновлять информацию на сайте. Поэтому в поисках актуальной информации менеджеры просто открывали сайт Банка и искали информацию там. То есть, если пользователь на сайте не нашёл информацию, то менеджер также никак её не найдет.
Наша команда разработала внутреннюю систему, в которой мы чётко структурировали по тематике и разделам весь набор публичных документов. Система поддерживает версионность документов, при этом последние актуальные версии автоматически подгружаются на сайт в свой раздел на определенную станицу в определенную вкладку.
Формы заявок
Для оптимизации обработки заявок от клиентов для каждой услуги были разработаны отдельные формы заявок с уникальным набором полей.
Контентные страницы
Информация на страницах описания Банка была полностью переформатирована, структурирована и разделена на смысловые блоки.
Премиальные карты
До обновления информация о премиальной карте размещалась на отдельном промо-сайте, который по стилистике никак не был связан с основным сайтом. Поддержка осуществлялась разными командами, что приводило к нестыковкам в описании.
Для всего глобального раздела премиального обслуживания мы поменяли схему цветов, при этом оставив дизайн-систему от всего сайта. А для отдельного продукта премиальных карт мы создали большой лендинг с отдельной черной схемой оформления.
15
Система управления сайтом
Специально для Банка мы разработали с нуля систему управления, которая заточена непосредственно под функционал сайта и не имеет ничего лишнего, что могло бы помешать быстрой работе и удобному взаимодействию с контентом.
При своей видимой простоте, «админка» имеет все необходимые инструменты для обслуживания всех модулей сайта.
Результаты
Показатели
Благодаря полной переработке стуктуры сайта, обновлению информации, улучшению сценариев, внедрению нового функционала, исходя из статистики метрики: значительно увеличилось время пребывания посетителей на сайте, в 15 раз (сами удивлены) уменьшился процент отказов, увеличилось количество заявок с сайта и количество просмотров всех страниц. Согласно опросу 89 процентам посетителей понравились изменения на сайте, связанные с удобством, оформлением и простотой поиска необходимой информации.
Автоматизация и рестуктуризация
Упростилась работа менеджеров по поддержке сайта, многие процессы стали полностью автономными и больше не требуют участия специалистов. Многие процессы были ускорены и автоматизированы.
Адаптация под мобильные устройства
Поскольку старый сайт не имел никаких мобильных версий, показатели в метрике после запуска нового сайта просто взлетели. Во времена, когда 50 процентов трафика приходятся на теефоны, иметь адаптацию под меньшие экраны необходимо обязательно.
Главный итог
После запуска новый сайт просуществовал всего пару месяцев. Было запланировано большое количество улучшений и итераций по развитию и внедрению новых идей. Но. У Банка отозвали лицензию. Отлично, работаем дальше...
