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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было:

Стало:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Екатеринбург;
• Ростов-на-Дону;
  
• Самара;
  
• Нижний Новгород;
  
• Новый Уренгой.
  

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