sobaka@pavlova.cc
+7 (812) 320-57-87

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

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

~ 590 000 ₽
Разработали дизайн бумажного авиабилета и спроектировали ключевые электронные письма.
Контекст
Результат
Бюджет
2018
Заказчик
Sindbad — агентство по продаже авиабилетов. В начале 2018 года оно занимало четвертое место в России по объему продаж. К сожалению, в августе 2018 года «Синдбад» закрылся. Но мы успели поработать с этой компанией и даже занесли ее в список любимых клиентов. Впрочем, обо всем по порядку.
Коти - талисман Синдбада | SobakaPav.ru
Котик — маскот «Синдбада»
Изначальная задача
С помощью email-рассылки на всех этапах оформления заказа, а также до и после перелета рассказать клиенту о существовании компании «Синдбад». Письма должны быть полезны для пользователя, это касается как содержания, так и оформления. «Полезность» писем должна выделять компанию среди других поставщиков авиабилетов.
Пример маршрутной квитанции | SobakaPav.ru
Не нужно быть гением копирайтинга, маркетинговым гуру и звездой дизайна, чтобы увидеть все недостатки
План действий — ожидания и реальность
  • Систематизировать уже существующие письма и их содержание.
  • Определить, в каких еще ситуациях можно отправлять покупателям письма и какая информация должна быть в каждом письме.
  • Создать общую схему email-коммуникации с покупателем (эдакий урезанный CJM).
  • Написать тексты писем по выработанной схеме и в рамках определенной стилистики.
  • Оформить результат в виде прототипа и разработать дизайн на основе фирменного стиля компании.
  • Поняли, что нужны не новые тексты в аккуратном шаблоне, а три суперписьма.
  • Проектировали сразу в дизайне, обращая внимания на всё — от цвета фона до запятых в тексте.
  • Расширили проект (нехило так расширили) и включили в него дизайн бумажного билета.
  • Разработали гайд, чтобы разработчики понимали значение каждого пикселя и строчки, а заказчик мог развивать дизайн самостоятельно.
  • После первых положительных результатов заказчик снял ограничения по бюджету и срокам, мы работали итеративно и одной командой.
Что мы собирались сделать?
Что в итоге произошло?
Аналитика
Первым делом мы рассортировали все письма и принялись терзать заказчика вопросами «а зачем отправлять это письмо», «что будет, если ребенок летит один без сопровождения взрослого» и т. п. В результате появился документ, где коротко описаны все 28 писем, которые клиент «Синдаба» может получить.
Как можно сделать наши письма полезными? Для начала надо понять, кто вообще будет эти письма получать. Составили портреты.
Это очень важное упражнение, потому что, когда дело касается массовых услуг вроде перелетов, такси или интернет-банков, велик соблазн экстраполировать свой личный опыт на всех. Но тогда вам и в голову не придет, что Елена Ивановна распечатывает все письма и бумажки «на всякий случай», а Николай Иванович не очень хорошо разбирается в технике, но никогда в жизни не признается, что ему нужна помощь. С такими набросками мы отправились на поиск идей, что же может быть в письмах.
Результаты проведенного брейншторма | SobakaPav.ru
Провели брейншторм с самыми безумными идеями
Например, придумали сервис «виртуальный попутчик»: онлайн-консультанта, который в чате «Телеграма» будет сопровождать не слишком опытного путешественника, подсказывать номера выходов в аэропорту, успокаивать, если тот волнуется, разруливать сложные ситуации, если что-то уже произошло — например, пассажир опоздал на рейс.
Честно говоря, тут нас ждала проблема. Ответить на все действительно важные для пассажира вопросы практически невозможно — вариантов слишком много.
Комментарии и идеи от заказчика | SobakaPav.ru
Заказчик прокомментировал каждую идею и предложил свои
Добавьте к этому десять часов разговоров, пару личных встреч и бесконечную переписку в почте.
Письма
Мы собрали достаточно информации для того, чтобы приступить к текстам писем. Напомним, мы собирались переписать все существующие письма человеческим языком, улучшая всё, что можно улучшить. Начинаем с прототипов, дизайн будет потом.
Изложили информацию о заказе в прототипе письма | SobakaPav.ru
Для начала последовательно изложили в письме всю информацию о заказе
Первый заход на письмо с полезной информации. И уже очевидно, что эта полезность несколько надуманная.
Поиск информации для полезного письма | SobakaPav.ru
Прикинули, какое полезное письмо мы можем отправить пассажиру
Теперь важно определиться с общей структурой и прогнать по ней все три десятка писем. Точнее, мы так планировали. После демонстрации заказчику первых вариантов приняли три важных решения.
1. Нужно делать не просто хорошо, а круто.
2. Нужно делать сразу в дизайне.
3. Достаточно трех главных писем: подтверждение покупки, допродажа и приглашение зарегистрироваться на рейс. Остальные, конечно, нужно переписать, но пока это не главное.
А еще — делаем дизайн бумажного билета. Про него расскажем позднее.
Сказано — надо делать. В качестве постановки традиционно используем модель информационных ожиданий.
Google Docs
Детализировали требования к содержанию письма в модели информационных ожиданий
Концепт сложился с первого раза — и для десктопа, и для мобильных устройств.
Макеты писем для десктоп и мобильной версий | SobakaPav.ru
По модели сразу получился полноценный макет, который можно улучшать и дорабатывать
Теперь тюнинг деталей. Какая еще «маршрутная квитанция», если это билет? Почему бы не добавить пиктограммы? Показывать или нет в письме паспортные данные? Очень много мелких вопросов, замечаний, комментариев.
Вторая итерация
И еще тюнинг. В том числе — визуальный.
Финальный вид макетов письма | SobakaPav.ru
Финальный вид макетов первого письма
Письмо с допродажей изначально мимикрировало под полезное. Точнее, мы хотели сделать действительно полезное письмо, а все допуслуги предлагать в довесок.
Модель инфомрационных ожиданий допродажи письма | SobakaPav.ru
Собрали вопросы, которые могут возникнуть у пассажира до вылета
Получилось довольно бестолковое письмо. Читать его будут разве что очень терпеливые и при этом редко летающие пассажиры.
Письмо чек-лист с полезными комментариями | SobakaPav.ru
Написали письмо с чек-листом. А вдруг кто-то не догадается собрать багаж?
Что ж. Не будем строить из себя белых и пушистых. Допродажа — значит, допродажа.
Вторая итерация допродажи с помощью писем | SobakaPav.ru
Хотя это чистая реклама, мы старались сохранить нейтральный тон
Мы решили оформить отдельные предложения карточками (сам формат честно подсмотрели у «Медузы»). Набор допуслуг будем выбирать в зависимости от направления и других данных, которые мы знаем о пассажирах. Сразу придумали несколько вариантов карточек, чтобы письмо не выглядело скучным и монотонным.
Полезные письма о предстоящем полете | SobakaPav.ru
Рекламные карточки, да еще и отличающиеся друг от друга, — это отличный шаблон
Последнее письмо — приглашение зарегистрироваться на рейс.
Модель информационных ожидания для письма напоминания о регистрации на рейс | SobakaPav.ru
Модель информационных ожиданий для письма с приглашением зарегистрироваться
Здесь нужно сразу дать номера бронирования, прямую ссылку на регистрацию, а также повторить всю информацию по перелету, включая билеты. Если пассажир ищет в почте что-то про свой перелет, он первым делом заглянет в последнее письмо.
Письмо, получаемое пользователем за сутки до вылета | SobakaPav.ru
Последнее письмо, которое пассажир получает за сутки до вылета
Как выглядят письма на устройствах | SobakaPav.ru
Билет
Казалось бы, что может быть интересней, чем взять неприглядный авиабилет с кучей информации и перепроектировать его аккуратно и даже красиво. Такая дизайнерская-дизайнерская задачка.
Первичный вид билетов заказчика | SobakaPav.ru
Так выглядели билеты «Синдбада»
Для вдохновения мы изучили маршрутные квитанции авиакомпаний и других агентств.
Анализ конкурентов: авиационные билеты | SobakaPav.ru
Аккуратно у Аэрофлота
Иностранные авиакомпании не заморачиваются.
Анализ конкурентов: авиационные билеты иностранных компаний | SobakaPav.ru
LOT, кто, куда, когда летит? Попробуй разберись!
Велик соблазн выкинуть (или хотя бы спрятать) всю второстепенную информацию и оставить только важную. Мы спросили у заказчика, а что реально важно? Оказалось, что каждая строчка. Да, в билете есть и чисто юридическая информация, и строчки, важные только для бухгалтерии, но бо́льшая часть информации может понадобиться пассажиру. Особенно если что-то пойдет не так и ему придется звонить из Лондона в агентство или жестами в китайском аэропорту выяснять нужные сведения.
Первое и неоспоримое ограничение — вся информация важна. Давайте просто причешем ее и сделаем понятней. Делаем первый подход.
Отрисованные элементы билета для последующего упрощения проектирования | SobakaPav.ru
Отрисовали все элементы билета, чтобы было проще проектировать
Ожидаемо, ничего принципиально не изменилось. Это был, скорее, технический шаг. Теперь у нас есть отрисованные элементики и можно заниматься собственно дизайном.
Было бы хорошо задаться контекстом использования. И вообще разобраться, в каких ситуациях пассажиру удобен бумажный билет.
Обстоятельства использования бумажных билетов | SobakaPav.ru
Задались контекстами использования бумажного билета
Еще в самом начале проекта появилось несколько идей общего плана. Во-первых, хорошо бы дать пассажиру наглядную шпаргалку. Во-вторых, лист А4 можно сложить втрое и положить в паспорт. Да, конечно, не все так делают. Кто-то складывает в четыре раза, кто-то распечатывает все (вообще все!) письма, которые получает от агентства или авиакомпании, включая рекламные, кто-то недоумевает, зачем в XXI веке бумажный билет.
Удобный формат использования авиационного билета | SobakaPav.ru
Обнаружили, что сложенный втрое билет отлично вписывается в макет письма
Добавляем шпаргалку на треть листа.
Памятка с информацией о перелете | SobakaPav.ru
Добавили шпаргалку с основной информацией про перелет
Первое впечатление — интересно получается. Но это только первое впечатление. Информация в шпаргалке дублируется, а сам формат не масштабируется для перелета с тремя пересадками. Давайте действовать смелее, пусть весь билет будет шпаргалкой. Быстро набросали такой вариант.
Вариант письма как одна большая памятка | SobakaPav.ru
Попытались превратить всё письмо в одну большую шпаргалку
Попутно отрисовали идею заказчика о том, что шпаргалка может быть вообще на втором листе — к примеру, про пересадку с одного рейса на другой.
Дополненный вариант с пересадочными рейсами | SobakaPav.ru
Отрисовали еще одну идею мини-шпаргалки для пересадочных рейсов
Отчаяние берет. Вроде все правильно делаем, вводные четкие и конкретные, а результат стыдно показывать. Нужно подключить больше людей. Раздали наши черновики всем дизайнерам (и не только) в офисе для поиска если не решения, то хотя бы корня проблемы.
Обсуждение полученных результатов внутри команды | SobakaPav.ru
Обсудили результаты внутри команды
Коллеги сказали много полезного, но общего концепта не складывалось. Точечные улучшения предложили, ошибки нашли, а в итоге все сводится к тому, что надо просто «перерисовать нормально».
Обсуждение в коллективе | SobakaPav.ru
Призвали на помощь коллективный разум
Творчество — не путь самурая. Мы отложили в сторону картинки и стали думать, почему получается плохо. И поняли: в прототипе напрочь отсутствуют акценты. Контекстов использования, если вы уже забыли, больше десяти, и акценты расставлять просто боязно. Но надо. Дальше было много крови. Менеджер ругался матом, рисовал на доске и требовал сделать шрифт крупнее, еще крупнее, еще крупнее.
Расставили акценты в письме | SobakaPav.ru
Поняли принцип расстановки акцентов
Ну что, получилось? Что-то получилось. На этот вариант, по крайней мере, уже не страшно смотреть.
Первый жизнеспособный вариант | SobakaPav.ru
Сделали первый жизнеспособный вариант
Акценты есть, хоть и расставленные просто так, без особого осмысления, чисто по наитию. Так, конечно, нельзя. Детализируем постановку. Крутись как хочешь, дизайнер, а удобно должно быть в любой ситуации. На все 30 вопросов пассажир должен найти ответ за пару секунд.
Список вопросов к информации, содержащейся в билете | SobakaPav.ru
Составили список вопросов, на которые должен отвечать билет
Для надежности мы сделали еще одну непопулярную в дизайнерских кругах вещь — передали проект другому дизайнеру. Не «переделать вообще все», а принять и потащить дальше. Про это можно написать отдельную статью, а пока просто поверьте, что это отличный способ выйти из кризиса.
Финальный прототип с дополненной информаций списка информационных ожиданий билета  | SobakaPav.ru
Дотюнили прототип с учетом модели информационных ожиданий
Круто? Нет. Проводим коридорное тестирование и обнаруживаем, что внешность обманчива и пока получилось почти так же сложно, как и в начале. Пробуем сделать консервативный вариант.
Дизайн билета | SobakaPav.ru
Попробовали сделать консервативней
Еще несколько итераций. Занудно, методично, каждый пункт. И — все получилось!
Финальный вариант удобного билета | SobakaPav.ru
Так выглядит авиабилет, которым удобно пользоваться дома, в такси, в аэропорту, в самолете, на пересадке…
Коридорное тестирование. Мы совали распечатанный листок случайным людям в офисе и своим домашним. Совали и тут же задавали какой-нибудь каверзный вопрос.
— Ты в такси, сейчас 14:30. Успеваешь на рейс?
 — На какую дату будешь бронировать гостиницу?
 — Какой терминал?
 — Что будешь делать на пересадке?
