Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

Привет! Меня зовут Дмитрий Сульман, я CMO в Callibri. Осенью 2019 года мы сделали полный ребрендинг: обновили визуальный стиль, сайт и чуть не сменили название. За год мы оценили, получилось ли решить поставленные задачи — теперь можно показать ребрендинг без эмоций и с фактами 😎

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

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

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

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

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

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

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

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

Итого, проблемы на старте работ:

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

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

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

В общем, на конец 2018 было понятно, что нужно полностью пересобирать визуальный стиль и переделывать сайт — перерисовывать весь дизайн и переписывать весь контент.

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

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

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

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

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

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

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

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

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri
Эти иллюстрации создали два разных дизайнера, а так сразу и не скажешь
Эти иллюстрации создали два разных дизайнера, а так сразу и не скажешь

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

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

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

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

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

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

Одна из первых версий новой главной страницы
Одна из первых версий новой главной страницы

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

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

В общем, ушли думать дальше.

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

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

Почему это удачный элемент:

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

Логотип

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

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri
Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

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

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

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

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

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

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

Структура

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

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

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

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

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

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

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

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

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

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

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

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

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

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

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

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

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

Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri

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

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

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

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

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

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

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

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

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

В контенте — обновить шаблоны email-рассылок.

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

4545
39 комментариев

На иллюстрации не Лев Толстой, это картина Бориса Кустодиева «Купец, считающий деньги»: https://www.pinterest.ru/pin/431360470549572254/

8
Ответить

Странно, что не было шутки про 'хуй простой' 

2
Ответить

Точно, спасибо! Но похож ведь)

Ответить

Вот это горе, конечно. Зачем так мучать буковки?)

5
Ответить

Они не жаловались!))

Ответить

А мне жаль что теперь нет птички, она была прям крутой фишкой

3
Ответить

Пришлось принести птицу в жертву

1
Ответить