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

Контекст

Когда пассажиры покупают авиабилеты в агентстве Sindbad, но не напрямую, а через сайты-агрегаторы вроде Aviasalesили SkyScanner, они могут и не догадываться, кто в действительности отвечает за их перелет.

Заказчик

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

Котик — маскот «Синдбада»

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

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

 

План действий — ожидания и реальность

Что мы собирались сделать?

• Систематизировать уже существующие письма и их содержание. 
• Определить, в каких еще ситуациях можно отправлять покупателям письма и какая информация должна быть в каждом письме.
• Создать общую схему email-коммуникации с покупателем (эдакий урезанный CJM). 
• Написать тексты писем по выработанной схеме и в рамках определенной стилистики. 
• Оформить результат в виде прототипа и разработать дизайн на основе фирменного стиля компании.

Что в итоге произошло?

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

Аналитика 

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

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

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

Провели брейншторм с самыми безумными идеями

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

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

 

Заказчик прокомментировал каждую идею и предложил свои

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

Письма

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

 

Для начала последовательно изложили в письме всю информацию о заказе

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

Прикинули, какое полезное письмо мы можем отправить пассажиру

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

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

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

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

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

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

 

Детализировали требования к содержанию письма в модели информационных ожиданий

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

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

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

Вторая итерация

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

Финальный вид макетов первого письма

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

Собрали вопросы, которые могут возникнуть у пассажира до вылета

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

Написали письмо с чек-листом. А вдруг кто-то не догадается собрать багаж?

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

Хотя это чистая реклама, мы старались сохранить нейтральный тон

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

Рекламные карточки, да еще и отличающиеся друг от друга, — это отличный шаблон

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

Модель информационных ожиданий для письма с приглашением зарегистрироваться

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

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

Билет

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

Так выглядели билеты «Синдбада» 

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

Аккуратно у Аэрофлота 

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

LOT, кто, куда, когда летит? Попробуй разберись! 

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

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

 

Отрисовали все элементы билета, чтобы было проще проектировать

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

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

 

Задались контекстами использования бумажного билета

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

Обнаружили, что сложенный втрое билет отлично вписывается в макет письма

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

Добавили шпаргалку с основной информацией про перелет

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

Попытались превратить всё письмо в одну большую шпаргалку

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

Отрисовали еще одну идею мини-шпаргалки для пересадочных рейсов

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

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

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

Призвали на помощь коллективный разум

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

Поняли принцип расстановки акцентов

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

Сделали первый жизнеспособный вариант

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

Составили список вопросов, на которые должен отвечать билет

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

Дотюнили прототип с учетом модели информационных ожиданий

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

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

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

Так выглядит авиабилет, которым удобно пользоваться дома, в такси, в аэропорту, в самолете, на пересадке…

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

— Ты в такси, сейчас 14:30. Успеваешь на рейс? 

— На какую дату будешь бронировать гостиницу? 

— Какой терминал? 

— Что будешь делать на пересадке? 

И так далее.

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

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

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

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

Почему на детском авиабилете ракета, а не самолетик? Потому что самолетиков в аэропорту и так хватает!

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

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

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

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

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

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

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

1. Анатолий Галкин летит из Санкт-Петербурга в Москву на встречу с заказчиком. На один день. Туда — рано утром во вторник, обратно — поздно вечером. Билет покупает через мобильное приложение.
2. Семья Соболевых отправляется на Мадейру (город Фунчал) в отпуск на десять дней. Туда летят с пересадкой (сэкономить), обратно — без (все устали, скорее бы домой).
3. Андрей Ремарков, программист-стартапер, летит в Сан-Франциско в Кремниевую долину в поисках лучшей жизни. Берет билет в один конец. Билет покупает на мобильном сайте.

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

Список замечаний. Особенно важный пункт — десятый

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

Делаем гайд

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

Менеджер описывает прототипы

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

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

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

Мы сделали лучшие авиабилеты в мире.