---
publishYear: 2018
name: Sindbad
title: Дизайн авиабилета и писем
excerpt: Разработали дизайн бумажного авиабилета и спроектировали ключевые электронные письма.
context: Когда пассажиры покупают авиабилеты в агентстве Sindbad, но не напрямую, а через сайты-агрегаторы вроде Aviasales или SkyScanner, они могут и не догадываться, кто в действительности отвечает за их перелет.
logo:
src: ~/assets/images/portfolio/sindbad/logo.jpg
alt: Sindbad logo
image: ~/assets/images/portfolio/sindbad/sindbad.jpg
imageAlt: Дизайн авиабилета и писем
thumbnail:
src: ~/assets/images/portfolio/cards/sindbad.svg
alt: Собака Павлова • Sindbad • Дизайн авиабилета
tags:
- log
- content-design
- ux-design
- mass
- cjm
tags2:
- Сложные системы
- Дизайн авиабилета
- Дизайн электронных писем
- UX-дизайн
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Дизайн контента](/services/content-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: content-design
- text: |
### Хотите уметь так же?
Научим писать хорошие тексты и делать хорошие интерфейсы.
collection: promo
page: txt
- collection: promo
page: mio
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: foodtrucks
- collection: portfolio
page: russpass
- collection: portfolio
page: online-express
- collection: portfolio
page: boracase
- collection: portfolio
page: biletik
- collection: portfolio
page: viking-line
director: Мы сделали лучшие авиабилеты в мире.
result:
- src: ~/assets/images/portfolio/png.png
text: Дизайн писем
link: https://drive.google.com/drive/folders/1bhS6uBKCc4hlcy6h68YiWDfIYpizL4OR?usp=sharing
- src: ~/assets/images/portfolio/png.png
text: Дизайн авиабилета
link: https://drive.google.com/drive/folders/13Av-RBizd7pF2Wu3LeD2aqa7oczAKqBI?usp=sharing
- src: ~/assets/images/portfolio/pdf.png
text: Финальные гайдлайны
link: https://drive.google.com/file/d/1M39jgA0uOhKM9DrR1iwrK_xt9zkzxbFt/view?usp=sharing
budget: ~ 600 000 ₽
metadata:
canonical: https://sobakapav.ru/portfolio/sindbad
title: UX-дизайн • Интерфейс авиабилета и электронных писем
description: "Разработали дизайн бумажного билета на самолет и спроектировали ключевые электронные письма для рассылки, которые будут помогать пассажирам с организацией полета"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/sindbad/sindbad.jpg'
width: 849
height: 665
type: website
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Заказчик](#anchor1) • [Задача](#anchor2) • [План](#anchor3) • [Аналитика](#anchor4) • [Письма](#anchor5) • [Билет](#anchor6) • [Долгожданный кризис](#anchor7) • [Гайд](#anchor8) • [Результат](#anchor9) • [Отзыв, цены, сроки](#anchor10)
</TOC>
## <a name="anchor1" />Заказчик
Sindbad — агентство по продаже авиабилетов. В начале 2018 года оно занимало четвертое место в России по объему продаж. К сожалению, в августе 2018 года «Синдбад» закрылся. Но мы успели поработать с этой компанией и даже занесли ее в список любимых клиентов. Впрочем, обо всем по порядку.
_Котик — маскот «Синдбада»_
## <a name="anchor2" />Изначальная задача
С помощью email-рассылки на всех этапах оформления заказа, а также до и после перелета рассказать клиенту о существовании компании «Синдбад». Письма должны быть полезны для пользователя, это касается как содержания, так и оформления. «Полезность» писем должна выделять компанию среди других поставщиков авиабилетов.
## <a name="anchor3" />План действий — ожидания и реальность
**Что мы собирались сделать?**
- Систематизировать уже существующие письма и их содержание.
- Определить, в каких еще ситуациях можно отправлять покупателям письма и какая информация должна быть в каждом письме.
- Создать общую схему email-коммуникации с покупателем (эдакий урезанный CJM).
- Написать тексты писем по выработанной схеме и в рамках определенной стилистики.
- Оформить результат в виде прототипа и разработать дизайн на основе фирменного стиля компании.
**Что в итоге произошло?**
- Поняли, что нужны не новые тексты в аккуратном шаблоне, а три суперписьма.
- Проектировали сразу в дизайне, обращая внимания на всё — от цвета фона до запятых в тексте.
- Расширили проект (нехило так расширили) и включили в него дизайн бумажного билета.
- Разработали гайд, чтобы разработчики понимали значение каждого пикселя и строчки, а заказчик мог развивать дизайн самостоятельно.
- После первых положительных результатов заказчик снял ограничения по бюджету и срокам, мы работали итеративно и одной командой.
## <a name="anchor4" />Аналитика
Первым делом мы рассортировали все письма и принялись терзать заказчика вопросами «а зачем отправлять это письмо», «что будет, если ребенок летит один без сопровождения взрослого» и т. п. В результате появился документ, где коротко описаны все 28 писем, которые клиент «Синдбада» может получить.
_[Содержание писем](https://docs.google.com/document/d/1i9sISLeVuY0JbnnIHzt0BQdyTX4HHLp5y9JeibamFoU/edit?usp=sharing)_
Как можно сделать наши письма полезными? Для начала надо понять, кто вообще будет эти письма получать. Составили портреты.
_[Портреты пользователей](https://drive.google.com/file/d/1aEuYvc7jXP696me0AqDgROR1REoUTz_u/view?usp=sharing)_
Это очень важное упражнение, потому что, когда дело касается массовых услуг вроде перелетов, такси или интернет-банков, велик соблазн экстраполировать свой личный опыт на всех. Но тогда вам и в голову не придет, что Елена Ивановна распечатывает все письма и бумажки «на всякий случай», а Николай Иванович не очень хорошо разбирается в технике, но никогда в жизни не признается, что ему нужна помощь. С такими набросками мы отправились на поиск идей, что же может быть в письмах.
_Провели брейншторм с самыми безумными идеями_
Например, придумали сервис «виртуальный попутчик»: онлайн-консультанта, который в чате «Телеграма» будет сопровождать не слишком опытного путешественника, подсказывать номера выходов в аэропорту, успокаивать, если тот волнуется, разруливать сложные ситуации, если что-то уже произошло — например, пассажир опоздал на рейс.
Честно говоря, тут нас ждала проблема. Ответить на все действительно важные для пассажира вопросы практически невозможно — вариантов слишком много.
_Заказчик прокомментировал каждую идею и предложил свои_
Добавьте к этому десять часов разговоров, пару личных встреч и бесконечную переписку в почте.
## <a name="anchor5" />Письма
Мы собрали достаточно информации для того, чтобы приступить к текстам писем. Напомним, мы собирались переписать все существующие письма человеческим языком, улучшая всё, что можно улучшить. Начинаем с прототипов, дизайн будет потом.
_Для начала последовательно изложили в письме всю информацию о заказе_
Первый заход на письмо с полезной информации. И уже очевидно, что эта полезность несколько надуманная.
_Прикинули, какое полезное письмо мы можем отправить пассажиру_
Теперь важно определиться с общей структурой и прогнать по ней все три десятка писем. Точнее, мы так планировали. После демонстрации заказчику первых вариантов приняли три важных решения.
1. Нужно делать не просто хорошо, а круто.
2. Нужно делать сразу в дизайне.
3. Достаточно трех главных писем: подтверждение покупки, допродажа и приглашение зарегистрироваться на рейс. Остальные, конечно, нужно переписать, но пока это не главное.
А еще — делаем дизайн бумажного билета. Про него расскажем позднее.
Сказано — надо делать. В качестве постановки традиционно используем модель информационных ожиданий.
> Модель информационных ожиданий (МИО) — простая, но очень эффективная дизайн-практика, с помощью которой можно ответить на элементарные пожелания пользователя к интерфейсу сайта или приложения. Фактически — на вопросы, которые пользователь задает этой системе. Мы используем этот инструмент в дизайне интерфейсов, и вас [тоже можем научить](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
_Детализировали требования к содержанию письма в модели информационных ожиданий_
[Модель информационных ожиданий](https://drive.google.com/open?id=1hdBLh2QBG29lh2VeB_qgaSfT8_rVVj_8)
Концепт сложился с первого раза — и для десктопа, и для мобильных устройств.
_По модели сразу получился полноценный макет, который можно улучшать и дорабатывать_
Теперь тюнинг деталей. Какая еще «маршрутная квитанция», если это билет? Почему бы не добавить пиктограммы? Показывать или нет в письме паспортные данные? Очень много мелких вопросов, замечаний, комментариев.
_Вторая итерация_
И еще тюнинг. В том числе — визуальный.
_Финальный вид макетов первого письма_
Письмо с допродажей изначально мимикрировало под полезное. Точнее, мы хотели сделать действительно полезное письмо, а все допуслуги предлагать в довесок.
_Собрали вопросы, которые могут возникнуть у пассажира до вылета_
Получилось довольно бестолковое письмо. Читать его будут разве что очень терпеливые и при этом редко летающие пассажиры.
_Написали письмо с чек-листом. А вдруг кто-то не догадается собрать багаж?_
Что ж. Не будем строить из себя белых и пушистых. Допродажа — значит, допродажа.
_Хотя это чистая реклама, мы старались сохранить нейтральный тон_
Мы решили оформить отдельные предложения карточками (сам формат честно подсмотрели у «Медузы»). Набор допуслуг будем выбирать в зависимости от направления и других данных, которые мы знаем о пассажирах. Сразу придумали несколько вариантов карточек, чтобы письмо не выглядело скучным и монотонным.
_Рекламные карточки, да еще и отличающиеся друг от друга, — это отличный шаблон_
Последнее письмо — приглашение зарегистрироваться на рейс.
_Модель информационных ожиданий для письма с приглашением зарегистрироваться_
Здесь нужно сразу дать номера бронирования, прямую ссылку на регистрацию, а также повторить всю информацию по перелету, включая билеты. Если пассажир ищет в почте что-то про свой перелет, он первым делом заглянет в последнее письмо.
_Последнее письмо, которое пассажир получает за сутки до вылета_
## <a name="anchor6" />Билет
Казалось бы, что может быть интересней, чем взять неприглядный авиабилет с кучей информации и перепроектировать его аккуратно и даже красиво. Такая дизайнерская-дизайнерская задачка.
_Так выглядели билеты «Синдбада»_
Для вдохновения мы изучили маршрутные квитанции авиакомпаний и других агентств.
_Аккуратно у Аэрофлота_
Иностранные авиакомпании не заморачиваются.
_LOT, кто, куда, когда летит? Попробуй разберись!_
Велик соблазн выкинуть (или хотя бы спрятать) всю второстепенную информацию и оставить только важную. Мы спросили у заказчика, а что реально важно? Оказалось, что каждая строчка. Да, в билете есть и чисто юридическая информация, и строчки, важные только для бухгалтерии, но бо́льшая часть информации может понадобиться пассажиру. Особенно если что-то пойдет не так и ему придется звонить из Лондона в агентство или жестами в китайском аэропорту выяснять нужные сведения.
Первое и неоспоримое ограничение — вся информация важна. Давайте просто причешем ее и сделаем понятней. Делаем первый подход.
_Отрисовали все элементы билета, чтобы было проще проектировать_
Ожидаемо, ничего принципиально не изменилось. Это был, скорее, технический шаг. Теперь у нас есть отрисованные элементики и можно заниматься собственно дизайном.
Было бы хорошо задаться контекстом использования. И вообще разобраться, в каких ситуациях пассажиру удобен бумажный билет.
_Задались контекстами использования бумажного билета_
Еще в самом начале проекта появилось несколько идей общего плана. Во-первых, хорошо бы дать пассажиру наглядную шпаргалку. Во-вторых, лист А4 можно сложить втрое и положить в паспорт. Да, конечно, не все так делают. Кто-то складывает в четыре раза, кто-то распечатывает все (вообще все!) письма, которые получает от агентства или авиакомпании, включая рекламные, кто-то недоумевает, зачем в XXI веке бумажный билет.
_Обнаружили, что сложенный втрое билет отлично вписывается в макет письма_
Добавляем шпаргалку на треть листа.
_Добавили шпаргалку с основной информацией про перелет_
Первое впечатление — интересно получается. Но это только первое впечатление. Информация в шпаргалке дублируется, а сам формат не масштабируется для перелета с тремя пересадками. Давайте действовать смелее, пусть весь билет будет шпаргалкой. Быстро набросали такой вариант.
_Попытались превратить всё письмо в одну большую шпаргалку_
Попутно отрисовали идею заказчика о том, что шпаргалка может быть вообще на втором листе — к примеру, про пересадку с одного рейса на другой.
_Отрисовали еще одну идею мини-шпаргалки для пересадочных рейсов_
Отчаяние берет. Вроде все правильно делаем, вводные четкие и конкретные, а результат стыдно показывать. Нужно подключить больше людей. Раздали наши черновики всем дизайнерам (и не только) в офисе для поиска если не решения, то хотя бы корня проблемы.
_Обсудили результаты внутри команды_
Коллеги сказали много полезного, но общего концепта не складывалось. Точечные улучшения предложили, ошибки нашли, а в итоге все сводится к тому, что надо просто «перерисовать нормально».
_Призвали на помощь коллективный разум_
Творчество — не путь самурая. Мы отложили в сторону картинки и стали думать, почему получается плохо. И поняли: в прототипе напрочь отсутствуют акценты. Контекстов использования, если вы уже забыли, больше десяти, и акценты расставлять просто боязно. Но надо. Дальше было много крови. Менеджер ругался матом, рисовал на доске и требовал сделать шрифт крупнее, еще крупнее, еще крупнее.
_Поняли принцип расстановки акцентов_
Ну что, получилось? Что-то получилось. На этот вариант, по крайней мере, уже не страшно смотреть.
_Сделали первый жизнеспособный вариант_
Акценты есть, хоть и расставленные просто так, без особого осмысления, чисто по наитию. Так, конечно, нельзя. Детализируем постановку. Крутись как хочешь, дизайнер, а удобно должно быть в любой ситуации. На все 30 вопросов пассажир должен найти ответ за пару секунд.
_Составили список вопросов, на которые должен отвечать билет_
Для надежности мы сделали еще одну непопулярную в дизайнерских кругах вещь — передали проект другому дизайнеру. Не «переделать вообще все», а принять и потащить дальше. Про это можно написать отдельную статью, а пока просто поверьте, что это отличный способ выйти из кризиса.
_Дотюнили прототип с учетом модели информационных ожиданий_
Круто? Нет. Проводим коридорное тестирование и обнаруживаем, что внешность обманчива и пока получилось почти так же сложно, как и в начале. Пробуем сделать консервативный вариант.
_Попробовали сделать консервативней_
Еще несколько итераций. Занудно, методично, каждый пункт. И — все получилось!
_Так выглядит авиабилет, которым удобно пользоваться дома, в такси, в аэропорту, в самолете, на пересадке…_
Коридорное тестирование. Мы совали распечатанный листок случайным людям в офисе и своим домашним. Совали и тут же задавали какой-нибудь каверзный вопрос.
— Ты в такси, сейчас 14:30. Успеваешь на рейс?
— На какую дату будешь бронировать гостиницу?
— Какой терминал?
— Что будешь делать на пересадке?
И так далее.
Тест пройден!
Отдельно мы обсуждали (и очень долго), нужно ли для простых перелетов туда-обратно сделать так, чтобы весь билет помещался на одной странице. Решили, что нет. В том числе потому, что мы не можем влиять на объем и содержание блоков «Информация о тарифе» и «Ограничения», их определяет конкретный перевозчик.
_Много букв и непонятной служебной информации — обязательный атрибут серьезного документа. Мы не шутим_
На детских билетах допустимо немного пошалить.
_Почему на детском авиабилете ракета, а не самолетик? Потому что самолетиков в аэропорту и так хватает!_
Выдохнули и пошли оттачивать детали:
- На каком языке мы пишем название города?
- Если перелет простой типа «Питер — Москва», то можно ли уместить на одном листе всё? Или пожертвовать шапкой?
- Что если название аэропорта не помещается в строку?
- Нужно ли пояснять класс брони или лучше спрятать его за непонятным «КБ»?
- А если тип воздушного судна — «автобус» или «поезд»? Не удивляйтесь, поверьте, что так бывает.
- Сколько шапок сделать для билета туда-обратно — одну или две? А что со служебной информацией?
## <a name="anchor7" />Долгожданный кризис
Проект шел достаточно гладко. Даже внезапное изменение планов показалось вполне естественным для всех участников процесса. Но в какой-то момент случился неизбежный на больших проектах кризис, и наш прекрасный заказчик, с которым полное взаимопонимание, который с головой в процессе, который не истерит, когда видит откровенно плохой результат (понимая, что это просто часть пути до результата хорошего), говорит, что все не так. Вообще все не так.
Мы строим гипотезы. Основных две.
1. Нет «истории», отдельно тексты писем (помните про них?), отдельно билеты.
2. Слишком много мелких ошибок. Например, в макете билета в Лондон — российский номер паспорта. Время прилета и вылета следующего рейса отличается от времени ожидания. Отловить их очень сложно, потому что данных очень много и они связаны между собой.
Ошибки будем проверять трижды. А чтобы получились «истории», собираем прототипы-презентации на [Readymag](http://readymag.com/). Выбираем три основных сценария.
1. Анатолий Галкин летит из Санкт-Петербурга в Москву на встречу с заказчиком. На один день. Туда — рано утром во вторник, обратно — поздно вечером. Билет покупает через мобильное приложение.
2. Семья Соболевых отправляется на Мадейру (город Фунчал) в отпуск на десять дней. Туда летят с пересадкой (сэкономить), обратно — без (все устали, скорее бы домой).
3. Андрей Ремарков, программист-стартапер, летит в Сан-Франциско в Кремниевую долину в поисках лучшей жизни. Берет билет в один конец. Билет покупает на мобильном сайте.
**Презентация истории Ремаркова**
_Андрей заходит на сайт и покупает билеты._
_На почту приходит письмо._
_В письме – билеты._
_Через неделю приходит второе интересное письмо._
_И третье._
Увидев улыбку на лице заказчика, приступили к работе над ошибками.
_Список замечаний. Особенно важный пункт — десятый_
Распечатываем все прототипы и проверяем по линейке каждую строчку. Потом — еще раз и еще. Все счастливы, истории приняты. Думаете это конец? Не-е-е-ет.
## <a name="anchor8" />Делаем гайд
Теперь дело за малым. Написать подробную инструкцию, как из наших прототипов собирать билеты для любых перелетов.
Убедиться, что в результате работы сложилась дизайн-система, и собрать все в финальный гайд.
## <a name="anchor9" />Результат и финал
Как вы уже знаете, компания «Синдбад» [прекратила свое существование](https://www.kommersant.ru/doc/3720941). За пару дней до печальной новости в «Коммерсанте» мы общались с заказчиком в скайпе, он просил нас прислать пару иконок для верстальщика, оставалось сделать последние штрихи. Не вышло. Бизнес — это бизнес. Очень жаль, это был очень крутой заказчик и очень крутой проект.
## <a name="anchor10" />