Джек Дорси про алгоритмы лент
Новая Tesla Model Y
Подарить Plus
Редизайн ya.ru
Goku+ от TikTok
Альтман про Маска
Оживление фото LumaAI
«Умная» лампа Pixar
Роботы копируют людей
Генератор дипфейков от TikTok
Apple Event 19.02

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

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

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

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

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

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
Раскрывать всегда
Как продать туры на 3 млн рублей в небольшом городе?

Без международного аэропорта. Средняя зп в городе – 67к. И, вишенка на торте - клиент должен прийти в офис оффлайн

Выглядело это примерно так
44
реклама
разместить
Разработали космический портал для немецкой фармацевтической компании

Привет, это Коля из студии веб-разработки GRCH! Мы разрабатываем, поддерживаем и масштабируем цифровые продукты. Компания Woerwag пришла к нам за закрытым корпоративным порталом. Цель — довольные и сплочённые сотрудники. Эта задумка показалась нам очень милой и классной, поэтому тут же начали работу над проектом. Рассказываем, как сделали портал и…

Разработали космический портал для немецкой фармацевтической компании
33
22
Куда лучше вложить деньги? Кофейные аппараты или Telegram канал? Давайте разбираться!
Куда лучше вложить деньги? Кофейные аппараты или Telegram канал? Давайте разбираться!
44
11
История о том, как SEO-агентство отСЕОшило СЕБЯ на ТОП-3 по запросу "seo продвижение"
Как SEO агентстсво продвинуло сайт с помощью SEO
77
22
Как мы превратили сайт школы тату из перегруженного в стильный и минималистичный

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

11
11
Создали сайт итальянского ресторана с уникальным дизайном на Тильде и выиграли 3 место в Премии Рейтинга Рунета

Переносим гостей на улочки Флоренции без виз и авиабилетов

1313
44
11
11
Хотите создать сайт для своей компании?

Это отличная идея!

Зачем мы в Tuna.am написали prometheus exporter для сервиса Ping-Admin.com и при чём тут блокировки Hetzner по маршрутизации?

Где-то 3 недели назад я решил пойти в отпуск, перед отпуском ничего не обновляли, не катили нового, не меняли, в общем план был отдохнуть максимально. Но РКН имел на мой отдых другие планы ...

Зачем мы в Tuna.am написали prometheus exporter для сервиса Ping-Admin.com и при чём тут блокировки Hetzner по маршрутизации?
33
[]