Инвесторы ждут мобильное приложение, но у вас есть только веб и 2 недели. А вот денег почти нет. Что делать? Читайте в кейсе Purrweb и EvTrip.
Привет! Меня зовут Сергей Никоненко, я операционный директор в Purrweb. Мы занимаемся дизайном и разработкой MVP с нуля, чаще всего — мобильными приложениями.
К нам регулярно приходят стартаперы, у которых что-то пошло не так. Приложение сделали, но оно не взлетело. Проект работает, но совсем «на коленке». Идеи есть, но компетенций для их воплощения не хватает. Как правило, это выясняется на этапе второго транша: инвесторы отказываются давать деньги, пока не выполнены изначальные обещания.
С EvTrip все было иначе. Поначалу…
Ничто не предвещало: прорабатываем дизайн мобильного приложения
EvTrip — это европейское приложение для владельцев электрокаров, электрических мотоциклов и скутеров. Оно позволяет найти ближайшую зарядную станцию.
Они наняли нас для проработки UI/UX дизайна мобильного приложения. Это было на самом старте — ребята только получили инвестиции и начали делать первую версию продукта. Они сами занимаются разработкой и уже заложили функции, которые посчитали нужными, набросали примерный внешний вид экранов. Этот интерфейс должен был лечь в основу редизайна — однако на практике оказалось, что пользы от него немного.
UX был далек от совершенства: задача пользователя (найти зарядку) решалась за пять шагов, а это много. В идеале их должно быть три:
- Найти пункт подзарядки.
- Выбрать зарядную станцию.
- Забронировать ее.
Поэтому мы решили пересобрать систему.
Начали с определения функций, которые нужны пользователю в первую очередь — это поиск и бронирование зарядной станции. С первым проблем не возникло, а вот с отображением станций возникла трудность.
В 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 — при авторизации пользователя через мобильное приложение нам нужно было прокидывать авторизационный токен в веб-версию. Фактически это два разных фронтенда, так что пришлось повозиться.
Бонус: приводим офлайн-точки EvTrip к общему фирменному стилю
После успешного релиза WebView-приложения EvTrip решили привести к общему визуальному стилю и сами пункты подзарядки.
Дизайн зарядных станций
EvTrip попросили создать 3D-модель зарядной станции, которую они отдадут в производство, а потом установят в пунктах подзарядки. Вообще 3D не наш профиль, но это новый опыт. Мы пару раз моделировали 3D-объекты для AR проектов и интерфейсов, а тут проектирование настоящей железки! Клиенту честно сказали, что раньше такого не делали, но можем, если дать время. Он доверился и дал добро.
Первый вариант EvTrip впечатлил: в нем был экран с информацией о процессе зарядки и все провода прятались под кабель-каналы.
Но оказалось, что в производстве такая станция влетела бы в копеечку. Мы предложили «удешевить» модель: отказались от экрана, уменьшили размер станции и не стали прятать абсолютно все провода. Получилось так:
Выглядит не так технологично, зато производство такого зарядного устройства экономически оправдано. EvTrip позиционируют его как ноу-хау в сфере зарядных устройств для частного использования.
Инструкция по эксплуатации
Другая задача — создать плакат, который объяснит принцип использования зарядной станции. На него у нас было всего 24 часа. Плакат требовался практически «здесь и сейчас», чтобы разместить его рядом с первой установленной станцией.
Тут у вас может возникнуть вопрос: почему плакатом занимаются разработчики MVP? Все просто: на стадии продакшена мы стараемся закрывать максимальное количество проблем клиента. У нас в штате есть 4 прекрасных графических дизайнера, которые делают маркетинговые материалы для внутренних нужд компании. Одного из них пришлось срочно мобилизовать: вместо 11:00 рабочий день начался в 7 утра.
В макете сразу использовали цвета, необходимые для передачи в типографию. Это важно учесть, иначе на выходе вместо единого корпоративного стиля плакат был бы совсем в других оттенках. Текст заказчик написал сам — это ускорило процесс.
Happy End
Итак, вот что мы сделали для EvTrip:
- Проработали архитектуру мобильного приложения, UI/UX дизайн, корпоративный стиль.
- Превратили веб-приложение в мобильное с помощью React Native и WebView. Их приняли сторы и приложение работает стабильно.
- Продумали и визуализировали 3D-модель зарядных станций и инструкцию по их эксплуатации.
Сегодня EvTrip успешно работает в Турине, Пинероло, Тоскане и других регионах Италии. Они развивают сеть зарядных станций с помощью партнеров и частного офлайн-бизнеса с парковками (кафе и рестораны, магазины и т.д.). Постепенно они охватывают все большую часть Италии и, вероятно, однажды зайдут в другие европейские страны. А вот и наш плакат!
Напоследок напомню стартаперам: даже если деньги и время поджимают, всегда можно найти выход из ситуации. И сделать MVP, который убедит инвесторов и вырастет в прибыльный продукт и бизнес. Если что, мы с командой Purrweb ждем вас на сайте и в Facebook 😉
