Редизайн приложения сети электрозарядных станций

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

Компания: Touch Station
Сфера: B2C, Транспорт
Период: 2024 – 2025
Моя роль: Продуктовый дизайнер
Команда: Менеджер продукта
CTO
Фронтенд-разработчики (2)
Бэкенд-разработчик
Тестировщик

TOUCH производит зарядные станции и разрабатывает программное обеспечение для зарядной инфраструктуры. Сеть компании включает более 350 станций в четырех странах. Мобильное приложение стало шагом компании в B2C: вместо присутствия только в сторонних агрегаторах компания решила самостоятельно развивать продукт для водителей.

Активация за 30 дней: новых пользователей завершили первую зарядку
Обращений в поддержку: жалоб на интерфейс на 1000 активных пользователей
Сквозная конверсия: из карточки станции в завершённую зарядку

Задача

Бизнес-задача

Увеличить долю новых пользователей, которые доходят до первой зарядки
Снизить частоту обращений в поддержку по вопросам интерфейса
Улучшить опыт текущих пользователей приложения

Проблемы пользователей

Сложно найти станцию с нужным разъёмом и разобраться в навигации
Непонятно, сколько будет стоить зарядка и из чего складывается итоговая сумма
Активную сессию легко потерять, её текущий статус не всегда понятен

Интерфейс приложения TOUCH до редизайна — Старый vs Новый дизайн

Интерфейс приложения TOUCH после редизайна — Старый vs Новый дизайн

Исследование

Анализ конкурентов

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

Сравнение функций приложений для зарядки электромобилей
Критерий	Touch Station	Punkt E	Яндекс Заправки	IT Charge	2Chargers
Поиск станций	✅	✅	✅	✅	✅
Прокладка маршрута к станциям	⚠️ Переход в сторонний навигатор (Только Яндекс.Карты)	⚠️ Переход в сторонний навигатор	✅ Построение маршрута к выбранной станции (интеграция с Яндекс.Карты внутри приложения)	✅	✅ Планирование маршрута с учётом зарядок по пути
Добавление станций в избранное	✅	✅	❌	❌	✅
Агрегация станций нескольких провайдеров	❌	❌	✅	✅	✅
Отзывы и рейтинги	❌	❌	❌	❌	✅
Бронирование станции	✅	✅	⚠️ Зависит от оператора-партнёра станции	✅	❌
Оплата в приложении	✅	✅	✅	✅	⚠️ Зависит от оператора-партнёра станции
Мои электромобили	❌	❌	✅	❌	✅
Чат с поддержкой	✅	✅	❌ "вживую" в приложении. Помощь по конкретной сети оказывает оператор-партнёр	❌	❌
История зарядных сессий	✅	✅	✅	❌	⚠️ Если зарядка была у оператора-партнёра
Отчёты по потреблению энергии	✅	❌	❌	❌	❌

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

Тикеты поддержки

Взял данные, которые уже были в компании: обращения в поддержку. С помощью ИИ разобрал около 1000 обращений за 3 месяца. 410 из них связаны с дизайном.

Обращения по "дизайну"

52%

213 из 410

Непонятные платежи

"Итоговая стоимость зарядной сессии больше ожидаемой", "Не могу найти кассовый чек", "Списали деньги не с той карты".
25%

103 из 410

Зарядная сессия

"Не понятен статус моей сессии", "При запуске сессии ничего не происходит".
23%

94 из 410

Проблемы навигации

"Не могу найти активную сессию", "Не могу найти станцию с нужным разъемом".

Глубинные интервью

Провёл 15 онлайн-интервью с пользователями приложения.

Задача: выявить боли при использовании приложения и проверить первоначальные гипотезы из анализа тикетов поддержки.

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

Платежи

9 из 15

не доверяют списаниям из-⁠за расхождений итоговой суммы с ожидаемой при зарядке
13 из 15

считают итоговый экран завершения сессии недостаточно информативным

5 из них перепроверяют информацию в "Истории зарядок", отметив, что там информация более детальная и есть кассовый чек
4 из 15

хотели бы видеть отображение стоимости зарядки в реальном времени

Поиск станции и зарядка

8 из 15

назвали карту перегруженной, испытывали трудности с поиском станции с нужным коннектором
5 из 15

сталкивались с ситуацией, когда не понимали текущий статус своей зарядной сессии
4 из 15

"теряли" активную сессию в процессе зарядки

Дополнительно

14 из 15

оценили визуальный стиль приложения как "устаревший"

Сформулировал результаты интервью и тикетов в Job Stories

Когда на карте много станций, а подходит мне не каждый разъём,

я хочу отсеять неподходящие,

чтобы не проверять каждую станцию по очереди
Когда я выбрал станцию и собираюсь ехать,

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

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

я хочу понимать, во сколько мне обойдётся сессия,

чтобы не столкнуться со списанием больше ожидаемого
Когда я отошёл от машины во время зарядки,

я хочу в любой момент проверить, идёт сессия или уже закончилась,

чтобы не искать её заново и не гадать
Когда зарядка закончилась и деньги списаны,

я хочу увидеть, из чего сложилась итоговая сумма и чем подтверждён платёж,

чтобы не перепроверять сессию в другом разделе
Когда я запускаю зарядку,

я хочу видеть и выбрать, с какой карты спишутся деньги,

чтобы быть уверенным, что плачу нужной картой

Решение

Навигация и User Flow

Перед макетами я разработал карту информационной архитектуры и User Flow. В карте ИА реорганизовал навигацию вокруг ключевых сценариев: объединил "Мою станцию" и "Зарядку" в единый раздел, а "Избранное" убрал как отдельный раздел и перенёс на саму карту. В user flow проработал сквозной сценарий, от поиска станции до завершения зарядной сессии.

Информационная архитектура приложения Touch Station

Сравнение станций прямо на карте

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

Запуск по QR-коду у станции

Если водитель уже у станции, QR-код на коннекторе ведёт к запуску зарядки. Искать станцию на карте не нужно.

Доплаты видны до старта

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

Стоимость можно рассчитать заранее

Водитель вводит объём в кВтч и сразу видит расчётную стоимость электроэнергии. Также доступны зарядка по времени и до нужного уровня батареи.

Выбор способа оплаты

Теперь выбранная карта или внутренний баланс видны перед кнопкой "Начать зарядку". Здесь же можно сменить способ оплаты.

Возврат к зарядке с карты

Виджет на карте показывает её статус и время, а нажатие открывает экран зарядки. Вкладка "Зарядка" тоже отмечена индикатором активности. Начисления можно сверить с тарифом станции в детализации платежа.

Завершение зарядной сессии

Когда заданный объём энергии получен, зарядка останавливается. Приложение показывает, сколько осталось бесплатной парковки и по какой ставке начнётся платный простой.

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

Тесты

Коридорный текст

Я проверил сценарии поиска станции и запуска зарядки.

Карточка станции с кнопкой "Начать зарядку" — ❌

Карточка станции с подписями действий и кнопкой "Выбрать коннектор" — ❌

Участники ожидали, что кнопка "Зарядиться" сразу запустит процесс. Они хотели видеть стоимость до выбора разъёма, а иконку сердца воспринимали как "лайк".

Кнопку переименовал в "Выбрать коннектор", а иконки взаимодействия переработал с явными подписями

Юзабилити-тестирование

После правок провёл 10 модерируемых сессий от выбора станции до запуска зарядки.
У 8 из 10 участников прогноз совпал с итоговой суммой. Два расхождения были связаны с дополнительными платежами. Их детализацию я продолжил улучшать после релиза.

Time on task замеряли по тому же заданию, что до редизайна: найти станцию с нужным разъёмом и запустить зарядку.

Было
Стало: на 40% меньше

Результат

Результаты редизайна: показатели до и после
Показатель	До	После	Изменение
Активация за 30 дней	47,8%	63,6%	+15,8 п.п.
Обращения по интерфейсу на 1000 активных пользователей	205	75,6	−63,1%
Конверсия из карточки станции в завершённую зарядку	57,5%	80,5%	+23 п.п.

Больше доходят до первой зарядки

Активация за 30 дней, доля новых пользователей с первой завершённой зарядкой, выросла с 47,8% до 63,6%.

Реже идут в поддержку

Частота обращений по вопросам интерфейса снизилась на 63,1%: с 205 до 75,6 на 1000 активных пользователей.

За три месяца после релиза аудитория выросла в 2,25 раза, поэтому сравнивали частоту, а не общее число обращений.

Сценарий стал понятнее

Сквозная конверсия из карточки станции в завершённую зарядку выросла с 57,5% до 80,5%. Переход к выбору коннектора вырос с 77,5% до 90,8%.

Доля успешных запусков с первой попытки выросла с 55% до 90%.

Что исправили после релиза

Раннее завершение сессии. После релиза выросла доля сессий, случайно прерванных в первые 2 минуты. Добавили подтверждение остановки и объяснение последствий.

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

Что было дальше

После релиза я развивал дизайн-систему и новые функции, например Внутренний кошелёк и оплата через СБП.