EvTrip — приложение для владельцев электрокаров,
электрических мотоциклов, велосипедов и скутеров,
позволяющее найти зарядную станцию где угодно.
Изначально клиент нанял нас, чтобы создать UI/UX дизайн для мобильного
приложения.У него уже был готовый интерфейс, который должен был лечь в
основу редизайна — однако на практике оказалось, что пользы от него
немного. Архитектура приложения была далека от совершенства: чтобы решить
главную проблему, пользователю приходилось пройти как минимум пять шагов,
поэтому было решено “пересобрать” систему.
Наша роль
Анализ конкурентов
Редизайн приложения
Новая айдентика
3D визуализация
Разработка на React Native
Анализ конкурентов
Для того, чтобы создать продуманную, но в то же время простую
архитектуру приложения, мы провели UX-исследование: исследовали
конкурентов и их приложения, после чего на основе полученной информации
продумали пользовательские сценарии.
ДоступностьВзаимодействиеОтзывыВиды транспорта
2ГИС
ДоступностьВзаимодействиеОтзывыВиды транспорта
Chargemap
ДоступностьВзаимодействиеОтзывыВиды транспорта
PlugShare
ДоступностьВзаимодействиеОтзывыВиды транспорта
Google Map
ДоступностьВзаимодействиеОтзывыВиды транспорта
Приоритизация основных фич
Начали с определения главных функций, которые нужны пользователю
в первую очередь — это поиск и бронирование зарядной станции. Мы знали,
что останавливаться только на этом нельзя, поэтому изучили приложения,
которые предлагают похожий функционал, и предложили заказчику включить
в приложение возможность добавить средство передвижения, построить
маршрут до зарядной станции и настроить уведомления. EvTrip согласились.
⚡
Поиск и бронирование зарядной станции
🚗
Возможность добавить средство передвижения
📍
Построить маршрут до зарядной станции
🔔
Настроить уведомления
Новая айдентика
Чтобы не уходить от фирменного стиля, мы решили придерживаться
брендовых цветов. Сочетание черного и желтого было выбрано неспроста:
желтый всегда ассоциируется с энергией и оптимизмом — а это именно то,
что нужно нише — а черный создает яркий контраст.
Логотип
Во время работы над UI/UX-дизайном мы разработали новый логотип
для компании — необходимый шаг для поддержания UI консистентности и
корпоративного стиля. Мы неоднократно изменяли яркость желтого, пробовали
разные шрифты и размеры, в результате чего заказчик получил именно то, что хотел.
Гарнитура
Rubik
1 2 3 4 5 6 7 8 9 0
$ € £ ¥ % & ? ! @
AaBbCc
AaBbCcAaBbCcAaBbCcAaBbCc
Цвета
Акценты
FEE033
01BC6A
6657C8
FE5833
Основные
000000
2A282A
EAE9EA
FFFFFF
UI/UX дизайн
С процессом разработки дизайна не было никаких проблем: быстро
утвердили концепт, быстро протестировали прототипы, быстро завершили работу.
Поиск
Удобный поиск станции
Приложение само определит местонахождение пользователя
и найдет ближайшую из доступных.
О станции
Детальный вид станции
Приложение покажет, какие разъемы обслуживаются данной
станцией и свободны ли они в настоящий момент — достаточно
просто выбрать её на карте.
Маршрут
Построение маршрута
Благодаря встроенной системе GPS, пользователь
всегда может без проблем добраться до выбранной станции.
Я всерьез считаю, что через 30 лет большинство автомобилей,
производимых в США, будут электрическими. И я говорю не о гибридных
электромобилях, а именно о полностью электрических.
Илон Маск
Разработка на React Native
Через год EvTrip снова обратились к нам. На этот раз с другой
задачей — создать мобильное приложение. Мы с удивлением обнаружили, что
вместо мобильного приложения по нашему дизайну клиент сделал веб-приложение.
Инвесторы не спешили переводить новый транш, потому что хотели увидеть готовую
мобильную версию.
Команда Purrweb предложила использовать React Native для создания
кросс-платформенного приложения, однако у клиента не было достаточно времени,
которое бы потребовалось на разработку.Плюс, инвестиции подходили к концу.
Мы нашли рабочий компромисс — полностью переиспользовать веб-версию и обернуть
его в мобильное приложение. В этом нам помог WebView.
React Native WebView
Обратиться к React Native всё-таки пришлось. В теории, в форму WebView
мы могли переделать полностью все приложение, однако были опасения, что Apple Store
и Google Play с таким продуктом нас не пропустят — обычно таких хитрецов быстро вычисляют
и просят написать “нормальное” мобильное приложение.
Хитрые разработчики
На React Native мы написали формы регистрации и авторизации, а также
подключили нативные Push-уведомления — все остальное по сути являлось
веб-приложением. Так мы пытались обмануть систему. И получилось 🙂
React Native — это кроссплатформенный фреймворк, который успел завоевать
доверие мировых гигантов. И всех наших клиентов.
3D визуализация станции
Нам предстояло создать 3D-модель зарядной станции, которая бы максимально
соответствовала всем современным требованиям. Мы немедленно принялись за работу
и представили заказчику то, как видели модель мы — клиенту наш вариант станции
очень понравился, однако оказалось, что в производстве она бы влетела в копеечку.
Было предложено, как модель можно “удешевить”: отказаться от экрана, уменьшить размер
и не прятать абсолютно все провода. От этого и плясали. Клиент остался доволен.
Поиск
О станции
Маршрут
