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

Рассказывает руководитель команды дизайна

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

Зачем нам ребрендинг

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

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

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

Как мы планировали работу

В моей карьере уже был ребрендинг двух крупных продуктов: Mail.ru и Яндекс.Маркета. Трансформация — всегда сложный процесс и стресс.

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

Все случилось благодаря трем пунктам:

  1. четкому плану
  2. делегированию
  3. регулярной синхронизации с исполнителями и всеми членами команды

Мы начали с четкого плана. Собрали черновой беклог (список всех рабочих задач). Совет: «Сначала добавляй все, что помнишь, потом — подкорректируем».

Поделили все задачи на кластеры: мобильное приложение, оклейка в офлайне, маркетинг, социальные сети. У каждого кластера был собственный график по классической диаграмме Ганта.

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

Процесс

Мобильное приложение. Хотелось сделать очень многое, но распыляться было опасно. Поэтому мы декомпозировали задачу.

  • поменять палитру

  • логотип

  • иллюстрации
  • модели авто
  • провести UX-тест
  • почистить минимальные проблемы с UX

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

  • оставили зеленый цвет от YouDrive
  • иконку оставили на белом фоне (по аналогии со старой) — так наше приложение не потеряют на экране смартфона
  • от старого логотипа осталась стрелка — там она была мощным элементом
  • на логотипе появилась искра: новый знак может жить и вне текстового поля логотипа
Старый и новые акцентные цвета

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

Новая палитра Ситидрайв

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

Приложение с новой палитрой и стилями

Перенесли новые цвета в приложение: использовали палитру в акцентах. Зеленый сделали основой, фиолетовый — для акцентов, местоположения и важных отметок.

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

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

Это были проблемы контраста и цветового кодирования. Сделали кнопку завершения заметнее, это стало дешевым, но быстрым решением проблемы пользователей.

Кнопка фильтра на основной карте

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

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

Второе открытие: если можно решить проблему сейчас, ее надо решить. Даже если решение прямо сейчас не идеальное.

Новый стиль иллюстраций

Иллюстрации. Нужно было поддержать новый фирменный стиль в 3D-иллюстрациях. Их понадобилось около 30. Персонаж на них — собирательный образ нашего пользователя. В основном (80%) это мужчины. Есть планы поменять персонажа, когда количество пользовательниц увеличится.

Часть иллюстраций нам сделали ребята из Ситимобила, на значительную долю искали иллюстратора. Нашли подрядчика, от нас потребовалось только кураторство.

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

Новые иллюстрации в интерфейсе

Я смог запустить отрисовку иллюстраций и параллельно проработать детали в приложении. Получилось аккуратно и в нашем стиле.

3d-модели автомобили с новым брендингом

3D-модели автомобилей. Ситидрайв должен был запуститься с новой оклейкой автомобилей. Значит и в приложении должны были отображаться машины с новым логотипом. Мы стали искать подрядчика на отрисовку 3D-моделей в новой оклейке. Оказалось, это непростая задача.

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

Новые модели авто в приложении

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

Старая оклейка YouDrive

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

Новая оклейка Ситидрайв для Москвы

Новая оклейка должна была стать ярче и заметнее. Работали над этим вместе с Ситимобилом. Предварительно нужно было сделать вот что:

  • разобраться в ограничениях и сделать ТЗ на оклейку: например, оказалось, что московская оклейка должна содержать оранжевую капсулу
  • присутствовать на тестовой оклейке лично: в реальности и на фото оклейка значительно отличается, нужно сразу объяснить оклейщикам, что не так
Новая региональная оклейка Ситидрайв

Благодаря присутствию мы наладили связь с дизайнерами оклейки. Я объяснил принципы и логику нового образа бренда. Мы стали союзниками и ребята начали сами адаптировать наши оклейки на новые модели. Теперь мы только одобряем финальный вид.

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

Брендинг на крыше автомобиля

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

Разные модели автомобилей в новом бренде

Теперь, после всех подготовок, автомобили Ситидрайв оклеивают автономно, качественно. Мое участие в этом процессе практически не требуется.

Маркетинг. Это большая часть наших работ. К счастью, в этом направлении было не нужно искать подрядчиков. Но нужно было объяснить нюансы работы с новым брендбуком.

Лента аккаунта Ситидрайв в Инстаграме

Для SMM (уровень попроще):

  • обсудили новый брендбук с подрядчиками

  • через две-три встречи вышли на надежный визуал

  • сейчас уже подрядчик почувствовал стиль и развивает его самостоятельно

Рассылки (немного сложнее):

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

Результат

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

За время работы команда сплотилась, появилось доверие и экспертиза.

