Как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

Проблемы: back to 2018

Я пришел в компанию в октябре 2018 и увидел устаревший сайт, похожий на детище Франкенштейна.

Главная страница сайта изначально была основана на дескрипторе «Сервисы работы с клиентским потоком». А потом дескриптор сменили…

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

Страница партнерской программы

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

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

• Разный стиль текста на разных страницах сайта. Некоторые из них были SEO-портянками и выглядели так, будто текст писал школьник-SEO-копирайтер с биржи по 50р. за 1 000 знаков.
• Отсутствовала информационная структура сайта. В Callibri есть два сервиса, у каждого из них свой набор функций. Раньше каждая функция была отдельной страницей в общем меню, группировки не было. Как следствие — неудобная и непонятная навигация.
• По некоторым функциям продукта вообще не было страниц.
• В целом отсутствовала единая нить — то, как мы говорим о наших сервисах и как мы их визуализируем. Не было визуальной отстройки от конкурентов. Из фирменного стиля по сути был только логотип и больше ничего.

Меняем визуальный стиль

Многие участники digital-рынка (сервисы, агентства и т.д.) используют темные цвета — синий, зеленый, иногда красный. А в графике у них часто используются изометрия, флэт. В образах бывают какие-то аллюзии к аналитике — дашборды с графикам и диаграммами. Такая вот особенность отрасли.

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

Это обложка публикации в корпоративном блоге — графику изначально обкатывали на нем

 
Желтый цвет на нашем рынке практически никто не использует, карандашную графику не используют совсем. Итого: если вы спросите: «У какого сервиса коллтрекинга синий дизайн?» — ответов может быть много. Если вы спросите: «У какого сервиса коллтрекинга черно-желтый карандашный дизайн?», ответ будет «Callibri».

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

Плюсы есть, а минусы и подводные камни?

Нам это не подходило: иллюстрации нужно создавать быстро и помногу. Поэтому мы упростили стиль. Теперь создание картинки занимает 1,5-2 часа и такую технику может воспроизвести практически любой иллюстратор.

Эти иллюстрации создали два разных дизайнера, а так сразу и не скажешь.

А что с сайтом?

Изначально мы придумали дерево:

Символ стабильности и помощник в сторителлинге: информация о продуктах последовательно раскрывалась на ветках дерева. Но:

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

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

Тут куча метафор — и рука помощи, и сотрудничество, и поддержка. Но при этом всё немного со стебом. Обыграли даже Сикстинскую капеллу, но тут я не буду углубляться, чтобы не оскорбить ничьи чувства.

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

Логотип

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

Позже мы решили вообще отказаться от птичьей тематики.

Название Callibri родилось случайно. Коллтрекинг — отслеживание звонков, call — звонок, добавляем ibri и вроде прикольно — Колибри. Но мы стали заложниками названия. Колибри — это птицы. В итоге у нас птицы были везде, даже тарифы назывались Дятел-Синица-Пингвин. Но, как и сайт, это было сделано наполовину: где-то птицы были (тарифы МультиТрекинга), а где-то нет (тарифы МультиЧата). У нас было два пути: либо продолжать везде топить за птиц, либо совсем их убрать. Результат очевиден.

Больше никаких пингвинов и дятлов

Мало того! Мы почти решили сделать кардинальный ребрендинг и сменить название на Callibró. Вроде бы и преемственность названия сохраняется, и от птиц уходим, и делаем в названии сдвиг в неформальную сторону: call i Bro (типа бро, брателла). Даже зарегали домен callib.ro — пришлось предоставлять документы нашего фаундера в румынский минсвязи.

Что сделали с сайтом и контентом

Структура

Контент страниц

Наконец-то сделали нормальную страницу «О компании». В прошлой версии на ней были просто фотографии сотрудников и контакты. Фото мы оставили в виде анимированного блока, но добавили рассказ про нашу историю и ценности.

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

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

Блог

Как бы мы ни любили наш блог, мы понимали, что у него есть проблемы. Переизбыток текста и разные размеры обложек рассеивали внимание – это часто мешало читателям найти нужную статью.

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

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

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

Шаблон рассылок

Волна обновлений коснулась и наших шаблонов для email-рассылок (подписывайтесь, если еще нет). Сплошной текст с картинками и кнопками уступил место блокам. Новый дизайн визуально разделяет границы контента, адаптируется под тематические рассылки и позволяет делать акцент на нужных статьях, ивентах и новостях.

Теперь все выглядит динамично и компактно, а еще новые шаблоны лучше адаптированы под мобильную версию.

Куда нагляднее, не так ли?

Календарь маркетолога

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

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

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

Словарь маркетолога

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

И как тут разбираться?

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

Кликабельные буквы вверху страницы сразу перенесут вас к нужному столбцу. 

Новый раздел «Помощь»

Старый FAQ был примерно таким же, как остальной сайт — с непроработанной структурой, многоуровневой вложенностью. Найти в нем что либо было довольно трудно, а инструкции множились в геометрической прогрессии. Если клиент просил ссылки на инструкции, чтобы настроить сервисы самостоятельно — приходилось скидывать большой пугающий список.

Старая версия раздела FAQ

В итоге сделали новый раздел «Помощь» с одним уровнем вложенности, а 100+ коротких инструкций переработали в последовательные гайды. Теперь можно дать клиенту одну ссылку на блок инструкций и он действительно выполнит их сам.

Личный кабинет сервиса

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

Так кабинет выглядел в старом цвете

А так — в новом

 

Фирстиль остальных элементов бренда и корпоративных носителей

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

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

Наш CEO — Иван Шкиря.

Итоги: стоило ли заморачиваться?

Что осталось?