Советский пинап, SEO-портянки и Синица за 1000: как мы делали редизайн сайта, а сделали полный ребрендинг Callibri
Привет! Меня зовут Дмитрий Сульман, я CMO в Callibri. Осенью 2019 года мы сделали полный ребрендинг: обновили визуальный стиль, сайт и чуть не сменили название. За год мы оценили, получилось ли решить поставленные задачи — теперь можно показать ребрендинг без эмоций и с фактами 😎
Проблемы: back to 2018
Я пришел в компанию в октябре 2018 и увидел устаревший сайт, похожий на детище Франкенштейна.
Руку к нему явно приложили разные дизайнеры и маркетологи: на страницах «органично» уживались советский пинап, флэт и бог знает что еще.
При разработке старого сайта не учли, что продуктовая линейка может расширяться, визуальный стиль никто не прорабатывал. А компания быстро росла и развивалась: появлялись новые сервисы и функции, было много экспериментов с tone of voice. Как результат — множество новых страниц с текстами и иллюстрациями в разных стилях.
Такое положение дел отчасти связано с тем, что мы всё делаем своими силами. Не обращаемся в веб-студии и агентства, а используем компетенции наших же разработчиков, дизайнеров и маркетологов. При этом компетенция именно в разработке сайтов прокачана не была.
Внешний подрядчик мог бы сформулировать проблемы и показать на них пальцем, но изнутри это неочевидно. Я стал взглядом «со стороны».
Итого, проблемы на старте работ:
- Разный визуальный стиль на разных страницах сайта. При этом иногда стиль был фантасмагорическим — кто согласовал купца со счётами на странице коллтрекинга, никто не признается.
Разный стиль текста на разных страницах сайта. Некоторые из них были SEO-портянками и выглядели так, будто текст писал школьник-SEO-копирайтер с биржи по 50р. за 1 000 знаков.
- Отсутствовала информационная структура сайта. В Callibri есть два сервиса, у каждого из них свой набор функций. Раньше каждая функция была отдельной страницей в общем меню, группировки не было. Как следствие — неудобная и непонятная навигация.
По некоторым функциям продукта вообще не было страниц.
- В целом отсутствовала единая нить — то, как мы говорим о наших сервисах и как мы их визуализируем. Не было визуальной отстройки от конкурентов. Из фирменного стиля по сути был только логотип и больше ничего.
В общем, на конец 2018 было понятно, что нужно полностью пересобирать визуальный стиль и переделывать сайт — перерисовывать весь дизайн и переписывать весь контент.
Меняем визуальный стиль
Многие участники digital-рынка (сервисы, агентства и т.д.) используют темные цвета — синий, зеленый, иногда красный. А в графике у них часто используются изометрия, флэт. В образах бывают какие-то аллюзии к аналитике — дашборды с графикам и диаграммами. Такая вот особенность отрасли.
Мы же хотели выделиться среди них и визуально отстроиться. После серии экспериментов с разными стилями мы пришли к рисованной «карандашной» графике в трех цветах: черном, желтом и белом.
Желтый цвет на нашем рынке практически никто не использует, карандашную графику не используют совсем. Итого: если вы спросите: «У какого сервиса коллтрекинга синий дизайн?» — ответов может быть много. Если вы спросите: «У какого сервиса коллтрекинга черно-желтый карандашный дизайн?», ответ будет «Callibri».
Так что теперь мы используем эту стилистику везде — на сайте, в обложках блога, в рекламных креативах:
Плюсы есть, а минусы и подводные камни?
Без них не обошлось. Изначально создание каждой картинки занимало целый рабочий день дизайнера-иллюстратора. При этом у иллюстраций был авторский стиль, который трудно повторить.
Нам это не подходило: иллюстрации нужно создавать быстро и помногу. Поэтому мы упростили стиль. Теперь создание картинки занимает 1,5-2 часа и такую технику может воспроизвести практически любой иллюстратор.
А что с сайтом?
Для него мы тоже сделали иллюстрации, но были трудности. Сайт — лицо онлайн-сервиса, для него нужна была иллюстрация, которая четко отражает наш стиль.
Исторически коммуникация Callibri с аудиторией строится в достаточно неформальном режиме. Мы начинали как нишевый сервис для екатеринбургского digital-рынка: здесь все друг друга знают — не до официоза. А когда разрослись, дружеский подход остался.
В некотором смысле мы противопоставляем себя «серьезным щщам», на которых коммуницирует весь рынок. У нас же слово «прокачка» в дескрипторе.
И всё это иллюстрация должна отразить.
Изначально мы придумали дерево:
Символ стабильности и помощник в сторителлинге: информация о продуктах последовательно раскрывалась на ветках дерева. Но:
- Слишком пестро, да? Непонятно, за что зацепиться взглядом. Неразрывная иллюстрация отвлекает от основного контента и перетягивает внимание на себя.
- Не очень-то отражает наши ценности и вообще не имеет отношения к тональности коммуникации.
- Ее трудно применить где-то кроме главной страницы. Не делать же из сайта ботанический сад.
В общем, ушли думать дальше.
Пока изучали референсы, обратили внимание на один из популярнейших штампов корпоративных иллюстраций — рукопожатие с фотостока. Мы решили его обыграть и нарисовали руки.
Тут куча метафор — и рука помощи, и сотрудничество, и поддержка. Но при этом всё немного со стебом. Обыграли даже Сикстинскую капеллу, но тут я не буду углубляться, чтобы не оскорбить ничьи чувства.
Почему это удачный элемент:
- Отражает ценности и тональность коммуникации.
- Можно использовать где угодно. У нас руки иллюстрируют функции продукта на главной странице; указывают, на что обратить внимание на скриншотах; появляются на обложках статей и из них получились хорошие стикеры для Telegram — пользуйтесь.
- Вызывает эмоции, но тут зависит от окружающего контекста.
Логотип
Старый логотип был вроде бы неплохим и узнаваемым. Но птица-оригами — сложный элемент, к тому же он был в красно-зелено-синих тонах и вообще не подходил под новую стилистику. А еще тренды таковы: логотипы становятся проще, картинки из них исчезают либо становятся очень простыми, шрифты становятся более рублеными и строгими.
Так что мы сделали простой текстовый лого, без всяких излишеств. В основе лежит растущий график (мы же сервис аналитики, ну). Из него формируется картинка-миниатюра.
Позже мы решили вообще отказаться от птичьей тематики.
Название Callibri родилось случайно. Коллтрекинг — отслеживание звонков, call — звонок, добавляем ibri и вроде прикольно — Колибри. Но мы стали заложниками названия. Колибри — это птицы. В итоге у нас птицы были везде, даже тарифы назывались Дятел-Синица-Пингвин. Но, как и сайт, это было сделано наполовину: где-то птицы были (тарифы МультиТрекинга), а где-то нет (тарифы МультиЧата). У нас было два пути: либо продолжать везде топить за птиц, либо совсем их убрать. Результат очевиден.
Мало того! Мы почти решили сделать кардинальный ребрендинг и сменить название на Callibró. Вроде бы и преемственность названия сохраняется, и от птиц уходим, и делаем в названии сдвиг в неформальную сторону: call i Bro (типа бро, брателла). Даже зарегали домен callib.ro — пришлось предоставлять документы нашего фаундера в румынский минсвязи.
Но потом от этой идеи отказались. Слишком большой риск, что новое название не будут ассоциировать со старыми нами (а у Колибри есть известность и репутация на рынке). Плюс риск потери позиций в поисковых системах при переезде на новый домен. Еще возникли проблемы с регистрацией товарного знака: кто-то уже зарегал Callibro до нас. В итоге уже нарисованный лого Callibro переделали обратно в Callibri.
Что сделали с сайтом и контентом
Структура
Тут особо говорить не о чем. Нарисовали майндмэп, на котором разложили все страницы сайта по полочкам, учли требования SEO — какие запросы куда будем приземлять, на самих страницах сделали блочную структуру.
Контент страниц
Переписали тексты нескольких десятков страниц — теперь всё написано в едином стиле, нет портянок SEO-текстов. Контент подкреплен фирменными иллюстрациями и иконками — всё нарисовали сами, стока нет вообще.
Наконец-то сделали нормальную страницу «О компании». В прошлой версии на ней были просто фотографии сотрудников и контакты. Фото мы оставили в виде анимированного блока, но добавили рассказ про нашу историю и ценности.
Добавили видеоотзывы клиентов — они есть на соответствующих продуктовых страницах и на отдельной странице для тех, кто целенаправленно ищет отзывы о нас.
В отличие от текстовых отзывов, где можно переврать и дописать, видео выглядит более убедительным. Видно, что это не актеры, а настоящие клиенты: они стесняются, заикаются, называют свою должность и компанию вслух. Теперь со страницы отзывов регулярно приходят лиды.
Кстати, количество клиентов на этой странице автоматически обновляется раз в сутки. Перейдите на нее сейчас, скорее всего, количество клиентов изменилось.
Новый раздел «Помощь»
Старый FAQ был примерно таким же, как остальной сайт — с непроработанной структурой, многоуровневой вложенностью. Найти в нем что либо было довольно трудно, а инструкции множились в геометрической прогрессии. Если клиент просил ссылки на инструкции, чтобы настроить сервисы самостоятельно — приходилось скидывать большой пугающий список.
В итоге сделали новый раздел «Помощь» с одним уровнем вложенности, а 100+ коротких инструкций переработали в последовательные гайды. Теперь можно дать клиенту одну ссылку на блок инструкций и он действительно выполнит их сам.
Личный кабинет сервиса
Пока только перекрасили сайдбар и другие элементы интерфейса, чтобы они сочетались с новым визуальным стилем. Но в сентябре начнем обновлять разделы кабинета — не только цвета, но и расположение блоков, подсказки и все остальное.
Фирстиль остальных элементов бренда и корпоративных носителей
Смена лого и визуального стиля в вебе логично повлекли за собой редизайн всего: от деловой документации до наклеек на ноутбуки.
Мерч тоже изменился: у нас появились толстовки, футболки, рюкзаки, пледы, шапки, носки, тканевые сумки и термо-стаканы. Часть из этого сотрудники получают в подарок на день рождения, часть — на Новый год, еще часть — за иные заслуги.
Итоги: стоило ли заморачиваться?
Однозначно стоило.
Есть объективные показатели. Конверсия в лид по органическим каналам трафика увеличилась на 30%. Техподдержка тратит меньше времени на объяснение настроек: многие клиенты теперь делают все самостоятельно по инструкциям.
Есть субъективные показатели. Сайт стал нормальным во всех смыслах — контент, навигация, дизайн — им удобно пользоваться. В целом появился единый визуальный стиль бренда, по которому нас узнают — в рекламе, соцсетях, офлайне. И который дифференцирует нас от рынка — подобной стилистики нет ни у кого.
И теперь внешний вид Callibri полностью соответствует внутреннему: немного хулиганский, но дружелюбный, гибкий и отзывчивый.
Так что да, полгода работы прошли не зря.
Что осталось?
На сайте — сделать редизайн блога и еще пары некритичных разделов (Генератора UTM-меток, Словаря и Календаря маркетолога). На них изначально все было не так плохо, как на продуктовых страницах, поэтому ими решили заняться в последнюю очередь.
В контенте — обновить шаблоны email-рассылок.
В кабинете — почти все 🙂 Сначала возьмемся за самые устаревшие, но самые используемые разделы, и постепенно приведем все к единому виду. Stay tuned.