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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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