Дизайн авиабилета и писем

Заказчик

Sindbad — агентство по продаже авиабилетов. В начале 2018 года оно занимало четвертое место в России по объему продаж. К сожалению, в августе 2018 года «Синдбад» закрылся. Но мы успели поработать с этой компанией и даже занесли ее в список любимых клиентов. Впрочем, обо всем по порядку.

Изначальная задача

С помощью email-рассылки на всех этапах оформления заказа, а также до и после перелета рассказать клиенту о существовании компании «Синдбад». Письма должны быть полезны для пользователя, это касается как содержания, так и оформления. «Полезность» писем должна выделять компанию среди других поставщиков авиабилетов.

Аналитика

Первым делом мы рассортировали все письма и принялись терзать заказчика вопросами «а зачем отправлять это письмо», «что будет, если ребенок летит один без сопровождения взрослого» и т. п. В результате появился документ, где коротко описаны все 28 писем, которые клиент «Синдбада» может получить.

Как можно сделать наши письма полезными? Для начала надо понять, кто вообще будет эти письма получать. Составили портреты.

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

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

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

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

Письма

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

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

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

1. Нужно делать не просто хорошо, а круто.

2. Нужно делать сразу в дизайне.

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

А еще — делаем дизайн бумажного билета. Про него расскажем позднее.

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

Концепт сложился с первого раза — и для десктопа, и для мобильных устройств.

Теперь тюнинг деталей. Какая еще «маршрутная квитанция», если это билет? Почему бы не добавить пиктограммы? Показывать или нет в письме паспортные данные? Очень много мелких вопросов, замечаний, комментариев.

И еще тюнинг. В том числе — визуальный.

Письмо с допродажей изначально мимикрировало под полезное. Точнее, мы хотели сделать действительно полезное письмо, а все допуслуги предлагать в довесок.

Получилось довольно бестолковое письмо. Читать его будут разве что очень терпеливые и при этом редко летающие пассажиры.

Что ж. Не будем строить из себя белых и пушистых. Допродажа — значит, допродажа.

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

Последнее письмо — приглашение зарегистрироваться на рейс.

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

Билет

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

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

Иностранные авиакомпании не заморачиваются.

Велик соблазн выкинуть (или хотя бы спрятать) всю второстепенную информацию и оставить только важную. Мы спросили у заказчика, а что реально важно? Оказалось, что каждая строчка. Да, в билете есть и чисто юридическая информация, и строчки, важные только для бухгалтерии, но бо́льшая часть информации может понадобиться пассажиру. Особенно если что-то пойдет не так и ему придется звонить из Лондона в агентство или жестами в китайском аэропорту выяснять нужные сведения.

Первое и неоспоримое ограничение — вся информация важна. Давайте просто причешем ее и сделаем понятней. Делаем первый подход.

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

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

Еще в самом начале проекта появилось несколько идей общего плана. Во-первых, хорошо бы дать пассажиру наглядную шпаргалку. Во-вторых, лист А4 можно сложить втрое и положить в паспорт. Да, конечно, не все так делают. Кто-то складывает в четыре раза, кто-то распечатывает все (вообще все!) письма, которые получает от агентства или авиакомпании, включая рекламные, кто-то недоумевает, зачем в XXI веке бумажный билет.

Добавляем шпаргалку на треть листа.

Первое впечатление — интересно получается. Но это только первое впечатление. Информация в шпаргалке дублируется, а сам формат не масштабируется для перелета с тремя пересадками. Давайте действовать смелее, пусть весь билет будет шпаргалкой. Быстро набросали такой вариант.

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

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

Коллеги сказали много полезного, но общего концепта не складывалось. Точечные улучшения предложили, ошибки нашли, а в итоге все сводится к тому, что надо просто «перерисовать нормально».

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

Ну что, получилось? Что-то получилось. На этот вариант, по крайней мере, уже не страшно смотреть.

Акценты есть, хоть и расставленные просто так, без особого осмысления, чисто по наитию. Так, конечно, нельзя. Детализируем постановку. Крутись как хочешь, дизайнер, а удобно должно быть в любой ситуации. На все 30 вопросов пассажир должен найти ответ за пару секунд.

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

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

Еще несколько итераций. Занудно, методично, каждый пункт. И — все получилось!

Коридорное тестирование. Мы совали распечатанный листок случайным людям в офисе и своим домашним. Совали и тут же задавали какой-нибудь каверзный вопрос.

— Ты в такси, сейчас 14:30. Успеваешь на рейс?
 — На какую дату будешь бронировать гостиницу?
 — Какой терминал?
 — Что будешь делать на пересадке?

И так далее.

Тест пройден!

Отдельно мы обсуждали (и очень долго), нужно ли для простых перелетов туда-обратно сделать так, чтобы весь билет помещался на одной странице. Решили, что нет. В том числе потому, что мы не можем влиять на объем и содержание блоков «Информация о тарифе» и «Ограничения», их определяет конкретный перевозчик.

На детских билетах допустимо немного пошалить.

Выдохнули и пошли оттачивать детали:

Долгожданный кризис

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

Мы строим гипотезы. Основных две.

1. Нет «истории», отдельно тексты писем (помните про них?), отдельно билеты.

2. Слишком много мелких ошибок. Например, в макете билета в Лондон — российский номер паспорта. Время прилета и вылета следующего рейса отличается от времени ожидания. Отловить их очень сложно, потому что данных очень много и они связаны между собой.

Ошибки будем проверять трижды. А чтобы получились «истории», собираем прототипы-презентации на Readymag. Выбираем три основных сценария.

1. Анатолий Галкин летит из Санкт-Петербурга в Москву на встречу с заказчиком. На один день. Туда — рано утром во вторник, обратно — поздно вечером. Билет покупает через мобильное приложение.

2. Семья Соболевых отправляется на Мадейру (город Фунчал) в отпуск на десять дней. Туда летят с пересадкой (сэкономить), обратно — без (все устали, скорее бы домой).

3. Андрей Ремарков, программист-стартапер, летит в Сан-Франциско в Кремниевую долину в поисках лучшей жизни. Берет билет в один конец. Билет покупает на мобильном сайте.

Увидев улыбку на лице заказчика, приступили к работе над ошибками.

Распечатываем все прототипы и проверяем по линейке каждую строчку. Потом — еще раз и еще. Все счастливы, истории приняты. Думаете это конец? Не-е-е-ет.

Делаем гайд

Теперь дело за малым. Написать подробную инструкцию, как из наших прототипов собирать билеты для любых перелетов.

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

Результат и финал

Как вы уже знаете, компания «Синдбад» прекратила свое существование. За пару дней до печальной новости в «Коммерсанте» мы общались с заказчиком в скайпе, он просил нас прислать пару иконок для верстальщика, оставалось сделать последние штрихи. Не вышло. Бизнес — это бизнес. Очень жаль, это был очень крутой заказчик и очень крутой проект.

Другие кейсы