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

Для команды Purrweb дизайнить удобные и красивые интерфейсы привычное дело. А если весь интерфейс — это небольшой экран с кнопочным управлением? Интересная задача для UI/UX дизайнеров. 

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

Подписывайтесь на телеграм-канал «Яблочков», чтобы узнавать о трендах индустрии, жизни в компании и новых проектах наших заказчиков!

О заказчике 

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

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

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

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

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

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

Поможем создать современный и удобный для пользователей дизайн

Более 10 лет создаем IT-продукты для бизнеса и стартапов и знаем, что хороший дизайн «продает». Делали редизайн для ThunderSoft, Панам Пицца, SOAK и других компаний. Хотите получить бесплатную оценку проекта? Свяжитесь с нами

Получить оценку

Что мы должны были сделать 

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

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

Особенности задачи

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

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

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

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

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

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

Кейсы Purrweb ⭐   Мы работали над IoT-проектами для разных ниш. Например, сделали приложение для аренды пауэрбанков EnerGO. Чтобы продукт заработал, нужно было соединить умные зарядные станции с приложением. Для этого мы связались с производителем станций из Китая, который объяснил нам, как работают станции. Экраны приложения EnerGO   Сейчас только в Москве уже более 1000 зарядных станций, так что приложение пользуется успехом. Мы до сих пор помогаем заказчику с поддержкой и добавляем новые функции. Другой кейс — приложение для умных электрошокеров, которое автоматически фиксирует каждый выстрел. Заказчик выслал нам микросхему шокера, чтобы мы связали устройство с IoT-системой — пришлось даже поработать паяльником. В итоге разработали продукт сразу для трех платформ: Windows, Mac и Linux. Экран приложения для умных шокеров GARD

Решение

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

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

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

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

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

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

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

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

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

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

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

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

Внедряем интернет вещей в стартапы и корпорации

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

Получить оценку

Результат 

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

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

➡️Ищете опытную команду для своего IoT-проекта? Мы в Purrweb умеем работать с железом и делать для него софт и дизайн. Если нужно, готовы разбираться в новом. Погрузимся в детали и изучим специфику сами, а у вас будем спрашивать только самое необходимое.

Свяжитесь с нами — обсудим вашу задачу, предложим решение, прикинем сроки и бюджет.

Почему Purrweb

Экспертиза в дизайне. Более 10 лет создаем IT-продукты с крутым дизайном. В нашем портфолио — 550+ проектов в самых разных сферах: IoT, EdTech, маркетплейсы, дейтинг-приложения и многое другое.  

Умеем работать без детального технического задания. Вам не нужно приходить с детально проработанным ТЗ. Нам достаточно общего запроса и контекста, чтобы самим разобраться в задаче и предложить решение, которое идеально подходит именно для вашего проекта. 

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