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

Привет от IT-компании Riverstart! Делимся опытом, как создали новый сайт для Международного аэропорта Внуково.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С вами была команда IT-компании Riverstart!

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