Хабрахабр

Как это работать со Студией Лебедева: опыт Туту.ру

Меня зовут Никита Иванов, я дизайн-директор Туту.ру. Наш бизнес работает с 2003 года, и в прошлый раз мы переосмыслили его айдентику почти 12 лет назад — в конце 2006.

Дизайн — один из инструментов, который нам в этом помогает. Сейчас Туту.ру из набора популярных сервисов растёт в единый продукт для путешествий.

В этой статье я расскажу, как мы искали новую айдентику и выбирали партнёра, почему остановились на Студии Артемия Лебедева и как устроена работа с их командой, а также как мы сейчас меняем дизайн сервисов с 15-летней историей.

Как мы пришли к идее редизайна

Туту.ру в 2006 году — это расписание электричек, онлайн-касса ж/д билетов и расписание авиарейсов, 20 тысяч посетителей сайта в день и команда из семи человек. Туту.ру в 2018 — это российский турсервис № 1 (данные GfK за I кв. 2018), около миллиона посетителей в день, по пять мобильных приложений для iOS и Android и команда больше 350 человек.

Мы рассуждали так: «Стоит ли тратить ресурсы команды на декоративные изменения, а не на новые классные фичи? Несколько лет в нашем фокусе было удобство клиентов и новые полезные фичи, мы уделяли меньше внимания тому, каким языком наши продукты общаются с людьми или как мы рассказываем об изменениях. И чем мы это измерим?» А измерить действительно сложно. Какую пользу это принесёт клиентам? Не бывает сервисов без бренда. Но работать над брендом важно. Если не заниматься брендом, то в головах вашей аудитории его образ сложится сам собой, только, увы, уже без вашего участия.

Чтобы получился классный дизайн, надо понимать, какими мы хотим быть и для чего. Дизайнеры в Туту.ру топили за обновление айдентики давно, но мы сами понимали, что «сделать редизайн» — это неправильная постановка задачи. В прошлом году в Туту.ру собралась рабочая группа, которая нашла ответы на эти вопросы, и этого уже хватило для того, чтобы правильно ставить задачу о новой айдентике. В большом сложном бизнесе это бывает непросто.

Что было в брифе?

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

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

Кажется, нам это оказалось даже полезнее, чем партнёрам. Описание задачи получилось длинным (на 10 листах), зато помогло синхронизировать ожидания внутри Туту.ру и задать самим себе правильные вопросы.

image

Выбор партнёров

Чтобы найти команду, с которой у нас всё получится, познакомились с несколькими сильными студиями и агентствами. На что мы обращали внимание?

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

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

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

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

На личный контакт. Мы смогли бы отказаться от сильной команды, если бы не сумели найти общий язык.

Почему мы выбрали Студию Лебедева

После дюжины переговоров с разными командами мы выбрали Студию Лебедева. Во-первых, своим портфолио они доказали, что могут справиться с таким проектом. Во-вторых, с первых минут знакомства они были быстрыми и открытыми в коммуникации, задавали самые точные вопросы. И пусть это звучит немного пафосно, но у них был «правильный огонь в глазах». Мы почувствовали, что проект в надёжных руках.

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

Быстрый ответ — разговор по телефону — знакомство в студийном офисе внутри гигантского полиграфического комплекса на ул. 1905 года… прекращать интересное общение было бы странно, а позже оказалось, что стоимость работы Студии на одном уровне с предложениями других сильных команд, которые мы рассматривали. Но я подумал: «За знакомство деньги не берут!» — глубоко вдохнул, выдохнул и написал на студийную почту. Сумму не скажу, но миф разрушился.

Начало работы со Студией

Коллеги расспросили нас о нашем бизнесе и целях, рассказали о себе, показали похожие по масштабу проекты из своего портфолио, провели по офису (теперь знаю, каким хочу видеть будущий офис Туту.ру!). Не буду описывать коммерческое предложение Студии или как мы оформляли все бумаги, перейду к работе над дизайном.

