система управления зарядными станциями

Контекст проекта

B2B-платформа для управления сетью зарядных станций и мониторинга зарядной инфраструктуры. Продукт объединяет инструменты удаленного управления, аналитики, биллинга и контроля работы оборудования, помогая операторам эффективно управлять коммерческими и корпоративными сетями ЭЗС. Я отвечал за UX/UI продукта: участвовал в обсуждении новых функций с CEO и командой, превращал бизнес-идеи в пользовательские сценарии, проектировал интерфейсы и сопровождал реализацию вместе с разработчиками.

Моя роль

Как строилась работа

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

Ограничения проекта

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

Подход к проектированию

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

Пример задачи

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

Решение:
Декомпозировал задачу на этапы. Протестировал несколько гипотез с различными вариантами развития, методом прототипирования согласовали с командой оптимальный путь пользователя из пункта А к конечной цели. Завел в дизайн систему ряд новых компонентов, их состояний и описания поведения.

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

Wireframe — User Interface

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

User Flow & Prototyping

Юзабилити тесты новых сценариев на финальных макетах.

Dashboard

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

Визуализация данных и аналитика

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

Дизайн-система

По мере появления новых функций интерфейс постепенно переводился на единую систему компонентов от инпутов до цельных системных мастер-компонентов.

Токены цвета & Код

Палитра развивалась вдогонку за уже существующими переменными в продакшене для светлой и тёмной тем. Таким образом я систематизировал нейминг токенов максимально приемлемым для работы методом.

Что было самым сложным

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