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

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

06 июля 2021 7 0 105
Осенью 2019 года мы сделали полный ребрендинг: обновили визуальный стиль, сайт и чуть не сменили название. За прошедшее время мы оценили, получилось ли решить поставленные задачи — теперь можно показать ребрендинг без эмоций и с фактами 😎 

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

Я пришел в компанию в октябре 2018 и увидел устаревший сайт, похожий на детище Франкенштейна.
Как сделать редизайн сайта
Главная страница сайта изначально была основана на дескрипторе «Сервисы работы с клиентским потоком». А потом дескриптор сменили…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В некотором смысле мы противопоставляем себя «серьезным щщам», на которых коммуницирует весь рынок. У нас же слово «прокачка» в дескрипторе.

И всё это иллюстрация должна отразить.

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

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

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

Логотип

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

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

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

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

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

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

Структура

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

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

Переписали тексты нескольких десятков страниц — теперь всё написано в едином стиле, нет портянок SEO-текстов. Контент подкреплен фирменными иллюстрациями и иконками — всё нарисовали сами, стока нет вообще.

Наконец-то сделали нормальную страницу «О компании». В прошлой версии на ней были просто фотографии сотрудников и контакты. Фото мы оставили в виде анимированного блока, но добавили рассказ про нашу историю и ценности.
Примеры раздела о компании
Добавили видеоотзывы клиентов — они есть на соответствующих продуктовых страницах и на отдельной странице для тех, кто целенаправленно ищет отзывы о нас.
zz.png
В отличие от текстовых отзывов, где можно переврать и дописать, видео выглядит более убедительным. Видно, что это не актеры, а настоящие клиенты: они стесняются, заикаются, называют свою должность и компанию вслух. Теперь со страницы отзывов регулярно приходят лиды.

Кстати, количество клиентов на этой странице автоматически обновляется раз в сутки. Перейдите на нее сейчас, скорее всего, количество клиентов изменилось.

Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Однозначно стоило.

Есть объективные показатели. Конверсия в лид по органическим каналам трафика увеличилась на 30%. Техподдержка тратит меньше времени на объяснение настроек: многие клиенты теперь делают все самостоятельно по инструкциям.

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

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

Так что да, полгода работы прошли не зря.

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

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

В кабинете — почти все 🙂 Сначала возьмемся за самые устаревшие, но самые используемые разделы, и постепенно приведем все к единому виду. Stay tuned.

Мы написали эту статью для VC.ru, а теперь дополнили последними обновлениями и публикуем здесь.

Поделиться:

Советуем прочитать:

«Контент-маркетинг не работает!», или Как готовить КМ правильно
27.08.2020 3 26
10 авторских YouTube-каналов про маркетинг и еще 5 познавательных видео
06.05.2020 0 6
Алгоритм создания контент-стратегии — от выбора цели до частых ошибок
10.06.2021 0 5