Содержание
туту.ру | Меандр | Archello
Meandre as Architects
Согласно результатам исследования comScore, Tutu.ru — самый популярный сайт о путешествиях в России. Основная услуга, которую оказывает сайт, — продажа билетов и туров. Наша архитектурная студия разработала новый дизайн офиса в связи с переездом компании.
Персонал состоит в основном из разработчиков веб-сайтов. Главной особенностью работы персонала является постоянное общение и перенастройка рабочих групп. Поэтому нашей основной задачей было создание открытого и гибкого офиса.
Концепция функционального зонирования офиса заключается в периметральном расположении рабочей зоны вдоль фасада и группировании остальных зон вокруг ядра здания.
Дизайн-концепция основана на разделении офиса на тематические зоны: курорт, автовокзал, поезд, пароход, самолет, автобус. Архитектурное решение каждой области (образное выражение всех площадей и объектов) строится по вышеназванным предметным областям. Рабочая зона офиса состоит из зон «поезд», «пароход», «самолет» и «автобус».
Вспомогательные и переговорные комнаты представляют собой зону «железнодорожный/автовокзал». Зона «Курорт» включает зоны приема пищи, бесед и отдыха.
Потолки открытого офиса в здании не очень высокие; поэтому было предложено оставить потолок открытым. Все каналы и потолки были покрыты специальным материалом Sonospray, обеспечивающим звукопоглощение.
При входе посетители оказываются на границе между «железнодорожным/автовокзалом» и «санаторием». Зона ресепшн оформлена в виде итальянского коттеджа с балконом в качестве стойки ресепшн. Песчаный пол, солнечные лучи и бамбуковые зоны ожидания создают солнечную курортную атмосферу. За ресепшеном находится зона для еженедельных встреч со всем персоналом и проведения различных мероприятий.
В этой зоне есть открытая терраса с шезлонгами, проектором и экраном для презентаций. Рядом расположена кухня камерного типа с общим столом и диванными нишами. Дисплеи демонстрируют деятельность сайта tutu.ru. Рядом находится помещение для тихой, сосредоточенной работы, напоминающее зеленые джунгли.
В «курортной» зоне есть и комнаты для переговоров — бунгало с бревенчатыми потолками, деревянными фасадами и мебелью из ротанга.
Территория железнодорожного/автовокзала оформлена в умеренной черно-белой цветовой гамме: серый бетонный пол или ковровое покрытие, белый металлический потолок, линейные светильники.
В каждой предметной зоне рабочего пространства стены и потолочные балки окрашены в соответствии с видом транспорта, напольное покрытие выбрано в виде волн, облаков, рельсов и асфальта соответственно. Также в каждой зоне расположены встроенные ниши для разговоров и временной работы, которые также отражают транспортную тематику: салоны самолетов, каюты, плацкартный вагон, купе поезда, пригородная электричка.
Для системы стеклянных перегородок используются два корпоративных цвета, синий и красный.
Офис включает в себя аквариум, тренажерный зал с душевой кабиной, мезонином и репетиционную комнату.
Используемый материал:
1.
Полы – Polyflor, Modulyss
2. Потолки – Sonasray
3. Мебель – NowyStyl
опыт Туту.ру , я директор по дизайну Туту.ру. Наш бизнес работает с 2003 года, а последний раз мы переосмысливали его айдентику почти 12 лет назад — в конце 2006 года.
Сейчас Туту.ру из набора популярных сервисов превращается в единый продукт для путешествий. Дизайн — один из инструментов, который помогает нам в этом.
В этой статье я расскажу, как мы искали новую айдентику и выбирали партнера, почему выбрали Студию Артемия Лебедева, и как была устроена работа с их командой, и как мы сейчас меняем дизайн сервисов с 15-летней историей.
Как мы пришли к идее редизайна
Туту.ру в 2006 году — это расписание поездов, онлайн билеты на поезд и расписание рейсов, 20 000 посетителей сайта в день и команда из семи человек. Туту.ру в 2018 году — российский туристический сервис №1 (данные GfK за 1 квартал 2018 года), около миллиона посетителей в день, пять мобильных приложений для iOS и Android и команда более 350 человек.
В течение нескольких лет мы уделяли особое внимание удобству клиентов и новым полезным функциям; мы уделяли меньше внимания тому, как наши продукты взаимодействуют с людьми или как мы говорим об изменениях. Мы рассуждали так: «Стоит ли тратить ресурсы команды на декоративные изменения, а не на новые крутые фичи? Какие преимущества это принесет клиентам? И как мы это измерим? «И это действительно трудно измерить. Но работа над брендом важна. Нет услуг без бренда. Если вы не будете заниматься брендом, то в сознании вашей аудитории его образ сформируется сам собой, только, увы, без вашего участия.
Дизайнеры Туту.ру давно греются на обновление айдентики, но мы и сами понимали, что «делать редизайн» — это неверная постановка задачи. Чтобы получить крутой дизайн, нужно понимать, кем мы хотим быть и почему. В большом сложном бизнесе это непросто. В прошлом году на Туту.ру собралась рабочая группа, которая нашла ответы на эти вопросы, и этого уже было достаточно, чтобы правильно поставить задачу новой айдентики.
Что было в брифе?
Мы искали более живой, дружелюбный и эмоциональный стиль, который будет отражать новый характер Туту.ру. Нам пора было оставить знак с пересекающимися дорогами, который у многих ассоциируется только с поездами и электричками. Новый логотип должен быть о путешествиях любого рода и в то же время быть логотипом технологической компании, а не ламповой эмблемой клуба путешественников. Плюс мы хотели сохранить преемственность со старым стилем компании: такими нас знают миллионы клиентов, и это ценно.
Решили вместе с партнерами сделать новую айдентику, а чтобы правильно поставить перед ними задачу, написали бриф. В брифе мы собрали описание бренда, его платформу (позиционирование, стиль, миссию, видение и ценности), наше понимание задачи, ожидания от рабочего процесса и даже показали на примерах, к какому масштабу изменений мы готовы и то, что кажется нам слишком маленьким или, наоборот, радикальным.
Описание задания получилось длинным (на 10 листов), но помогло синхронизировать ожидания внутри Туту.
ру и задать себе правильные вопросы. Нам кажется, это оказалось даже полезнее, чем партнеры.
Выбор партнеров
Чтобы найти команду, с которой у нас все получится, мы встретились с несколькими сильными студиями и агентствами. На что мы обратили внимание?
О крутых работах для сложных цифровых продуктов в портфолио. Изнутри интернета иногда кажется, что все уже «могут быть в цифре». Но есть много отличных команд, которые лучше справляются с дизайном упаковки, медиа или рекламой. Основная точка соприкосновения людей с Туту.ру — это наши интерфейсы и письма, нам гораздо важнее «перепрошить» в них айдентику, нежели получить взамен отличные рекламные макеты журнальных разворотов или мерч.
О возможности работать с творческим коллективом напрямую. В некоторых студиях дизайнерам не принято самим общаться с заказчиками. Есть менеджеры, которые передают вопросы и ответы, ходят на встречи. Мы рассчитывали на более глубокое погружение.
О количестве дизайнеров. По большому счету, сколько бы людей ни работало над проектом, важен результат. Но бывает, что дизайнеры выгорают, не успев выдать лучшую идею, поэтому неплохо, когда есть возможность «перейти в руки», не меняя партнера.
О стоимости работ. В Туту.ру внимательно относятся к расходам. Понятно, что работа хорошей команды не может стоить дешево, но и здесь мы остались с довольно экономными ребятами и не были готовы переплачивать.
При личном контакте. Мы могли расстаться с сильной командой, если бы не нашли общий язык.
Почему мы выбрали Студию Лебедева
После десятка переговоров с разными командами мы выбрали Студию Лебедева. Во-первых, они доказали своим портфолио, что могут справиться с таким проектом. Во-вторых, с первых минут знакомства они были быстры и открыты в общении, задавали самые точные вопросы. И пусть это звучит несколько пафосно, но у них был «правильный огонь в глазах».
Мы чувствовали, что проект в надежных руках.
Другим чувствительным для нас вопросом является бюджет проекта. Прежде чем приступить к поиску лучшей команды, мы чуть не исключили Студию из списка потенциальных партнеров: все мы помним, что есть «Долго, дорогая…».
А я подумал: «За знакомство денег не возьмешь!» — глубоко вздохнул, выдохнул и написал на почту студии. Быстрый ответ — разговор по телефону — встреча в офисе-студии внутри гигантского полиграфического комплекса на ул. 1905 год… было бы странно прекращать интересное общение, а позже выяснилось, что стоимость работ Студии была на уровне предложений других сильных коллективов, которые мы рассматривали. Сумму не скажу, но миф рухнул.
Начало работы со Studio
Коллеги расспрашивали нас о нашем бизнесе и целях, рассказывали о себе, показывали похожие по масштабу проекты в своем портфолио, проводили по офису (теперь я знаю, каким хочу видеть будущий офис Туту.ру!). Не буду описывать коммерческое предложение Студии, или так как мы оформили все бумаги, приступлю к работе над дизайном.
Первыми макетами, которые нам показала Studio, были семь поисковых эскизов. Что это? — Обрисуйте будущую личность без особых подробностей. Для чего они нужны? — Чтобы быстро понять, какие образы нам ближе, а в какую сторону даже думать не стоит.
Из предложенных вариантов мы исключили сразу четыре. Остальные три нам понравились:
Это может показаться нелогичным и несерьезным — приходят крутые ребята и показывают семь наспех нарисованных картинок. Ожидание явно не это. Но даже не зная студийной кухни и смеясь над забавными ассоциациями («Это Твиттер, который основал авиакомпанию?»), понимаешь, что такое начало работы экономит перевозку времени. С картинками на руках проще и быстрее понять друг друга.
Как проходит рабочий процесс
Пришло время рассказать о том, как было устроено взаимодействие со студийной командой нашего проекта.
Со стороны студии наиболее активное участие в работе приняли Настя Шаркова, арт-директор, Егор Жгун, арт-директор, и Иван Ващенко, дизайнер.
Я когда-то слышал, что Тём утверждает эскизы перед презентацией клиентам, но подтвердить или опровергнуть это я не могу: его участие в нашем проекте осталось за кадром Студии.
Проект велся во внутренней системе управления проектами — назначались даты будущих встреч, фиксировались замечания и договоренности после обсуждений. Новые макеты нам показывали на личных встречах, они проходили в офисе Туту.ру, как правило, раз в одну-две недели, в четверг или пятницу. Между встречами, переписка или короткие звонки для уточнения деталей.
Эволюция концепций
Итак, нам понравились три идеи. Первая версия обыгрывала метафору путей и перекрестков. Кроме того, он больше всего похож на наш старый логотип, и мы не хотели терять преемственность. Однако хотелось более заметных изменений, не хватило эмоций и динамики. Коллеги развили идею так:
Вторая концепция, которую мы выбрали при первой встрече, с геотегом, воздушным шаром и восклицательным знаком.
Все о путешествиях: восклицательный знак о яркости и эмоциях, шарик о романтике, геотегирование понятно и верно. Мы попросили коллег уменьшить ассоциацию с геотегами: символ слишком стерт. Вот что получилось:
Третий концепт пока самый живой и яркий. Сохранив эту живость, характер, динамику и богатство на метафорах, мы попросили дизайнеров убрать «хитрости»:
Теперь нужно было либо выбрать выигрышную идею, либо перейти к очередной итерации доработок. Мы сделали что-то среднее — одну из идей забросили, а две другие попросили развить еще одну:
Еще один подход, и мы убедились, что идея с глобусом и «маршрутом» путешественника самая сильная . Мы решили его развивать.
Разработка концепции земного шара
Первым делом я хотел избавиться от сходства с клубком ниток. Подсказка Ариадны, помогающая решить сложную задачу, — это, конечно, красивый образ, но мы искали другой. Нужно больше технического знака.
Еще одна попытка:
движение в правильном направлении, правда, теперь напоминает планетарную модель атома и что-то телекомовское. Мы постарались сделать более живую и «теплую» вывеску, но технологичную:
Это уже не атом, но выглядит сложным и запутанным. Круто, что графическая и шрифтовая части логотипа дружат между собой, а отправная точка любого пути теперь на Туту.ру — буквально. Развитие идеи:
Вот и пластик, который мы искали! Мы попросили коллег изменить цветовую схему, потому что этот знак получился скорее фиолетовым, а мы сине-красным:
Работаем над деталями. Надпись стала плотнее и крепче, сине-красный шлейф оптимистично взмывает вверх, а не целится в наш домен:
Окончательный финтюнинг — меняется плотность линий, детали в надписи, цвета, угол вылета шлейфа. Это было то, что вам нужно! Окончательная версия:
Так мы нашли свой новый, живой и дружелюбный стиль, и Студии удалось заложить в него образ путешествия, отправной точкой которого является Туту.
ру.
Только что определившись с внешним видом логотипа и основными стилеобразующими ходами, мы в Туту.ру примерили новую айдентику для интерфейсов сайта и мобильных приложений, для рассылок, рекламной графики и даже для собственной офис. Это помогло убедиться, что решения, предложенные Студией, будут хорошо себя вести в наших задачах.
Помимо основного варианта логотипа, сделали несколько специальных: для крупного и мелкого размера, для вытянутых и более «квадратных» форматов, для темного фона, иконок, монохромного рисунка (факсы, к счастью, вымерли, а есть, например, гравировка или штамповка).
Результатом работы стал гайд по использованию нового удостоверения и ссылка на архив в облаке со всеми необходимыми исходниками. В этой статье я показал эволюцию логотипа. На самом деле, конечно, это только часть проекта: параллельно мы работали с цветовой гаммой, фирменными графическими ходами, продуктовыми иконками и типографикой. Но работу над интерфейсами продуктов мы оставили позади, это одна из наших основных компетенций.
Что дальше
Визуальная айдентика — это не просто логотип, палитра или шрифты и даже правила их использования. Айдентика — это часть языка, на котором Туту.ру общается с клиентами и партнерами. То, чем мы будем для людей, зависит от того, сколько пользы мы сможем принести. Поэтому мы поддержим модный логотип делом и дальнейшим совершенствованием нашей продукции.
Теперь мы показали первую часть изменений.
На данном этапе мы изменили только дизайн ключевых экранов, и сейчас занимаемся редизайном наших интерфейсов, чтобы сделать единый и дружественный продукт. Новая айдентика — хороший повод задуматься об опыте использования наших продуктов и сделать качественный скачок.
Это большая задача: внести кардинальные изменения в сервис, которым пользуются десятки миллионов человек в месяц и который не перестает расширяться — мы будем выпускать новые версии продуктов два раза в неделю.
Чтобы делать меньше ошибок, мы проверяем большие идеи, создавая функциональные прототипы.
Мы обсуждаем их с коллегами из непродуктовых команд, и если кажется, что гипотеза работает, проводим глубинные интервью с покупателями. Это сложнее и дольше, чем просто рисовать макет, но результаты хорошего качественного исследования помогают не тратить много денег на разработку ненужных фич. Наши решения тестируются последними в A/B-тестировании на производстве.
В наступившем году продукция Туту.ру изменится внешне сильнее, чем за предыдущие пять лет (рады классным дизайнерам, приходите знакомиться!). Сейчас внедрение новинок идет полным ходом: собираем шишки, уворачиваемся от граблей, следим за важными метриками. Через несколько месяцев мы выдохнем, и я расскажу вам о том, чему она нас научила и как наш опыт может быть полезен другим.
Если вы видите, что что-то в наших продуктах не работает или выглядит не очень, пишите — мы исправим в кратчайшие сроки. А если найдете баг, для рассказа о котором нужно несколько скриншотов и много текста, присылайте мне на почту ivanov@tutu.