{"id":8545,"title":"\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u043a\u0443\u043f\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0442\u0430\u0440\u0435\u0439\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0433\u043e\u0440\u0435\u0442\u044c","url":"\/redirect?component=advertising&id=8545&url=https:\/\/vc.ru\/special\/isource&placeBit=1&hash=2b5b7b247ca83e67628673cba216c312801b86af12a116e7df5c8ab9fae04e8c","isPaidAndBannersEnabled":false}

Советский пинап, 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/

8
Социологический бас

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

2

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

1

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

0

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

1

Без проблем!

0

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

5

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

0

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

3

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

1

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

2

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

0

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

2

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

0

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

1

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

0

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

1

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

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

0

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

0

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

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

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

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

0

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

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

0

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

–1

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

0

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

1

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

–1

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

1

Спасибо! 

0

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

0

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

1

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0
Читать все 39 комментариев
5 неожиданных сервисов Почты России, которые постоянно выручают меня в бизнесе

В прошлом году я открыл для себя совершенно удивительные фишки Почты России. С тех пор апка Почты у меня на главном экране в айфоне.

Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Документы сгорели, а главный свидетель выпал из вертолёта: история золотого месторождения, стоившего акционерам $3 млрд Статьи редакции

Проект разработки «крупнейшего золотого месторождения» компанией Bre-X на острове Борнео оказался мошенничеством на миллиарды долларов, за которое так и не смогли никого наказать.

Команда Bre-X на Борнео, около 1997 года, слева направо: менеджер участка Джером Альто, старший вице-президент Джон Фельдерхоф, менеджер по разведке Майкл де Гузман и геолог Сезар Пуспос Сalgary Herald
"Тестировщик" – это просто
Как команде расставить приоритеты, когда всё кажется важным

Мы в WEEEK часто ошибались с приоритетами — брались не за те задачи, постоянно всё пересматривали, путались и т. д. Отчасти из-за этого хаоса мы работали в реактивном режиме — действовали «по обстановке», а не «по плану». Это довольно обычное дело для стартапа, но наша-то цель — помогать людям и командам приводить свои дела в порядок. Поэтому мы…

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

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

@АнтиспамБот — когда ты реальная заноза в з@днице, или как давали отпор «П0шлым_Дев4енкам»

Прошло меньше двух недель с того дня, как в статье на vc.ru я рассказал про @antispamname_bot, предназначенный для борьбы со спамом в никнейме юзеров телеграмма вида «PEАЛЬНЫЕ_ZНAКОМСТVА» и «ПОИСК_PAPTHЕRОV». В новой статье я поделюсь тем, как прошли эти 10 дней: как бота подключили огромные чаты медиа изданий с аудиторией 100 000+ человек, чаты…

Авито возглавила три рейтинга App Annie
null