Mobile App Redesign UI/UX
2020

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

О проекте

EvTrip — приложение для владельцев электрокаров, электрических мотоциклов, велосипедов и скутеров, позволяющее найти зарядную станцию где угодно.

App screen with map

Изначально клиент нанял нас, чтобы создать UI/UX дизайн для мобильного приложения. У него уже был готовый интерфейс, который должен был лечь в основу редизайна — однако на практике оказалось, что пользы от него немного. Архитектура приложения была далека от совершенства: чтобы решить главную проблему, пользователю приходилось пройти как минимум пять шагов, поэтому было решено “пересобрать” систему.

Наша роль

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

  • Редизайн приложения

  • Новая
    айдентика

  • 3D
    визуализация

  • Разработка
    на React Native

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

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

  • Доступность Взаимодействие Отзывы Виды транспорта
  • 2ГИС
    Доступность Взаимодействие Отзывы Виды транспорта
  • Chargemap
    Доступность Взаимодействие Отзывы Виды транспорта
  • PlugShare
    Доступность Взаимодействие Отзывы Виды транспорта
  • Google Map
    Доступность Взаимодействие Отзывы Виды транспорта

Приоритизация основных фич

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

  • Поиск и бронирование зарядной станции

  • 🚗

    Возможность добавить средство передвижения

  • 📍

    Построить маршрут до зарядной станции

  • 🔔

    Настроить
    уведомления

Новая
айдентика

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

Гарнитура

Rubik 1 2 3 4 5 6 7 8 9 0 $ € £ ¥ % & ? ! @
AaBbCc
AaBbCc AaBbCc AaBbCc AaBbCc

Цвета

Акценты
  • FEE033
  • 01BC6A
  • 6657C8
  • FE5833
Основные
  • 000000
  • 2A282A
  • EAE9EA
  • FFFFFF

UI/UX
дизайн

С процессом разработки дизайна не было никаких проблем: быстро утвердили концепт, быстро протестировали прототипы, быстро завершили работу.

Many app screens
  • Mobile app screen
    Поиск

    Удобный поиск станции

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

  • Mobile app screen
    О станции

    Детальный вид станции

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

  • Mobile app screen
    Маршрут

    Построение маршрута

    Благодаря встроенной системе GPS, пользователь всегда может без проблем добраться до выбранной станции.

Я всерьез считаю, что через 30 лет большинство автомобилей, производимых в США, будут электрическими. И я говорю не о гибридных электромобилях, а именно о полностью электрических.

Elon Musk Илон Маск
Tesla auto

Разработка
на React Native

Через год EvTrip снова обратились к нам. На этот раз с другой задачей — создать мобильное приложение. Мы с удивлением обнаружили, что вместо мобильного приложения по нашему дизайну клиент сделал веб-приложение. Инвесторы не спешили переводить новый транш, потому что хотели увидеть готовую мобильную версию.

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

  • develop-item

    React Native
    WebView

    Обратиться к React Native всё-таки пришлось. В теории, в форму WebView мы могли переделать полностью все приложение, однако были опасения, что Apple Store и Google Play с таким продуктом нас не пропустят — обычно таких хитрецов быстро вычисляют и просят написать “нормальное” мобильное приложение.

  • Хитрые
    разработчики

    На React Native мы написали формы регистрации и авторизации, а также подключили нативные Push-уведомления — все остальное по сути являлось веб-приложением. Так мы пытались обмануть систему. И получилось 🙂

Electro motorbike

React Native — это кроссплатформенный фреймворк, который успел завоевать доверие мировых гигантов.
И всех наших клиентов.

3D визуализация
станции

Нам предстояло создать 3D-модель зарядной станции, которая бы максимально соответствовала всем современным требованиям. Мы немедленно принялись за работу и представили заказчику то, как видели модель мы — клиенту наш вариант станции очень понравился, однако оказалось, что в производстве она бы влетела в копеечку. Было предложено, как модель можно “удешевить”: отказаться от экрана, уменьшить размер и не прятать абсолютно все провода. От этого и плясали. Клиент остался доволен.

Основные
функции

  • QR-код
  • LED индикатор
  • Гнездо зарядки (type 2)
Charging station
Charging stations

Размеры

Charging station sizes
Charging stations