Дизайн железа: современный интерфейс зарядной станции для электрокаров. Кейс «Яблочков»

К нам обратился производитель зарядных станций «Яблочков» с задачей обновить интерфейс экранов зарядных станций, чтобы они стали еще удобнее для пользователей, а также разработать для него фронтенд-оболочку.

В рамках проекта перед нами стояли следующие задачи:

- обновить дизайн интерфейса зарядной станции;

- спроектировать интуитивно понятный пользовательский путь;

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

- разработать фронтенд-оболочку для интерфейса и интегрировать ее с существующим бэкендом.

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

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

Летом 2023 года к нам обратилась компания «Зарядные станции «Яблочков» — крупный производитель и разработчик зарядных станций для электротранспорта. Компания существует с 2016 года и прошла путь от стартапа до лидера индустрии, реализуя крупные и технически сложные инфраструктурные проекты в странах ЕАЭС. 

Также компания занимается инновационными разработками: например, совместно с учеными из ИТМО «Яблочков» первыми в России создали прототип системы беспроводной зарядки для электрокаров.

Так выглядят зарядные станции от Яблочков. Источник: https://yablochkovtech.com/:

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

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

Этой командой стали мы, Purrweb. У нас уже был опыт работы с IoT проектами: например, мы сделали приложение для аренды пауэрбанков EnerGO. А еще у нас был опыт работы в нише продуктов для электротранспорта: мы делали редизайн приложения для ThunderSoft, производителя софта для зарядных станций.

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

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

Интерфейс зарядной станции, который нам требовалось обновить. Справа — механические кнопки для управления:

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

Задача, которую поставили перед нами «Яблочков» — проработать систему управления интерфейсом и продумать удобный для пользователя UX-сценарий, учитывая ограниченные способы взаимодействия. Меню должно было быть простым и интуитивным: чтобы пользователь мог без затруднений выбрать язык, авторизоваться, выбрать тип коннектора и отслеживать прогресс зарядки.

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

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

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

Прежде чем начать зарядку, пользователь должен пройти авторизацию:

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

Чтобы избежать путаницы при одновременном использовании нескольких коннекторов, мы показываем статусы их доступности.

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

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

Монохромная цветовая палитра с высокой контрастностью:

Готовый дизайн прошел тестирование с реальными пользователями и доработки на основании полученной обратной связи.

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

Когда мы отвечаем за разработку только одной из частей проекта, то понимаем: успех зависит от того, насколько хорошо мы выстроим коммуникацию с инхаус-командой клиента. Мы неоднократно работали в таком формате на разных проектах. 

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

Реализация проекта заняла 4 месяца. Заказчик остался доволен результатом: интерфейс зарядных станций «Яблочков» отвечает требованиям компании, индустрии и пользователей. Навигация понятна, дизайн лаконичен и приятен глазу. Пользователям комфортно взаимодействовать с таким интерфейсом — значит, они вернутся снова.

Решение успешно прошло тестирование и внедрение. Наша команда получила опыт разработки UI/UX для физических устройств с особыми условиями эксплуатации.