ENXT
Контекст
ENXT — B2B-платформа для управления авиационными грузовыми операциями. Страница создания AWB (Air Waybill) — ключевой рабочий экран для агентов и операторов: здесь формируется перевозка, добавляется маршрут, проверяются коды, вводятся операционные параметры.
Этот экран использовался ежедневно и напрямую влиял на скорость обработки грузов.
Понимание задачи
Старая версия бронирования представляла собой длинную вертикальную форму:
- более 2 вьюпортов скролла
- постоянный скролл
- частые модальные окна
- разрозненные блоки информации
- высокая когнитивная нагрузка
В результате:
- пользователи возвращались к уже заполненным полям
- возникали ошибки в обязательных данных
- страдала скорость ввода
Область продукта специфичная — пришлось глубоко разбираться в предметной области и структуре интерфейса.
Цель редизайна
Сделать флоу букинга компактнее и читабельнее:
- Оптимизировать использование экрана
- Минимизировать/устранить вертикальный скролл
- Снизить когнитивную нагрузку
- Встроить частые действия в страницу вместо модалок
- Обеспечить адаптивность (десктоп/планшет)
Метрики
Сравнение ключевых показателей до и после редизайна:
Результат
После редизайна:
- страница сократилась с 2+ до 1.25 viewport
- среднее время создания AWB снизилось на ~25%
- возвраты к полям сократились почти на 40%
- количество модальных прерываний уменьшилось более чем вдвое
- когнитивная нагрузка (визуальные блоки в viewport) снизилась на 36%
Моя роль
- UX-аудит текущей формы
- Информационная архитектура сервиса бронирования и навигации по платформе
- Дизайн-решения и итерации (v1 → v2)
- Спецификации и описание поведения и состояний элементов интерфейса (в паре с front-end разработчиком)
- Синхронизация дизайн-системы с кодом на фронте
- Тайм-менеджмент и модерация встреч
Было
Старая версия страницы представляла собой функционально насыщенный экран с линейной вертикальной структурой. При росте функциональности архитектура страницы не пересматривалась, из-за чего экран стал перегруженным по вертикали и требовал постоянного скролла. Логически связанные данные были разнесены по отдельным карточкам, а часть действий выносилась в модальные окна, что прерывало рабочий поток.
Redesign v1.0
Структурная пересборка и систематизация
Проект велся в dev-first среде и использовал устаревшую версию Material UI (React), с большим количеством кастомных переопределений стилей и локальных решений. Поэтому в первой версии редизайна я не менял бизнес-логику флоу, а сосредоточился на системной пересборке интерфейса.
Техническая часть работы:
- Перенос интерфейса на актуальную версию Material UI
- Устранение накопленных локальных переопределений и несогласованных стилей
- Совместная работа с фронтом по синхронизации библиотеки в коде
- Формирование дизайн-системы на базе новой версии Material
На уровне UX:
- Упорядочена сетка и компоновка блоков
- Снижена визуальная перегруженность
- Унифицированы поля ввода, табы, чипы, тумблеры
- Улучшена читаемость блоков Revenue и Operational Details
- Добавлен фиксированный action bar с итоговыми расчётами
Redesign v2.0
Архитектурная оптимизация сценария
Во второй версии редизайна я пересмотрел не только визуальную систему, но и саму структуру работы со страницей.
Что было изменено:
- Линейная вертикальная форма трансформирована в модульную навигацию
- Ключевые разделы вынесены в верхний сегментированный контроль
- Добавлен постоянный Booking Summary для контекстной обратной связи
- DIMs выделены в самостоятельный модуль
- Упрощён и структурирован блок Routing
- Оптимизированы Revenue и Operational Details
Главное отличие v2 от v1:
Контекст
Ground Ops — модуль внутри платформы ENXT для управления разворотом самолёта (turnaround).
Разворот — это промежуток между прилётом и вылетом. За это время нужно выполнить десятки действий разными командами:
- разгрузка
- погрузка
- подключение оборудования
- топливо
- проверки
У системы две разные аудитории:
- Координатор / администратор — настраивает шаблоны, процессы и структуру разворота
- Исполнитель — работает «в поле» и выполняет конкретные действия по рейсу
Понимание задачи
Я начал с разделения ролей и выделил базовый принцип:
- Всё, что настраивается координатором, должно корректно отображаться у исполнителя
- Всё, что делает исполнитель, должно быть логично встроено в общую модель времени
Важно отметить, что разворот самолёта — это иерархическая система: Шаблон → Процессы → Действия → Параметры.
Каждое действие:
- имеет точное время старта (в минутах)
- имеет длительность
- относится к фазе ARR или DEP
- может зависеть от других действий
- может содержать вложенные параметры
- должно фиксироваться в истории
Моя роль
- Проектирование UX-архитектуры модуля Ground Ops
- Разработка логики таймлайна
- Проектирование структуры стадий и вложенных параметров
- Создание веб-интерфейса исполнителя и сценариев его состояний
- Проработка логики переходов (Start / Finish / Report Issue)
- Подготовка интерфейсов к разработке и обсуждение поведения с фронтендом
Создатель
Главный организующий принцип — время. Оно отображается в виде таймлайна в минутной шкале. На таймлайне создаются действия, разделённые по стадиям прилёта и вылета. У каждого действия есть слой параметров (nested fields), они отображаются в панели справа. Отдельно ведётся лог активностей.
Исполнитель
Не работает со всей моделью. Ему важно понимать:
- какой рейс
- что нужно делать сейчас
- что будет следующим
- что уже завершено
Я разделил задачи на три временные группы: текущие, ближайшие, сделано. Экран конкретного действия включает: время, стадия, таймер, форма ввода, кнопки управления (Start / Finish / Report Issue). Состояния интерфейса меняются в зависимости от этапа выполнения.