Что это такое? — Наброски будущей айдентики без особой детализации. Первыми макетами, которые показала нам Студия, были семь поисковых эскизов. Зачем они нужны? — Чтобы быстро понять, какие образы нам ближе, а в какую сторону даже думать не стоит.

image

Другие три нам понравились: Из предложенных вариантов мы сходу отсеяли четыре.

image

Ждёшь явно не этого. Это может показаться контринтуитивным и несерьёзным — приходят крутые ребята и показывают семь наскоро нарисованных картинок. С картинками на руках проще и быстрее понять друг друга. Но даже не зная студийную кухню и отсмеявшись насчёт забавных ассоциаций («Это Твиттер, основавший авиакомпанию?»), понимаешь, что такое начало работы экономит вагон времени.

Как устроен рабочий процесс

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

Я когда-то слышал, что эскизы перед презентацией клиентам одобряет Тёма, но подтвердить или опровергнуть это не могу: его участие в нашем проекте осталось за кулисами Студии. Со стороны Студии в работе активнее всего участвовали менеджер Настя Шаркова, арт-директор Егор Жгун и дизайнер Иван Ващенко.

Новые макеты нам показывали на личных встречах, они проходили в офисе Туту.ру, обычно раз в одну или две недели, в четверг или пятницу. Проект вели в студийном Бейскемпе — там отмечали даты будущих встреч, фиксировали замечания и договорённости после обсуждений. Между встречами переписка или короткие созвоны для уточнения деталей.

Эволюция концепций

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

image

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

image

Сохранив эту живость, характер, динамику и богатство на метафоры, мы попросили дизайнеров убрать «запутанность»: Третья концепция пока самая живая и яркая.

image

Мы сделали что-то среднее — отбросили одну из идей, а две другие попросили развить ещё: Теперь нужно было или выбрать идею-победителя, или уйти на ещё одну итерацию доработок.

image

Решили развивать её. Ещё один заход, и мы убедились, что идея с земным шаром и «маршрутом» путешественника самая сильная.

Развитие концепции с земным шаром

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

image

Постарались сделать более живой и «тёплый» знак, но технологичный: Движение в нужную сторону, правда, теперь напоминает планетарную модель атома и что-то телекомовское.

image

Классно, что графическая и шрифтовая часть логотипа подружились между собой, а отправная точка любого путешествия теперь находится на Туту.ру — буквально. Уже не атом, но выглядит сложно и запутанно. Развитие идеи:

image

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

image

Надпись стала плотнее и крепче, сине-красный шлейф оптимистично взмывает вверх, а не целится в наш домен: Работаем над деталями.

image

Это было то что нужно! Финальный файнтюнинг — меняется плотность линий, детали в леттеринге, цвета, угол взлёта шлейфа. Итоговый вариант:

image

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

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

Кроме основной версии логотипа сделали несколько специальных: для крупного и мелкого размера, для вытянутых и более «квадратных» форматов, для тёмного фона, иконок, одноцветного нанесения (факсы, к счастью, вымерли, но существует, например, гравировка или тиснение).

image

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

Что дальше

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

Сейчас мы показали первую часть изменений.
image

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

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

Обсуждаем их с коллегами не из продуктовых команд, и если похоже, что гипотеза работает, проводим глубинные интервью с клиентами. Чтобы сделать меньше ошибок, большие идеи мы проверяем, делая функциональные прототипы. Последнюю проверку наши решения проходят в А/Б-тестировании на продакшене. Это сложнее и дольше, чем просто нарисовать макет, но результаты хорошего качественного исследования помогают не потратить кучу денег на разработку ненужных фич.

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

А если вы нашли баг, для рассказа про который нужно несколько скриншотов и куча текста, пришлите его мне на почту, ivanov@tutu.ru. Если вы увидите, что что-то в наших продуктах не работает или выглядит не очень, пожалуйста, напишите — поправим как можно быстрее. Ну а на новую айдентику уже можно смотреть на Туту.ру.

image

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть