Роль: UX/UI дизайнер

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

EVM PRO

2024

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

Разработать дизайн веб-платформы для мониторинга грузовых электромобилей EVM PRO с удобным интерфейсом, который упростит контроль за ключевыми параметрами транспорта в реальном времени:

• Заряд батареи, скорость, температура, пробег, системные ошибки...
• Геолокация и история маршрутов.

Разделить функционал для трёх ролей пользователей:

• Водители — быстрый доступ к текущим ключевым показателям.
• Сервисные службы — углублённая диагностика и отладка.
• Администраторы — управление автопарком и пользователями.

UX research

Как выглядел интерфейс:

Проблема

Задача

1. Водитель (ключевая роль)

Цель: Быстро оценить состояние машины после/перед рейсом или во время движения.
Задачи:

• Проверить заряд батареи и пробег
• Увидеть текущую скорость и температуру критичных узлов
• Получить уведомление о критичных неисправностях
• Возможность дистанционно включить обогрев АКБ
• Просмотреть маршрут и историю поездок

Особенности:

• Минималистичный интерфейс - только самое важное
• Крупные, контрастные элементы управления
• Адаптация под мобильные и планшеты

2. Сервисный инженер
Цель: Диагностика и профилактика неисправностей
Задачи:

• Анализ детализированных показателей по узлам
• Просмотр истории ошибок и параметров
• Формирование и выгрузка отчетов по состоянию парка

3. Администратор
Цель: Управление автопарком и пользователями
Задачи:

• Добавление/редактирование ТС и водителей
• Настройка прав доступа
• Полный доступ к функционалу сервиса

Пользователи

Анализ пользователей и ролей

Информационная архитектура

Администратор

Сервис

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

Intro

Водитель

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

Прототип

Intro

UI kit

Atomic Design

UI Kit для проекта я создавал по принципам Atomic Design. Это позволило разбить систему на логичные уровни: от самых простых элементов до сложных интерфейсных компонентов. В основе лежат базовые атомы — типографика, цвета, иконки. Они формируют молекулы, например, кнопки, поля ввода, контролы, которые затем объединяются в более сложные организмы, такие как виджеты или секции экрана. Такой подход обеспечил гибкость и масштабируемость дизайна, а также упростил внесение изменений.

User Interface

Светлая тема

Стало

Было

Стало

Было

Результаты тестирования были хорошими. Тестируемые высоко оценили внешний вид и навигацию сервиса. Однако удалось выявить некоторые критичные зоны:

• Есть запрос на возможность включать обогрев АКБ по расписанию на неделю. До этого можно было включить в определенное время.
• Подсветка опасных показателей в таблице оранжевым, а критичных - красным цветом.
• Светлая тема сервиса.

Итерации

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

Тестирование

Тестирование и итерации

01.24-05.24

Команда:
Я - UX/UI дизайнер
Product owner / CTO
Service Department Engineer
Front-end and back-end developer

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

Вывод

Другие проекты