И так далее.
Тест пройден!
Отдельно мы обсуждали (и очень долго), нужно ли для простых перелетов туда-обратно сделать так, чтобы весь билет помещался на одной странице. Решили, что нет. В том числе потому, что мы не можем влиять на объем и содержание блоков «Информация о тарифе» и «Ограничения», их определяет конкретный перевозчик.
Заполнили билет реальной информацией | SobakaPav.ru
Много букв и непонятной служебной информации — обязательный атрибут серьезного документа. Мы не шутим
На детских билетах допустимо немного пошалить.
Добавили визуальный контент в билет: иллюстрация ракеты для детского билетика | SobakaPav.ru
Почему на детском авиабилете ракета, а не самолетик? Потому что самолетиков в аэропорту и так хватает!
Выдохнули и пошли оттачивать детали:
  • На каком языке мы пишем название города?
  • Если перелет простой типа «Питер — Москва», то можно ли уместить на одном листе всё? Или пожертвовать шапкой?
  • Что если название аэропорта не помещается в строку?
  • Нужно ли пояснять класс брони или лучше спрятать его за непонятным «КБ»?
  • А если тип воздушного судна — «автобус» или «поезд»? Не удивляйтесь, поверьте, что так бывает.
  • Сколько шапок сделать для билета туда-обратно — одну или две? А что со служебной информацией?
Как выглядит билет | SobakaPav.ru
Долгожданный кризис
Проект шел достаточно гладко. Даже внезапное изменение планов показалось вполне естественным для всех участников процесса. Но в какой-то момент случился неизбежный на больших проектах кризис, и наш прекрасный заказчик, с которым полное взаимопонимание, который с головой в процессе, который не истерит, когда видит откровенно плохой результат (понимая, что это просто часть пути до результата хорошего), говорит, что все не так. Вообще все не так.
Мы строим гипотезы. Основных две.
1. Нет «истории», отдельно тексты писем (помните про них?), отдельно билеты.
2. Слишком много мелких ошибок. Например, в макете билета в Лондон — российский номер паспорта. Время прилета и вылета следующего рейса отличается от времени ожидания. Отловить их очень сложно, потому что данных очень много и они связаны между собой.
Ошибки будем проверять трижды. А чтобы получились «истории», собираем прототипы-презентации на Readymag. Выбираем три основных сценария.
1. Анатолий Галкин летит из Санкт-Петербурга в Москву на встречу с заказчиком. На один день. Туда — рано утром во вторник, обратно — поздно вечером. Билет покупает через мобильное приложение.
2. Семья Соболевых отправляется на Мадейру (город Фунчал) в отпуск на десять дней. Туда летят с пересадкой (сэкономить), обратно — без (все устали, скорее бы домой).
3. Андрей Ремарков, программист-стартапер, летит в Сан-Франциско в Кремниевую долину в поисках лучшей жизни. Берет билет в один конец. Билет покупает на мобильном сайте.
Увидев улыбку на лице заказчика, приступили к работе над ошибками.
Замечания к билету | SobakaPav.ru
Список замечаний. Особенно важный пункт — десятый
Распечатываем все прототипы и проверяем по линейке каждую строчку. Потом — еще раз и еще. Все счастливы, истории приняты. Думаете это конец? Не-е-е-ет.
Делаем гайд
Теперь дело за малым. Написать подробную инструкцию, как из наших прототипов собирать билеты для любых перелетов.
Инструкция по сборке билета с помощью созданных блоков | SobakaPav.ru
Менеджер описывает прототипы
Убедиться, что в результате работы сложилась дизайн-система, и собрать все в финальный гайд.
Результат и финал
Как вы уже знаете, компания «Синдбад» прекратила свое существование. За пару дней до печальной новости в «Коммерсанте» мы общались с заказчиком в скайпе, он просил нас прислать пару иконок для верстальщика, оставалось сделать последние штрихи. Не вышло. Бизнес — это бизнес. Очень жаль, это был очень крутой заказчик и очень крутой проект.

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

~ 590 000 ₽
Бюджет
Результат
Другие кейсы
Made on
Tilda