Новый сайт аэропорта Внуково: рассказывают разработчики

Поделюсь опытом, как мы с командой создали новый сайт для Международного аэропорта Внуково.

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

Какие работы вошли в проект:

Собрал самое интересное из того, что сделали для создания понятного, быстрого и удобного сайта с множеством деталей, доступного для аудитории разных стран.

1. Прототипы и дизайн

Хотелось объединить физический аэропорт и веб-сайт в одну экосистему. Пассажир, который заранее спланировал маршрут на сайте, в самом здании сможет быстро сориентироваться по аналогичным указателям.

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

Новый сайт аэропорта Внуково: рассказывают разработчики

Если планируете выходить на такие масштабные проекты, готовьтесь к внушительным объемам работы и обсуждений.

Объем работы:

41 человек от Riverstart и 23 представителя разных служб и департаментов от заказчика вошли в команду проекта.

110 экранов с адаптивами и около 45-50 уникальных дизайн-шаблонов подготовила команда дизайна.

До 5 часов доходила продолжительность некоторых созвонов с обсуждением ux-дизайна портала.

Я особенно ценю большие проекты, потому что они дают хороший буст к профессиональному развитию и мотивируют искать способы оптимизировать работу.

Дизайнеры из моей команды ненавидят рутину, поэтому подбирают способы ускорить механическую работу и побольше покреативить. К примеру, используют дизайн-токены для быстрой связки дизайна и верстки. Для Внуково нужно было сделать 110 макетов с адаптивами и 45-50 шаблонов, с дизайн-токенами время на разработку дизайн-макетов ощутимо сократилось.

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

2. Онлайн-табло

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

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

Новый сайт аэропорта Внуково: рассказывают разработчики

3. Карточка рейса

Из табло можно перейти на карточку конкретного рейса со всей информацией, которую нужно знать пассажиру.

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

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

Новый сайт аэропорта Внуково: рассказывают разработчики

Гораздо спокойнее иметь все актуальные данные в телефоне под рукой, чем ходить проверять табло в зале или вслушиваться в объявления в аэропорте.

4. Интерактивная карта аэропорта

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

Новый сайт аэропорта Внуково: рассказывают разработчики

5. Личный кабинет партнера

Для работы с партнерами нужен был отдельный Личный кабинет. Мы разработали его на Laravel индивидуально для Внуково.

ЛК партнера не отображается в общем интерфейсе, менеджер формирует для партнера логин и отправляет вместе со ссылкой на форму для входа. В кабинете доступны все документы для работы каждого представителя компании с Внуково, контакты личного менеджера и правила, обязательные к прочтению.

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

Новый сайт аэропорта Внуково: рассказывают разработчики

6. Трехъязычный контент

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

Мы собрали две команды переводчиков, в которые вошли носители языков из Англии и Китая для обязательной проверки.

Новый сайт аэропорта Внуково: рассказывают разработчики

Ради интереса мы подсчитали, сколько слов обработала команда, которая работала с контентом — переводом, корректировкам и размещением. В сумме на трех языках получилось 263 000 слов и бессчетное количество работы по корректировке и синхронизации текстов.

Объем работы:

Около 80 000 слов перевели на английский и 73 000 на китайский язык. Для сравнения, «1984» Джорджа Оруэлла состоит из 75 151 слова, а «Война и мир» Льва Толстого — из 188 088.

7. Сложные интеграции

Чтобы все функции сайта работали без сбоев, мы провели множество интеграций с внутренними системами аэропорта:

  • работа онлайн-табло;
  • изменение сезонного расписания;
  • система покупки авиабилетов;
  • проверка статусов грузов;
  • онлайн-оплата парковок;
  • примерно 17 форм связи с разными департаментами.

И интеграции со сторонними сервисами:

  • Телеграмм, ВК и email для уведомлений об изменении статусов рейсов;
  • HH.ru для выгрузки вакансий;
  • Яндекс.Карты для пояснений, как удобнее добраться до аэропорта.

8. Оптимизация загрузки

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

Для проекта мы разработали архитектуру, которая позволяет системе стабильно работать при нагрузках. Тестировали нагрузки по максимуму — сайт летает и с 10 000 пользователей в секунду.

9. Инклюзивность

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

Каждый режим проверен на обязательные параметры:

  • контрастность;
  • отсутствие вставок постороннего контента внутри значимого;
  • наличие заменяющих текст изображений;
  • возможность выполнить любое действие с помощью клавиатуры без ограничения по времени;
  • корректная работа программных средств экранного доступа для слабовидящих,
  • и прочих, необходимых для использования сайта.
Новый сайт аэропорта Внуково: рассказывают разработчики

Новый сайт Внуково уже работает. В комментариях делитесь впечатлениями и вопросами, а если было интересно, оцените пост)

Подписывайтесь на блог на VC, в нем делюсь советами и опытом по созданию IT-проектов. Например, о том как мы в компании следим за окупаемостью проектов.

164164
11
145 комментариев

Отличная работа, все удобно и читается легко (кроме меню пожалуй). Единственное, я бы добавил пару фичей
- Поместил на видное место кнопку для помощи в трансфере пассажирам с ограниченными способностями
- Добавил кнопку для людей с проблемами зрения
- Вместо RU, EN - проще использовать флаги стран
Так сделаем сайт более дружелюбных для всех. Но это мое видение. Работа по-прежнему отличная.

13

Как связан флаг страны с языком ? Какой флаг вешать для EN?

20

Cпасибо за советы, мы вообще со всеми ними согласны. Людям с ограниченными возможностями здоровья и пассажирам с детьми мы уделили особое внимание: ссылки на информацию для их перелета закреплены в первом экране карточек рейса. А переключение версии для слабовидящих закреплена в хеддере и меню сайта) Кстати, почему меню показалось неудобным? Мы наоборот считаем его сильно нативным, так как большое количество страниц мы разделили по аудиториям аэропорта: для пассажиров, партнеров и тех, кто хочет узнать больше про сам аэропорт)

2

Лучше писать словами: «русский язык», «english». Причём так, чтобы можно было найти поиском по странице.

1

Разработчики сайта: UX-дизайн, 160 страниц с уникальным дизайном, интеграции со внутренними системами аэропорта.

Тем временем новости на сайте:

12

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

9

Ребзя, а вот подскажите, как именно вы тестировали это чудо на 10к пользователей?

3