Дизайн Дмитрий Глумов
3 055

История о том, как создать дизайн-систему сайтов аэропортов для пассажиров

Мы, digital-агентство Uplab, занимаемся разработкой и продвижением сайтов для компаний-лидеров рынка.

В закладки
Аудио

Последний год мы работаем над сайтами крупных региональных аэропортов.

В начале осени 2018-го года мы запустили новый сайт международного аэропорта Екатеринбурга — «Кольцово». Зимой — Ростова-на-Дону «Платов». Уже в 2019-м году: аэропрта Самары «Курумоч», Нижнего Новгорода «Стригино» и сайт аэропорта Нового Уренгоя, сделанные по одной дизайн-системе. Подробнее — в кейсе на Behance.

Клиент

«Аэропорты Регионов» — ведущий аэропортовый холдинг России. В него входят международные аэропорты нескольких городов-миллионников:

  • «Кольцово» Екатеринбурга;
  • «Курумоч» Самары;
  • «Стригино» Нижнего Новгорода;
  • «Платов» Ростова-на-Дону.

Также управляющая компания реализует проекты строительства нового аэропорта Саратова и модернизации аэропортов Петропавловска-Камчатского и Нового Уренгоя.

По итогам 2018 года услугами аэропортов холдинга воспользовалось 15 млн 263 тысячи пассажиров.

Причины редизайна

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

Аэропорты холдинга по-настоящему современные. Например, «Платов» первый в России получил пять звезд Skytrax — самого влиятельного рейтинга аэропортов в мире.

Поэтому сайты должны были соответствовать современному и высокому уровню самих аэропортов.

Решения

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

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

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

Пример тех же аэропортов на десктопах:

Сейчас формируется тренд — на главной странице сразу предлагать два самых распространённых пользовательских сценария: «Прилёт» и «Вылет». А остальную информацию помещать на следующие уровни, выдавая постепенно, по запросу.

Главная

Было:

Стало:

Сегодня люди регулярно имеют дело с большим количеством самых разных сайтов и интерфейсов. Пользовательский опыт эволюционирует, а с ним и экспертиза компаний, которые этим опытом управляют. Интерфейсы становятся лучше и проще, потому что накапливается всё больше объективных данных о поведении.

И поэтому нами предварительно были спроектированы сценарии, по которым люди будут пользоваться продуктом, в данном случае — сайтом аэропорта.

На первом же экране аудитория разделяется на пассажиров и партнёров:

Далее — на тех, кого интересуют вылеты, и тех, кого интересуют прилеты:

На первом экране появляются лишь самые необходимые пассажирам сервисы:

  • табло;
  • сезонное расписание;
  • как добраться;
  • парковка;
  • схема аэропорта.

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

Табло

В первом релизе информацию в разделе «Табло» на мобильных устройствах надо было свайпить.

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

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

Как добраться

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

Крупные карточки содержат подробные данные о рейсах: номер маршрута, расписание, время в пути, перечень остановок.

Реклама на сайте

Сайты для «Аэропортов Регионов» — в первую очередь решают задачи пользователей, а не продают что-либо. Реклама дополнительных услуг выполнена нативно и ненавязчиво, в рамках общей дизайн-концепции.

Сезонное расписание

На сайтах региональных аэропортов очень важно так называемое «сезонное расписание». В нём работает другой пользовательский сценарий, нежели в табло. Люди зачастую заранее выбирают, куда им нужно полететь в определённые даты.

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

Этот раздел тоже вынесен на главную. Так выглядит главная страница сайта аэропорта Нового Уренгоя:

Итог

Первый сайт из серии «Кольцово» уже получил несколько наград на отраслевых конкурсах: «серебро» в номинации «Инклюзивность и дизайн для всех» и «бронзу» в номинации «Сайт в сфере транспорта» на «Золотом сайте». А на премии Tagline сайт стал вторым в «Лучшей интеграции» и третьим в главной номинации «Лучший сайт года».

Агентство и команда клиента продолжают развивать эту дизайн-систему.

Ведь сегодня недостаточно просто сделать проект и сдать его — подобные сложные ресурсы требуют регулярной аналитики и петли улучшений. К счастью, специалисты «Аэропортов Регионов» это понимают и предоставляют для этого все возможности.

Все сайты, опубликованные на данный момент:

#редизайн #авиа

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Дмитрий Глумов", "author_type": "self", "tags": ["\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u0430\u0432\u0438\u0430"], "comments": 27, "likes": 42, "favorites": 82, "is_advertisement": false, "subsite_label": "design", "id": 70217, "is_wide": true, "is_ugc": true, "date": "Tue, 04 Jun 2019 12:10:39 +0300" }
{ "id": 70217, "author_id": 306173, "diff_limit": 1000, "urls": {"diff":"\/comments\/70217\/get","add":"\/comments\/70217\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/70217"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
27 комментариев

Популярные

По порядку

Написать комментарий...
8

Много мелких косяков и спорных решений по части интерфейса (мало функциональная шапка на 50% экрана, расположение важного контента на странице, механика некоторых элементов, банальные ошибки и так далее). Масса моих знакомых включая меня самого, что от старого сайта аэропорта стрелялась, что от нового (речь про Кольцово), всё это напоминает выжимку трендов небрежно собранных воедино.

Ответить
3

Открыл сейчас сайт Кольцово — лично мне всё понятно и любой сценарий, который бы этот сайт для меня должен был решить, решается в пару кликов. Что с ним не так?

Ответить
0

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

Зашел еще раз, вспомнил что выбесило. В таблице прилетов/вылетов ожидаемое время по расписанию/фактическое с указанием даты просто в ступор ввело. Так и хочется дату за фактическое время принять. Зачем вообще везде дату писать? Ну хотя бы на сегодня уберите ее

Ответить
2

Довольно сложно сделать так, как Вы говорите, видя цифры 10:50, а под ними 04.06. Сложно угодить специфическому восприятию каждого отдельного человека — приходится выбирать то, что подходит большинству. В данном случае вроде всё норм.

Ответить
0

Блиц-опрос: во сколько вылетает самолёт?

Ответить
3

Очевидно, что в 45:07. Вы странный.

Ответить
0

А теперь объясните, зачем повторять эту информацию по 2 раза?

Ответить
0

Но ведь вчера сегодня было завтра. А завтра сегодня станет вчера.

Ответить
1

в 7 часов 6 минут. 45 апреля

Ответить
0

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

Ответить
3

А можно подробнее про исследования? Что, как и какими методами делали? И как мерили инклюзивность дизайна?

Ответить
2

Илья, подробно в комментариях тему исследований раскрыть не представляется возможным. Вероятно, это тема для следующей статьи. Если коротко, то данные на основе открытых источников, данные собранные собственными seo-аналитиками, данные Google Analytics более десятка разных сайтов аэропортов, доступом к которым мы располагаем. Были и юзабилити-тестирование пользователей и тестирование структуры методом карточной сортировки. Что касается инклюзивности, то отдельно, как параметр, мы его не мерили, но, если речь про версию для слабовидящих, то она реализована с привлечением соответствующей экспертизы.

Ответить
1

Исследовали как он выглядит на iMac 27" с расстояния 3 метра, видимо.
На 21" мониторе - красивое, но бесполезное говно. В плане полезности - на порядок хуже старого уродливого сайта.

1) На первой странице рейсы... не поместились. Только неграмотная надпись "Онлайн-табло" (чем "Рейсы" и даже просто "Табло" не угодили?) на 3/4 экрана.
2) Поле для поиска рейса хрен увидишь. Ну, спасибо хоть не display: none в качестве оформления.
3) Поиск не ищет по совмещёнными рейсам. На фотке - AF-4611 вылетает в 12.00. На старом, кстати, ищет.
4) Из-за группировки совмещённый рейс "глазами" и по Ctrl+F тоже не найти, нужно "разворачивать" группировки. С чартерами время которых "где-то завтра" нужно разворачивать все группировки.
5) Популярный бред про использование кук. Люди, зачем?! Мы не в Евросоюзе!

Тестировщики, похоже, самолётами не летают.

Ответить
1

Cookies необходимы на законодательном уровне при сборе данных на международных ресурсах. Функционал отображения и поиска совмещенных рейсов, а также времени и даты выполнены в соответствии с требовании внутренних регламентов и IT-службы аэропорта.

Ответить
2

Почему никто не берется переделать сайт для Домодедово?)

Ответить
0

Спасибо за идею, реально классный сайт в плане "было/стало" ибо сделать хуже практически нереально :D

Ответить
2

Отличный концепт. Я не так близок к UX/UI, но с точки зрения обычного пользователя это как глоток свежего воздуха. Уже порядком поднадоел тренд на цифровой "евроремонт": разные скргуления и кислотные раскраски стартовых страниц, а так же желание впихнуть на стартовую страницу все что можно и нельзя.

Ответить
1

Сценарий для встречающих не проработан вообще. Один и тот-же рейс в старой и новой версии сайта, открываю с телефона.

Было: фактическое время отправления, состояние выдачи багажа, вся информация на одном экране
Стало: время отправления по графику, багажа нет, обновляешь страницу листаешь до статуса

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

Ответить
0

Действительно, отдельный раздел "Встречающим" не вошел в финальный вариант проекта в ходе обсуждения на стороне Заказчика, так как он по содержанию дублирует другие разделы.
А вот багаж отсутствие в карточки багажа – технологическое ограничение.
Справедливое замечание про статус, в следующем релизе табло будет существенно доработано и статус будет сразу.

Ответить
0

Выглядит сочно. Поделитесь метриками / конверсиями в формате было/стало?

Ответить
2

Общее увеличение глубины просмотра на 30%.
Общая посещаемость выросла на 7%.
В разделах: онлайн-табло, главная, парковка, партнерам, об аэропорте, новости, еда и покупки в аэропорту, бизнес залы, схема аэропорта, поиск – средний рост посещаемости составил 396%
Глубина просмотра выросла на 30%
Показатель времени на сайте снизился на 9%, снижение посещений страницы поиска на 28%, что связано с более быстрым поиском нужной информации.
_____
Период: апрель '18 – апрель '19

Ответить
0

Какими конверсиями? В Новый Уренгой стали больше летать, потому что там редизайн сайта аэропорта?

Ответить
0

По вашему редизайн не может повлиять на конверсию? Я правильно вас понял?

Ответить
0

По-моему этот пост уже был здесь

Ответить
0

Тоже видел

Ответить
0

Ярослав, значит, кейс запомнили. Тот материал провисел час всего.

Ответить
0

"Мы занимаемся разработкой и продвижением сайтов для компаний-лидеров рынка". Норм позиционирование!

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }