EvTrip
Авто и мото
Италия
Август 2020
EvTrip — это европейское приложение для владельцев электрокаров, электрических мотоциклов и скутеров. Оно позволяет найти ближайшую зарядную станцию.
Они наняли нас для проработки UI/UX дизайна мобильного приложения. Это было на самом старте — ребята только получили инвестиции и начали делать первую версию продукта. Они сами занимаются разработкой и уже заложили функции, которые посчитали нужными, набросали примерный внешний вид экранов. Этот интерфейс должен был лечь в основу редизайна — однако на практике оказалось, что пользы от него немного.
UX был далек от совершенства: задача пользователя (найти зарядку) решалась за пять шагов, а это много. В идеале их должно быть три:
1. Найти пункт подзарядки.
2. Выбрать зарядную станцию.
3. Забронировать ее.
Поэтому мы решили пересобрать систему.
Начали с определения функций, которые нужны пользователю в первую очередь — это поиск и бронирование зарядной станции. С первым проблем не возникло, а вот с отображением станций возникла трудность.
В EvTrip есть пять видов станций с разными видами вилок. Важно правильно их проиллюстрировать, чтобы нужная вилка быстро считывалась визуально. Опираться на свой опыт было тяжело: оказалось, никто из нас не ездил на Tesla. Но в итоге мы заморочились, изучили фотографии зарядных устройств, и все получилось:
Дальше по плану — анализ конкурентов. Это обязательный этап: позволяет понять, чем EvTrip будет отличаться от аналогичных сервисов, а что стоит у них перенять. В результате предложили добавить:
- возможность построить маршрут до зарядной станции,
- биллинг, чтобы отслеживать историю зарядок и списаний с карты,
- функцию «добавить средство передвижения», чтобы система автоматически предлагала человеку электровилку для его машины и заправки, на которых она есть. Так мы могли убрать пару лишних шагов для пользователя.
EvTrip согласились.
Когда мы определились с функциями, дело дошло до внешнего вида EvTrip. Это сейчас вы видите скриншоты уже в готовом виде, но в реальности на этом этапе цвета, шрифты, кнопки и другие элементы брендинга были другими. Просто мы не нашли исходники ¯\_(ツ)_/¯
Итак, мы решили придерживаться двух цветов: черного и желтого. Желтый всегда ассоциируется с энергией, а черный создает яркий контраст.
В этом плане у заказчика не было конкретных пожеланий, поэтому мы полагались на здравый смысл и собственный вкус: меняли яркость желтого, пробовали разные шрифты и размеры — результатом команда EvTrip осталась довольна. Заодно разработали для компании новый корпоративный стиль — необходимый шаг для поддержания UI консистентности.
Всевозможные варианты логотипа для разных площадок:
Макеты сверстали в Figma и отдали в разработку — на этом наша часть работы закончилась. Клиенту все понравилось, правок не было, оставили хороший отзыв. Его разработчики тоже сказали, что им всего хватает, и отправились кодить.
Через год ребята снова обратились к нам. С задачей — создать мобильное приложение EvTrip. Мы с удивлением обнаружили, что вместо мобильного приложения, для которого они заказывали дизайн, ребята сделали веб-приложение.
Оказалось, что в команде проекта были только веб-разработчик и Android-нативщик на полставки. И он даже сделал первую версию продукта, но потом куда-то пропал. Почему не стали искать нового разработчика — неизвестно. Возможно, решили пойти простым путем — так появилось веб-приложение. Дизайн при этом был максимально приближен к нашим макетам.
Тем не менее инвесторам они обещали именно мобильное приложение, поэтому те не спешили переводить новый транш. Случилась наша классическая история: деньги кончаются, сроки поджимают, а сделать приложение очень надо.
Сначала мы предложили создать кросс-платформенное приложение на React Native — на это потребовалось бы два месяца. Но клиенту это не подходило: до отчета перед инвесторами оставалось меньше месяца, плюс инвестиции подходили к концу.
Мы нашли рабочий компромисс — полностью переиспользовать веб-версию и обернуть ее в мобильное приложение. В этом нам помог WebView.
Как это работает: мы устанавливаем компонент WebView в мобильное приложение и прописываем туда ссылку на веб-версию. Когда пользователь проходит авторизацию, мобильное приложение открывает «браузер» внутри себя и работа продолжается в нем. Для пользователя это незаметно, он как будто остается в приложении, хотя по факту в браузере :)
В теории мы могли обернуть в форму WebView все приложение полностью. Но опасались, что App Store и Google Play с этим продуктом нас не пропустят — обычно таких хитрецов быстро вычисляют и просят написать «нормальное» мобильное приложение. Поэтому мы отдельно написали формы регистрации и авторизации на React Native, а также подключили нативные Push-уведомления — все остальное по сути являлось веб-приложением.
Так мы планировали обмануть систему. И получилось!
Главная сложность возникла на стыке React Native и WebView — при авторизации пользователя через мобильное приложение нам нужно было прокидывать авторизационный токен в веб-версию. Фактически это два разных фронтенда, так что пришлось повозиться.
После успешного релиза WebView-приложения EvTrip решили привести к общему визуальному стилю и сами пункты подзарядки.
◾️ Дизайн зарядных станций
EvTrip попросили создать 3D-модель зарядной станции, которую они отдадут в производство, а потом установят в пунктах подзарядки. Вообще 3D не наш профиль, но это новый опыт. Мы пару раз моделировали 3D-объекты для AR проектов и интерфейсов, а тут проектирование настоящей железки! Клиенту честно сказали, что раньше такого не делали, но можем, если дать время. Он доверился и дал добро.
Первый вариант EvTrip впечатлил: в нем был экран с информацией о процессе зарядки и все провода прятались под кабель-каналы.
Но оказалось, что в производстве такая станция влетела бы в копеечку. Мы предложили «удешевить» модель: отказались от экрана, уменьшили размер станции и не стали прятать абсолютно все провода. Получилось так:
Выглядит не так технологично, зато производство такого зарядного устройства экономически оправдано. EvTrip позиционируют его как ноу-хау в сфере зарядных устройств для частного использования.
◾️ Инструкция по эксплуатации
Другая задача — создать плакат, который объяснит принцип использования зарядной станции. На него у нас было всего 24 часа. Плакат требовался практически «здесь и сейчас», чтобы разместить его рядом с первой установленной станцией.
Тут у вас может возникнуть вопрос: почему плакатом занимаются разработчики MVP? Все просто: на стадии продакшена мы стараемся закрывать максимальное количество проблем клиента. У нас в штате есть 4 прекрасных графических дизайнера, которые делают маркетинговые материалы для внутренних нужд компании. Одного из них пришлось срочно мобилизовать: вместо 11:00 рабочий день начался в 7 утра.
В макете сразу использовали цвета, необходимые для передачи в типографию. Это важно учесть, иначе на выходе вместо единого корпоративного стиля плакат был бы совсем в других оттенках. Текст заказчик написал сам — это ускорило процесс.
Итак, вот что мы сделали для EvTrip:
- Проработали архитектуру мобильного приложения, UI/UX дизайн, корпоративный стиль.
- Превратили веб-приложение в мобильное с помощью React Native и WebView. Их приняли сторы и приложение работает стабильно.
- Продумали и визуализировали 3D-модель зарядных станций и инструкцию по их эксплуатации.
Сегодня EvTrip успешно работает в Турине, Пинероло, Тоскане и других регионах Италии. Они развивают сеть зарядных станций с помощью партнеров и частного офлайн-бизнеса с парковками (кафе и рестораны, магазины и т.д.). Постепенно они охватывают все большую часть Италии и, вероятно, однажды зайдут в другие европейские страны. А вот и наш плакат!
Напоследок напомним стартаперам: даже если деньги и время поджимают, всегда можно найти выход из ситуации. И сделать MVP, который убедит инвесторов и вырастет в прибыльный продукт и бизнес. Если что, мы в Purrweb ждем вас!