Стартовали новые рейтинги digital-подрядчиковУспейте принять участие! Предварительные результаты.
Purrweb
Из веба в мобайл: как сэкономить десятки тысяч долларов на разработке и «обмануть» App Store
Purrweb
#Приложение под ключ #Фирменный стиль

Из веба в мобайл: как сэкономить десятки тысяч долларов на разработке и «обмануть» App Store

89 
Purrweb Россия, Омск
Поделиться:
Из веба в мобайл: как сэкономить десятки тысяч долларов на разработке и «обмануть» App Store
Клиент

EvTrip

Сфера

Авто и мото

Регион

Италия

Сдано

Август 2020

Задача

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

Они наняли нас для проработки UI/UX дизайна мобильного приложения. Это было на самом старте — ребята только получили инвестиции и начали делать первую версию продукта. Они сами занимаются разработкой и уже заложили функции, которые посчитали нужными, набросали примерный внешний вид экранов. Этот интерфейс должен был лечь в основу редизайна — однако на практике оказалось, что пользы от него немного.

Решение

UX был далек от совершенства: задача пользователя (найти зарядку) решалась за пять шагов, а это много. В идеале их должно быть три:

1. Найти пункт подзарядки.

2. Выбрать зарядную станцию.

3. Забронировать ее.

Поэтому мы решили пересобрать систему. 

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

1Ничто не предвещало: прорабатываем дизайн мобильного приложения

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

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

- возможность построить маршрут до зарядной станции, 

- биллинг, чтобы отслеживать историю зарядок и списаний с карты, 

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

EvTrip согласились.

Когда мы определились с функциями, дело дошло до внешнего вида EvTrip. Это сейчас вы видите скриншоты уже в готовом виде, но в реальности на этом этапе цвета, шрифты, кнопки и другие элементы брендинга были другими. Просто мы не нашли исходники ¯\_(ツ)_/¯

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

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

Всевозможные варианты логотипа для разных площадок:

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

2Неожиданный поворот – никакого мобильного приложения не было

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

Оказалось, что в команде проекта были только веб-разработчик и Android-нативщик на полставки. И он даже сделал первую версию продукта, но потом куда-то пропал. Почему не стали искать нового разработчика — неизвестно. Возможно, решили пойти простым путем — так появилось веб-приложение. Дизайн при этом был максимально приближен к нашим макетам.

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

3Превращаем веб в мобайл без дополнительной разработки. Ну, почти

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

Мы нашли рабочий компромисс — полностью переиспользовать веб-версию и обернуть ее в мобильное приложение. В этом нам помог WebView. 

Как это работает: мы устанавливаем компонент WebView в мобильное приложение и прописываем туда ссылку на веб-версию. Когда пользователь проходит авторизацию, мобильное приложение открывает «браузер» внутри себя и работа продолжается в нем. Для пользователя это незаметно, он как будто остается в приложении, хотя по факту в браузере :)

В теории мы могли обернуть в форму WebView все приложение полностью. Но опасались, что App Store и Google Play с этим продуктом нас не пропустят — обычно таких хитрецов быстро вычисляют и просят написать «нормальное» мобильное приложение. Поэтому мы отдельно написали формы регистрации и авторизации на React Native, а также подключили нативные Push-уведомления — все остальное по сути являлось веб-приложением.

Так мы планировали обмануть систему. И получилось!

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

4Бонус: приводим офлайн-точки EvTrip к общему фирменному стилю

После успешного релиза 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 ждем вас!


Стек технологий

  • React Native React Native Фреймворк/библиотека
  • Figma Figma Графический редактор

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Purrweb с удовольствием обсудит вашу задачу

Оставить заявку