Меня зовут Никита Иванов, я дизайн-директор Туту.ру. Наш бизнес работает с 2003 года, и в прошлый раз мы переосмыслили его айдентику почти 12 лет назад — в конце 2006.
Сейчас Туту.ру из набора популярных сервисов растёт в единый продукт для путешествий. Дизайн — один из инструментов, который нам в этом помогает.
В этой статье я расскажу, как мы искали новую айдентику и выбирали партнёра, почему остановились на Студии Артемия Лебедева и как устроена работа с их командой, а также как мы сейчас меняем дизайн сервисов с 15-летней историей.
Как мы пришли к идее редизайна
Туту.ру в 2006 году — это расписание электричек, онлайн-касса ж/д билетов и расписание авиарейсов, 20 тысяч посетителей сайта в день и команда из семи человек. Туту.ру в 2018 — это российский турсервис № 1 (данные GfK за I кв. 2018), около миллиона посетителей в день, по пять мобильных приложений для iOS и Android и команда больше 350 человек.
Несколько лет в нашем фокусе было удобство клиентов и новые полезные фичи, мы уделяли меньше внимания тому, каким языком наши продукты общаются с людьми или как мы рассказываем об изменениях. Мы рассуждали так: «Стоит ли тратить ресурсы команды на декоративные изменения, а не на новые классные фичи? Какую пользу это принесёт клиентам? И чем мы это измерим?» А измерить действительно сложно. Но работать над брендом важно. Не бывает сервисов без бренда. Если не заниматься брендом, то в головах вашей аудитории его образ сложится сам собой, только, увы, уже без вашего участия.
Дизайнеры в Туту.ру топили за обновление айдентики давно, но мы сами понимали, что «сделать редизайн» — это неправильная постановка задачи. Чтобы получился классный дизайн, надо понимать, какими мы хотим быть и для чего. В большом сложном бизнесе это бывает непросто. В прошлом году в Туту.ру собралась рабочая группа, которая нашла ответы на эти вопросы, и этого уже хватило для того, чтобы правильно ставить задачу о новой айдентике.
Что было в брифе?
Мы искали более живой, дружелюбный и эмоциональный стиль, который отразит новый характер Туту.ру. Нам пора было уйти от знака с пересекающимися дорогами, который у многих ассоциируется только с поездами и электричками. Новый логотип должен быть про путешествия любого вида и при этом быть логотипом технологической компании, а не эдакой ламповой эмблемой клуба путешественников. Плюс ко всему хотелось сохранить преемственность со старым стилем компании: миллионы клиентов знают нас такими, и это ценно.
Новую айдентику мы решили делать вместе с партнёрами, а чтобы правильно поставить им задачу, написали бриф. В брифе мы собрали описание бренда, его платформу (позиционирование, стиль, миссию, видение и ценности), наше понимание задачи, ожидания от рабочего процесса и даже показали на примерах, к какому масштабу перемен мы готовы, а что нам кажется слишком мелким или, наоборот, радикальным.
Описание задачи получилось длинным (на 10 листах), зато помогло синхронизировать ожидания внутри Туту.ру и задать самим себе правильные вопросы. Кажется, нам это оказалось даже полезнее, чем партнёрам.
Выбор партнёров
Чтобы найти команду, с которой у нас всё получится, познакомились с несколькими сильными студиями и агентствами. На что мы обращали внимание?
На крутые работы для сложных цифровых продуктов в портфолио. Изнутри интернета порой кажется, что все уже и так «могут в диджитал». Но есть много прекрасных команд, которые лучше справляются с дизайном упаковки, среды или рекламы. Главная точка контакта людей с Туту.ру — наши интерфейсы и письма, нам гораздо важнее хорошо «перепрошить» айдентику в них, чем получить вместо этого отличные макеты рекламы для журнальных разворотов или мерч.
На возможность работать с творческой командой напрямую. В некоторых студиях не принято, чтобы дизайнеры общались с клиентами сами. Там есть менеджеры, которые передают вопросы и ответы, ездят на встречи. Мы же рассчитывали на более глубокое погружение.
На число дизайнеров. По большому счёту, всё равно, сколько людей работает над проектом, важен ведь результат. Но бывает, что дизайнеры перегорают до того, как выдадут лучшую идею, поэтому неплохо, когда есть возможность «сменить руку», не меняя партнёра.
На стоимость работы. В Туту.ру внимательно относятся к расходам. Очевидно, что работа хорошей команды не может стоить дёшево, но мы и тут остались довольно бережливыми ребятами и переплачивать не были готовы.
На личный контакт. Мы смогли бы отказаться от сильной команды, если бы не сумели найти общий язык.
Почему мы выбрали Студию Лебедева
После дюжины переговоров с разными командами мы выбрали Студию Лебедева. Во-первых, своим портфолио они доказали, что могут справиться с таким проектом. Во-вторых, с первых минут знакомства они были быстрыми и открытыми в коммуникации, задавали самые точные вопросы. И пусть это звучит немного пафосно, но у них был «правильный огонь в глазах». Мы почувствовали, что проект в надёжных руках.
Ещё один чувствительный для нас вопрос — бюджет проекта. До того как мы начали поиск лучшей команды, мы чуть было не исключили Студию из списка потенциальных партнёров: все ведь помнят, что там «Долго, дорого...».
Но я подумал: «За знакомство деньги не берут!» — глубоко вдохнул, выдохнул и написал на студийную почту. Быстрый ответ — разговор по телефону — знакомство в студийном офисе внутри гигантского полиграфического комплекса на ул. 1905 года… прекращать интересное общение было бы странно, а позже оказалось, что стоимость работы Студии на одном уровне с предложениями других сильных команд, которые мы рассматривали. Сумму не скажу, но миф разрушился.
Начало работы со Студией
Коллеги расспросили нас о нашем бизнесе и целях, рассказали о себе, показали похожие по масштабу проекты из своего портфолио, провели по офису (теперь знаю, каким хочу видеть будущий офис Туту.ру!). Не буду описывать коммерческое предложение Студии или как мы оформляли все бумаги, перейду к работе над дизайном.
Первыми макетами, которые показала нам Студия, были семь поисковых эскизов. Что это такое? — Наброски будущей айдентики без особой детализации. Зачем они нужны? — Чтобы быстро понять, какие образы нам ближе, а в какую сторону даже думать не стоит.
Из предложенных вариантов мы сходу отсеяли четыре. Другие три нам понравились:
Это может показаться контринтуитивным и несерьёзным — приходят крутые ребята и показывают семь наскоро нарисованных картинок. Ждёшь явно не этого. Но даже не зная студийную кухню и отсмеявшись насчёт забавных ассоциаций («Это Твиттер, основавший авиакомпанию?»), понимаешь, что такое начало работы экономит вагон времени. С картинками на руках проще и быстрее понять друг друга.
Как устроен рабочий процесс
Пора рассказать о том, как было устроено взаимодействие со студийной командой нашего проекта.
Со стороны Студии в работе активнее всего участвовали менеджер Настя Шаркова, арт-директор Егор Жгун и дизайнер Иван Ващенко. Я когда-то слышал, что эскизы перед презентацией клиентам одобряет Тёма, но подтвердить или опровергнуть это не могу: его участие в нашем проекте осталось за кулисами Студии.
Проект вели в студийном Бейскемпе — там отмечали даты будущих встреч, фиксировали замечания и договорённости после обсуждений. Новые макеты нам показывали на личных встречах, они проходили в офисе Туту.ру, обычно раз в одну или две недели, в четверг или пятницу. Между встречами переписка или короткие созвоны для уточнения деталей.
Эволюция концепций
Итак, нам приглянулись три идеи. Первый вариант обыгрывал метафору путей и перекрёстков. Кроме этого он больше всего похож на наш старый логотип, а мы не хотели терять преемственность. Вместе с тем нам хотелось более заметных изменений, не хватило эмоций и динамики. Коллеги развили идею так:
Вторая концепция, которую мы выбрали на первой встрече, с геометкой, воздушным шаром и восклицательным знаком. Тут всё про путешествия: восклицательный знак про яркость и эмоции, шар про романтику, геометка — понятно и так. Мы попросили коллег уменьшить ассоциацию с геометкой: символ слишком затёртый. Вот, что получилось:
Третья концепция пока самая живая и яркая. Сохранив эту живость, характер, динамику и богатство на метафоры, мы попросили дизайнеров убрать «запутанность»:
Теперь нужно было или выбрать идею-победителя, или уйти на ещё одну итерацию доработок. Мы сделали что-то среднее — отбросили одну из идей, а две другие попросили развить ещё:
Ещё один заход, и мы убедились, что идея с земным шаром и «маршрутом» путешественника самая сильная. Решили развивать её.
Развитие концепции с земным шаром
Первым делом хотелось избавиться от сходства с клубком ниток. Путеводная нить Ариадны, помогающая решить сложную задачу, конечно, красивый образ, но мы искали другой. Нужен более технологичный знак. Ещё попытка:
Движение в нужную сторону, правда, теперь напоминает планетарную модель атома и что-то телекомовское. Постарались сделать более живой и «тёплый» знак, но технологичный:
Уже не атом, но выглядит сложно и запутанно. Классно, что графическая и шрифтовая часть логотипа подружились между собой, а отправная точка любого путешествия теперь находится на Туту.ру — буквально. Развитие идеи:
Вот пластика, которую мы искали! Мы попросили коллег доработать цветовую гамму, потому что этот знак получился, скорее, фиолетовым, а мы сине-красные:
Работаем над деталями. Надпись стала плотнее и крепче, сине-красный шлейф оптимистично взмывает вверх, а не целится в наш домен:
Финальный файнтюнинг — меняется плотность линий, детали в леттеринге, цвета, угол взлёта шлейфа. Это было то что нужно! Итоговый вариант:
Так мы нашли свой новый, живой и дружелюбный стиль, а Студии удалось заложить в него образ путешествия, отправная точка которого — Туту.ру.
Ещё только примерно определившись с внешним видом логотипа и основными стилеобразующими ходами, мы в Туту.ру примерили новую айдентику на интерфейсы сайта и мобильных приложений, на почтовые рассылки, рекламную графику и даже на собственный офис. Это помогло убедиться, что предложенные Студией решения хорошо поведут себя в наших задачах.
Кроме основной версии логотипа сделали несколько специальных: для крупного и мелкого размера, для вытянутых и более «квадратных» форматов, для тёмного фона, иконок, одноцветного нанесения (факсы, к счастью, вымерли, но существует, например, гравировка или тиснение).
Результатом работы стало руководство по использованию новой айдентики и ссылка на архив в облаке со всеми нужными исходниками. В этой статье я показал эволюцию логотипа. На самом деле, конечно, это только часть проекта: параллельно работали с цветовой гаммой, фирменными графическими ходами, иконками продуктов и типографикой. А вот работу над продуктовыми интерфейсами мы целиком оставили за собой, это одна из наших ключевых компетенций.
Что дальше
Визуальная айдентика — это не только логотип, палитра или шрифты, и даже не правила их использования. Айдентика — это часть языка, на котором Туту.ру общается с клиентами и партнёрами. То, какими мы будем для людей, зависит от того, сколько пользы мы сможем принести. Поэтому модный логотип будем поддерживать делами и дальнейшим улучшением наших продуктов.
Сейчас мы показали первую часть изменений.
На этом этапе мы поменяли только оформление ключевых экранов, а теперь занимаемся перепроектированием наших интерфейсов, чтобы сделать единый и дружелюбный продукт. Новая айдентика — хороший повод подумать над опытом пользования нашими продуктами и сделать качественный рывок.
Это большая задача: провести радикальные изменения на сервисе, которым пользуются десятки миллионов человек в месяц и который не перестаёт расширяться, — мы релизим новые версии продуктов дважды в неделю.
Чтобы сделать меньше ошибок, большие идеи мы проверяем, делая функциональные прототипы. Обсуждаем их с коллегами не из продуктовых команд, и если похоже, что гипотеза работает, проводим глубинные интервью с клиентами. Это сложнее и дольше, чем просто нарисовать макет, но результаты хорошего качественного исследования помогают не потратить кучу денег на разработку ненужных фич. Последнюю проверку наши решения проходят в А/Б-тестировании на продакшене.
В ближайший год продукты Туту.ру изменятся внешне сильнее, чем за предыдущие пять лет (мы рады крутым дизайнерам, приходите знакомиться!). Сейчас внедрение новинок в разгаре: мы собираем шишки, уворачиваемся от грабель, следим за важными метриками. Через несколько месяцев выдохнем, и я обязательно расскажу вам о том, чему это нас научило и чем наш опыт может быть полезен другим.
Если вы увидите, что что-то в наших продуктах не работает или выглядит не очень, пожалуйста, напишите — поправим как можно быстрее. А если вы нашли баг, для рассказа про который нужно несколько скриншотов и куча текста, пришлите его мне на почту, ivanov@tutu.ru. Ну а на новую айдентику уже можно смотреть на Туту.ру.
Автор: Никита Иванов
