Советский пинап, 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 решает несколько задач, в одну иллюстрацию их не уместить. Поэтому сделали анимацию

Логотип

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

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

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

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

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

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

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
39 комментариев
Написать комментарий...
Кирилл Казаков

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

Ответить
Развернуть ветку
Я не скажу свое имя машине

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

Ответить
Развернуть ветку
ivan krapivin

По сути это и есть «Купец, считающий деньги»

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

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

Ответить
Развернуть ветку
Кирилл Казаков

А можете поправить, пожалуйста, заголовок в таком случае?

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Без проблем!

Ответить
Развернуть ветку
Иван Битов

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

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

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

Ответить
Развернуть ветку
Ирина Мезенцева

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

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

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

Ответить
Развернуть ветку
Татьяна Крючкова

Классная статья)) молодцы ребята)

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Cпасибо, приятно)

Ответить
Развернуть ветку
Султан Таишев

Вы живые, по сравнению с Jivo 😁

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Живее всех живых!))

Ответить
Развернуть ветку
Святослав Караваев

Личный кабинет вообще убили, были светлые тона, стали мрачные траурные. 

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

А траурные тона - это какие?

Ответить
Развернуть ветку
Святослав Караваев

черный

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Черный — необязательно траур. Посмотрите на Netflix, там вообще всё черное. Или Яндекс.Практикум, например.

Ответить
Развернуть ветку
Святослав Караваев

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

З.Ы. Не по теме но на днях видел картинку - коллаж, старый и новый дизайн строения макдоналдса, новый - такой "дорого-богато" но как-то скучно, и старый - простой но яркий и запоминающийся. И еще надпись "Когда из веселого ребенка превратился в скучного взрослого". Примерно так же и с дизайном калибри, печаль...

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Да нет, я не буду топить. Это же вопрос вкусов, о которых нет смысла спорить: вам не понравилось — я уважаю вашу точку зрения.

Ответить
Развернуть ветку
Marianna Roshchina

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

И дело не в траурности даже.
Лично я очень люблю чёрный цвет. Особенно в одежде, обуви. Авто или байк чёрного цвета - это же класс.

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

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

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Да, я и сам не могу читать с экрана белый текст на черном фоне. Глаза буквально начинают слезиться. Поэтому я согласен - всё, что вы написали, справедливо. Но только если это касается чтения фрагментов текста.

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

Ответить
Развернуть ветку
Marianna Roshchina

И да - я видела, что речь идёт именно о сайдбаре. Но как раз он резко контрастирует с соседним белым фоном. Что тоже не добавляет комфорта пользователю.
Пришло время вводить UC в дополнение к UI и UX? 🤔

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

А вы наш клиент?

Ответить
Развернуть ветку
Marianna Roshchina

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

Ответить
Развернуть ветку
Marianna Roshchina

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

Ответить
Развернуть ветку
Natalia Fedorova

Очень классно вышло! Стиль огненный, лого сильно-сильно лучше стал. По сайту конечно есть недоработки и спорные моменты, но они есть и будут всегда, работа с сайтам нон-стоп, в целом все сильно лучше! И статья подробная, люблю когда вот так развернуто делятся

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Спасибо! 

Ответить
Развернуть ветку
Игорь Кузин

Дмитрий, сколько месяцев занял ребрендинг? Сколько человек было в составе проектной команды?

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Всё вместе от и до заняло около года. В команде — 3 человека, но это без учета разработчиков.

Ответить
Развернуть ветку
Родион Аветисов

Было бы хорош, если б вы наконец починили пуш уведомления на ios. А то дизайны/редизайны это конечно круто, но функционал поважнее будет. 

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Родион, да, мы в курсе проблемы. Занимаемся решением.

Ответить
Развернуть ветку
Artem Sarkisov

Хочу сказать 2 вещи:
1) Мерч, за который не стыдно) Особенно худи. Сам бы такую носил
2) Пожалуйста, почините вашу аналитику. Понимаю, что она ещё в стадии Беты, но с июня месяца не работает передача данных из Я.Директа, а сейчас и с Google Ads перестали поступать данные(( ТП пишет, что разбираются, но уже не особо верится. 3 месяца прошло с момента обращения.

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Спасибо за сигнал, узнаю, в чем проблема.

Ответить
Развернуть ветку
Андрей Селезнев

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

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Этот список уже переделываем.

Ответить
Развернуть ветку
Богдан В.

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

Ответить
Развернуть ветку
Дмитрий Сульман
Автор

Это только так кажется. Когда начинаешь накручивать, в какой-то момент это превращается в абсурд. Тарифы «Дятел» и «Синица» у нас уже были. Дальше что, клювы и перья?))

Ответить
Развернуть ветку
Богдан В.

Ну не до абсурда же доводить! )) Вообщем, вы меня поняли.)

Ответить
Развернуть ветку
36 комментариев
Раскрывать всегда