Ребрендинг только первый шаг на этом пути, а впереди:

  • оптимизация, а где-то пересмотр основных процессов в регистрации и аренде автомобиля, UX-тестирования каждого этапа взаимодействия с продуктом
  • полноценная дизайн-система в приложении

  • узкие руководства для подрядчиков: не общий гайдбук, а для каждого направления свой со своими деталями
  • выстраивание дизайн-процессов в увеличивающейся команде

Как использовать шторм ребрендинга на пользу команде дизайна

Начинайте с плана. Подробный список задач даст вам понимание объема, нужного количества рук, времени. Совет: «Сначала добавляй все, что помнишь, потом — подкорректируем».

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

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

Если приходится объяснять больше одного раза — сделайте гайд. Задокументируйте свои мысли, приведите примеры. Это освободит вам руки.

Рискуйте, если это потенциально принесет лучший результат. Конечно, нужен план Б, страховка, на случай, если, например, крутой исполнитель подведет.

0
24 комментария
Написать комментарий...
Helge Totenkopf

Дизайн - это круто, но когда будет нормальное приложение с технической точки зрения, работающее без багов и когда будут закуплены серверные мощности для того приложение в принципе работало? За этот год было больше 10 случаев когда приложение просто лежало и невозможно было завершить аренду. Надоело уже слышать «в данный момент наблюдаем сложности» от поддержки

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

Никогда-нибудь

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

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

В общем запороли уникальную удачную концепцию в угоду унификации.

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

Пользователи надеялись, что с ребрендингом обновят техническую сторону приложения, а получилось, что в период перетягивания дизайна приложение постоянно лежало в вечернее время, когда больше всего нагрузка на сервер. В итоге обертку обновили, а внутри такое же гавно. Обидно, любимый карш, 9й уровень, самый выгодный для меня, а приложение хуже чем у того же Дели.

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

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

Ответить
Развернуть ветку
Lilly-bell

почему-то шрифт Вкусвилл новый напомнило, хотя у них вроде уникальный сейчас?

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

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

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

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

У вас цвета не в диапазоне CMYK (Out of Gamut). Проверьте. На печати могут быть удивительные результаты. Понятно, что хотели сделать ярче для экранов, но лучше перебдеть.

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

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

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

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Грозовский

А пользоваться все так же не хочется :-(

Ответить
Развернуть ветку
Роман Гончаров

+

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

Разительные перемены. Пользователю будут счастливы.

Ответить
Развернуть ветку
Dr. Horrible

Шрифт - ад перфекциониста.
кажется что сити и драйв не на одном уровне.

Ответить
Развернуть ветку
Максим Гурушкин

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

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

Вам бы поддержку как у Яндекса и их стабильное приложение и были бы просто нереально крутые.

Один дизайнер
Один разработчик
Один оператор КЦ
(с)

Ответить
Развернуть ветку
Роман Гончаров

Поправлю, один нестабильный оператор КЦ

Ответить
Развернуть ветку
Альберт

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

Единственные моменты:
1) В статье описано, что люди путали закрытие дверей с завершением аренды – я и сейчас так иногда делаю, дело не в цветах, а расположении элементов.
2) Реально тупит само приложение ВСЕГДА - не видит машину, не может закрыть машину, не видит текущую аренду, показывает незавершенной завершенную аренду. Обычно все решается "само", но неприятно.

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

Спасибо.

1. Действительно проблема и сейчас жива, будем докручивать, при этом стало гораздо меньше ошибок. Самая большая проблема была по сути в красном цвете, который (в том числе из-за реализаций конкурентов) считывался как кнопка, которая все завершит. Даже такая небольшая правка сгладила ситуацию.
2. Да, к сожалению, это действительно так и сейчас это главный приоритет в компании, в оправдание могу сказать, что все подобные сбои — это задел на будущее, как бы странно это не звучало, в данный момент это проблема роста.

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

Проблема роста? 0_o Редизайн произошёл 12 апреля, а сегодня 18 ноября. При этом падения продолжаются, да ещё и добавляются новые глюки вроде необходимости двухкратного нажатия на "двери открыты: Да".

Я, конечно, вижу, что это всеобщий тренд, выпускать нестабильный забаганый софт после редизайна, так что приходится месяц сидеть на beta ветке приложения, чтобы хоть как-то им пользоваться, но Сити со своим ребрендингом всех в этом переиграл!

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

А не пробовали все в одной кнопке сделать?
Открыть и закрыть двери при нажатии на кнопку ползунка и завершение аренды при сдвиге ползунка.

Ответить
Развернуть ветку
Pavel Ivanov

Разделяй и властвуй (c)

Большую работу проделали 👍 молодцы.

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

Скоро всё будет этим шрифтом набрано, как в своё время Revue

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

Спасибо за уроки сенсей!

Ответить
Развернуть ветку
Герман Манвелов

Раньше лучше было

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