Разработка нового дизайна водительского приложения

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

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

Новая версия (DriveSafe) представляет собой полный пересмотр пользовательского опыта. Внедрен современный, светлый и интуитивно понятный интерфейс, который помогает водителю фокусироваться на главном — маршруте и пассажирах.

Ниже представлено детальное сравнение изменений по ключевым экранам.

1. Панель авторизации и стартовый экран

Вход в приложение — это первое касание пользователя с продуктом. Изменения здесь направлены на формирование доверия и современного имиджа.

Старая версия: Использовала утилитарный подход. Экран входа представлял собой базовую форму с полями «Мобильный телефон» и «Пароль» на фоне размытой фотографии дороги. Отсутствовала уникальная айдентика продукта.

Новая версия: Приложение получило собственное «лицо». Внедрен стильный стартовый экран (Splash screen) с логотипом «DriveSafe», фирменным приветственным слоганом и приятным зеленым фоном. Это задает профессиональный тон и сразу дает понять водителю, что он использует качественный корпоративный инструмент.

2. Список рейсов (Главный экран)

Главный экран водителя был полностью переработан для обеспечения лучшей читаемости информации «на ходу».

Старая версия: Использовался темно-серый фон со строгими прямоугольными блоками. Информация (маршрут, время, касса, автобус) подавалась сплошным текстом. Навигация по дням (Сегодня, Завтра) была выполнена в виде набора отдельных цветовых кнопок, что создавало визуальный шум.

Новая версия: Внедрена светлая тема (Light Mode), которая визуально «облегчила» интерфейс.

Карточки рейсов стали белыми, с мягкими тенями и скругленными углами. Маршрут теперь представлен в виде наглядного таймлайна с точками отправления и прибытия. Время вынесено крупным шрифтом, добавлены понятные иконки для количества пассажиров и суммы, а также яркие бейджи статуса рейса (например, «Ожидает»).

3. Экран остановки: Карточки пассажиров (Свернутый вид)   На этом этапе водитель работает со списками посадки и высадки. Главная цель — минимизировать количество кликов.

Старая версия: Интерфейс перегружен рамками. Статистика (явка/неявка) отображалась в виде огромных круглых светофоров, отвлекающих внимание. Свернутые группы пассажиров выглядели как громоздкие блоки с указанием общей суммы и мелкими, не всегда очевидными индикаторами внутри.

Новая версия: Экран стал максимально чистым.

В верхней части четко зафиксирована информация об остановке, времени до прибытия и кнопка навигатора. Списки логично разделены на блоки «Высадить пассажиров» и «Посадить пассажиров». Свернутая карточка заказа выглядит компактно: аватарка, имя основного клиента и общее число людей (например: Наталья, 3 пассажира»). Киллер-фича — появились крупные кнопки массовых действий («Поставить Явку всем», «Поставить Неявку всем»), что кардинально ускорило работу при полной посадке без проблем.

4. Экран остановки: Карточки пассажиров (Развернутый вид)

Развернутая карточка используется для точечной отметки пассажиров внутри одного заказа.

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

Новая версия: Продуманная микро-эргономика.

При раскрытии карточки сразу видна финансовая детализация (например, «2 чел × 50 руб = 100 руб»). Появились кнопки массовой явки/неявки конкретно для этой группы (заказа). У каждого пассажира в списке есть отдельная аккуратная строка. В ней указано имя, есть кнопка быстрого звонка (иконка трубки), а справа расположены крупные, контрастные кнопки статуса: зеленая галочка (сел) и красный крестик (не явился). Отмечать пассажиров можно безошибочно в один тап.

Итог

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