Привет! Меня зовут Дмитрий Сульман, я 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 решает несколько задач, в одну иллюстрацию их не уместить. Поэтому сделали анимациюЛоготипСтарый логотип был вроде бы неплохим и узнаваемым. Но птица-оригами — сложный элемент, к тому же он был в красно-зелено-синих тонах и вообще не подходил под новую стилистику. А еще тренды таковы: логотипы становятся проще, картинки из них исчезают либо становятся очень простыми, шрифты становятся более рублеными и строгими.Так что мы сделали простой текстовый лого, без всяких излишеств. В основе лежит растущий график (мы же сервис аналитики, ну). Из него формируется картинка-миниатюра.Позже мы решили вообще отказаться от птичьей тематики. Название Callibri родилось случайно. Коллтрекинг — отслеживание звонков, call — звонок, добавляем ibri и вроде прикольно — Колибри. Но мы стали заложниками названия. Колибри — это птицы. В итоге у нас птицы были везде, даже тарифы назывались Дятел-Синица-Пингвин. Но, как и сайт, это было сделано наполовину: где-то птицы были (тарифы МультиТрекинга), а где-то нет (тарифы МультиЧата). У нас было два пути: либо продолжать везде топить за птиц, либо совсем их убрать. Результат очевиден.Больше никаких пингвинов и дятловМало того! Мы почти решили сделать кардинальный ребрендинг и сменить название на Callibró. Вроде бы и преемственность названия сохраняется, и от птиц уходим, и делаем в названии сдвиг в неформальную сторону: call i Bro (типа бро, брателла). Даже зарегали домен callib.ro — пришлось предоставлять документы нашего фаундера в румынский минсвязи.Но потом от этой идеи отказались. Слишком большой риск, что новое название не будут ассоциировать со старыми нами (а у Колибри есть известность и репутация на рынке). Плюс риск потери позиций в поисковых системах при переезде на новый домен. Еще возникли проблемы с регистрацией товарного знака: кто-то уже зарегал Callibro до нас. В итоге уже нарисованный лого Callibro переделали обратно в Callibri.Что сделали с сайтом и контентомСтруктураТут особо говорить не о чем. Нарисовали майндмэп, на котором разложили все страницы сайта по полочкам, учли требования SEO — какие запросы куда будем приземлять, на самих страницах сделали блочную структуру. Контент страницПереписали тексты нескольких десятков страниц — теперь всё написано в едином стиле, нет портянок SEO-текстов. Контент подкреплен фирменными иллюстрациями и иконками — всё нарисовали сами, стока нет вообще.Наконец-то сделали нормальную страницу «О компании». В прошлой версии на ней были просто фотографии сотрудников и контакты. Фото мы оставили в виде анимированного блока, но добавили рассказ про нашу историю и ценности.Добавили видеоотзывы клиентов — они есть на соответствующих продуктовых страницах и на отдельной странице для тех, кто целенаправленно ищет отзывы о нас.В отличие от текстовых отзывов, где можно переврать и дописать, видео выглядит более убедительным. Видно, что это не актеры, а настоящие клиенты: они стесняются, заикаются, называют свою должность и компанию вслух. Теперь со страницы отзывов регулярно приходят лиды.Кстати, количество клиентов на этой странице автоматически обновляется раз в сутки. Перейдите на нее сейчас, скорее всего, количество клиентов изменилось. Новый раздел «Помощь»Старый FAQ был примерно таким же, как остальной сайт — с непроработанной структурой, многоуровневой вложенностью. Найти в нем что либо было довольно трудно, а инструкции множились в геометрической прогрессии. Если клиент просил ссылки на инструкции, чтобы настроить сервисы самостоятельно — приходилось скидывать большой пугающий список.Старая версия раздела FAQВ итоге сделали новый раздел «Помощь» с одним уровнем вложенности, а 100+ коротких инструкций переработали в последовательные гайды. Теперь можно дать клиенту одну ссылку на блок инструкций и он действительно выполнит их сам.Новый раздел «Помощь»Личный кабинет сервисаПока только перекрасили сайдбар и другие элементы интерфейса, чтобы они сочетались с новым визуальным стилем. Но в сентябре начнем обновлять разделы кабинета — не только цвета, но и расположение блоков, подсказки и все остальное.Так кабинет выглядел в старом цветеА так — в новомФирстиль остальных элементов бренда и корпоративных носителейСмена лого и визуального стиля в вебе логично повлекли за собой редизайн всего: от деловой документации до наклеек на ноутбуки.Мерч тоже изменился: у нас появились толстовки, футболки, рюкзаки, пледы, шапки, носки, тканевые сумки и термо-стаканы. Часть из этого сотрудники получают в подарок на день рождения, часть — на Новый год, еще часть — за иные заслуги. Наш CEO — Иван ШкиряИтоги: стоило ли заморачиваться?Однозначно стоило.Есть объективные показатели. Конверсия в лид по органическим каналам трафика увеличилась на 30%. Техподдержка тратит меньше времени на объяснение настроек: многие клиенты теперь делают все самостоятельно по инструкциям.Есть субъективные показатели. Сайт стал нормальным во всех смыслах — контент, навигация, дизайн — им удобно пользоваться. В целом появился единый визуальный стиль бренда, по которому нас узнают — в рекламе, соцсетях, офлайне. И который дифференцирует нас от рынка — подобной стилистики нет ни у кого.И теперь внешний вид Callibri полностью соответствует внутреннему: немного хулиганский, но дружелюбный, гибкий и отзывчивый.Так что да, полгода работы прошли не зря.Что осталось?На сайте — сделать редизайн блога и еще пары некритичных разделов (Генератора UTM-меток, Словаря и Календаря маркетолога). На них изначально все было не так плохо, как на продуктовых страницах, поэтому ими решили заняться в последнюю очередь. В контенте — обновить шаблоны email-рассылок. В кабинете — почти все 🙂 Сначала возьмемся за самые устаревшие, но самые используемые разделы, и постепенно приведем все к единому виду. Stay tuned.#редизайн
На иллюстрации не Лев Толстой, это картина Бориса Кустодиева «Купец, считающий деньги»: https://www.pinterest.ru/pin/431360470549572254/
Странно, что не было шутки про 'хуй простой'
Точно, спасибо! Но похож ведь)
Вот это горе, конечно. Зачем так мучать буковки?)
Они не жаловались!))
А мне жаль что теперь нет птички, она была прям крутой фишкой
Пришлось принести птицу в жертву