Mobile App

UI/UX

2020

Energo — приложение для аренды пауэрбанков

Station
Emoji stars

Кто заказчик и с чем он пришёл

На разработку стартапа заказчика вдохновили поездки в Китай: там он познакомился с ребятами, которые делают IOT устройства. Когда заказчик пришел к нам за оценкой проекта, у него уже была идея и инвестиции.

Мы изучили конкурентов, отобрали минимальную функциональность и продумали главные флоу.

Energo mobiles
Energo mobiles
Energo mobiles
Emoji glass

В чём челлендж?

Сделать мобильное приложение на RN — для нас рядовая задача. Однако, проект предполагал взаимодействие с железом, а мы до этого ни с чем подобным не работали.

Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen Screen
Emoji hand

Экраны

70+

экранов

Проработали UX: провели JTBD исследование, чтобы спрогнозировать, будет ли приложение интересно пользователям, составили CJM, прописали User Flow и спроектировали информационную архитектуру приложения.

Аудитория
приложения

  • Пол

    мужской, женский

  • User experience

    > 10 лет

  • Расположение

    большие города

  • Возраст

    20-35

  • Online Experience

    > 5 лет

  • User

    Юлию

    23 года, Москва

  • User

    Андрей

    34 года, Москва

  • User

    Елена

    26 лет, Москва

  • User

    Семен

    30 лет, Москва

  • User

    Екатерина

    22 года, Москва

Emoji party

UI/UX дизайн

Разработали дизайн-концепты, опираясь на прошлые похожие проекты, конкурентов и паттерны от Apple.

UI/UX icons
UI/UX map location UI/UX locator
UI/UX address
UI/UX power
UI/UX power
UI/UX locator
UI/UX design phone
UI/UX design phone
UI/UX design phone
UI/UX design phone
UI/UX design phone
UI/UX design phone
UI/UX design phone

Типографика
& Цвет

Нам было важно сохранить удобочитаемость даже на экранах небольшого размера с низким разрешением. Поэтому мы выбрали SF Pro Text — шрифт без засечек, разработанный компанией Apple.

Шрифт

SF Pro Text

А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я

А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я

1 2 3 4 5 6 7 8 9

Цвета

  • #0E173C

  • #868B9E

  • #F0F0F0

  • #FFFFFF

  • #FCDE31

  • #C32336

Emoji evil
Emoji evil

Проблемы со станцией

Заказчик прислал нам станцию, чтобы мы могли проводить полноценное тестирование. Когда приступили к разработке, столкнулись с двумя проблемами:

1. Мы не знали, как с взаимодействовать со станцией

2. Документация не помогала

Emoji fingers

Как работает?

Чтобы разобраться со станцией, связались с производителем и предыдущим подрядчиком заказчика — до этого он успел разработать десктопное приложение. Несмотря на то, что старый код был написан на Java (мы работаем с Node.js), смогли произвести реверсинжениринг и разобраться в сути.

Так мы поняли, что:

1. Станция ≠ сервер (она посылает запросы, а не обрабатывает их)

2. Станция подключается к фиксированному IP (поменять его мы не можем)

3. Станция настроена на работу с операторами сотовой связи (не всеми)

Emoji cool
Emoji cool

Настройка станции

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

Сменить IP тоже нельзя: производители станции утверждали, что мы не справимся. Обратились к ним за помощью — скачали TeamViewer, дали доступ к коду и наблюдали, что они делают. Поняли, что без китайцев это сделать было бы нереально — всё писалось иероглифами. Мы записали все действия и сели разбираться. Они вводили данные в шестнадцатеричной системе и определенном порядке. Воспроизвести их и перевести ASCII в HEX было несложно — так мы и научились менять настройки станции.

Emoji runner

Экспресс-дизайн станций

У заказчика был свой дизайнер — он должен был сделать дизайн для самой станции, но в один момент он просто отказался от работы. Тогда заказчик пришел к нам и попросил сделать развертку дизайна станции. Разумеется, сделать нужно было здесь и сейчас: в Китае к сборке станций все уже было готово.

Илья Саблин, UI/UX дизайнер

ТЗ на дизайн станций не было, поэтому пришлось постараться — чтобы клиенту было из чего выбирать.

Илья Саблин,
UI/UX дизайнер

Design
Emoji pallete

Дизайн лендинга

Дополнительной задачей на проекте стала разработка лендинга. На этот раз ТЗ было, но работу оно нам не облегчило: после того, как мы подготовили макет, заказчик пришел с новым.

Мы подготовили кастомные иллюстрации и сделали лендинг в лучших традициях минимализма.

App Store
& GooglePlay Preview

Energo store
Energo store preview
Energo store preview
Energo store preview
Energo store preview
Energo store preview
Emoji encertitude

React Native и бэкдропы

Заказчик очень просил добавить бэкдропы как в Maps — нативном приложении для iOS. В React Native анимация делается на JS, из-за чего при попытке анимировать все свойства происходит падение частоты кадров до 30fps.

Когда делали Energo, библиотек, которые могли бы нам помочь, не было. Пришлось использовать абсолютное позиционирование и делать перекрытие элементов, чтобы “спрятать” шторку на главном экране приложения и имитировать поведение нативного бэкдропа.

Александр Пуртов, тимлид в Purrweb

Чтобы полностью развернуть бэкдроп, нужно свайпнуть пальцем на 200px вверх, чтобы свернуть — на 50px вниз. Добавили брейкпоинты с “весами” в зависимости от направления свайпа.

Александр Пуртов,
тимлид в Purrweb

Emoji card

3-в-1: откуда взялись еще два приложения

В итоге мы смогли разработать кроссплатформенное приложение для iOS и Android, которое работает в связке с IoT станциями. Несмотря на то, что изначально мы планировали разработать только одно приложение, в процессе разработки поняли, что заказчику понадобятся еще два:

Приложение для рекламы — приложение для медиарекламы и размещения плейлистов с видеороликами.

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

Design
Emoji confetti

Много станций и выход на самоокупаемость

Сейчас в Москве размещено 650 станций, 100 из них — в метрополитене. Большую часть трафика заказчик планирует привлекать через метро и кафе.

Влад Самарин, генеральный директор Energo

С Purrweb мы работаем уже несколько лет. Они разработали мобильное приложение и всю архитектуру нашего проекта, что позволило нам привлечь инвестиции и заключить госконтракт. Ребята очень отзывчивые, очень качественно работают.

Влад Самарин,
генеральный директор Energo

Emoji phone

Результат

Приложение уже доступно в App Store и Google Play

Powerbank