Mobile App
UI/UX
2020
Energo — приложение для аренды пауэрбанков
![Emoji stars](/images/energo-smile-stars.png)
Кто заказчик и с чем он пришёл
На разработку стартапа заказчика вдохновили поездки в Китай: там он познакомился с ребятами, которые делают IOT устройства. Когда заказчик пришел к нам за оценкой проекта, у него уже была идея и инвестиции.
Мы изучили конкурентов, отобрали минимальную функциональность и продумали главные флоу.
![Energo mobiles](/images/energo-mobiles-img1-ru.jpg)
![Energo mobiles](/images/energo-mobiles-img2-ru.jpg)
![Energo mobiles](/images/energo-mobiles-img3-ru.jpg)
![Emoji glass](/images/energo-smile-glass.png)
В чём челлендж?
Сделать мобильное приложение на RN — для нас рядовая задача. Однако, проект предполагал взаимодействие с железом, а мы до этого ни с чем подобным не работали.
Тренды
& решения
Исследование конкурентов помогло нам выделить лучшие практики в нише и придумать уникальные фишки Energo.
-
Предупреждающий дизайн
Приложение угадывает действия пользователей — не нужно тратить время на решение задачи, которая может возникать несколько раз в день.
-
Персонализация
С помощью методики Compas Segmentation выделили главные архетипы пользователей Energo. Добавили автозаполнение форм, персональные скидки и специальные предложения.
-
Яркий онбординг
Чтобы помочь пользователям понять, как работает аренда пауэрбанков, добавили онбординг с кастомными иллюстрациями — он наглядно объясняет принцип работы Energo.
-
Микровзаимодействия
Визуальный фидбек через микровзаимодействия, анимации и уведомления, которые приходят пользователям когда они находятся внутри приложения.
-
Понятный флоу
Продумали мотивации, барьеры и решения к ним — пользователь не споткнется на этапе регистрации и не запутается во время взаимодействия со станцией.
-
Простой поиск
Поиск, который позволяет пользователям находить станции всего за 3 клика. Можно отфильтровать станции по заведению, станции метро или названию улицы.
![Trends img](/images/energo-trends-img1-ru.png)
![Trends img](/images/energo-trends-img2-ru.png)
![Screen](/images/energo-screens1-ru.png)
![Screen](/images/energo-screens2-ru.png)
![Screen](/images/energo-screens3-ru.png)
![Screen](/images/energo-screens4-ru.png)
![Screen](/images/energo-screens5-ru.png)
![Screen](/images/energo-screens6-ru.png)
![Screen](/images/energo-screens7-ru.png)
![Screen](/images/energo-screens8-ru.png)
![Screen](/images/energo-screens9-ru.png)
![Screen](/images/energo-screens10-ru.png)
![Screen](/images/energo-screens11-ru.png)
![Screen](/images/energo-screens12-ru.png)
![Screen](/images/energo-screens13-ru.png)
![Screen](/images/energo-screens14-ru.png)
![Screen](/images/energo-screens15-ru.png)
![Screen](/images/energo-screens16-ru.png)
![Screen](/images/energo-screens17-ru.png)
![Screen](/images/energo-screens18-ru.png)
![Screen](/images/energo-screens19-ru.png)
![Screen](/images/energo-screens20-ru.png)
![Screen](/images/energo-screens21-ru.png)
![Emoji hand](/images/energo-smile-hand.png)
Экраны
70+
экранов
Проработали UX: провели JTBD исследование, чтобы спрогнозировать, будет ли приложение интересно пользователям, составили CJM, прописали User Flow и спроектировали информационную архитектуру приложения.
Аудитория
приложения
-
Пол
мужской, женский
-
User experience
> 10 лет
-
Расположение
большие города
-
Возраст
20-35
-
Online Experience
> 5 лет
-
Юлию
23 года, Москва
-
Андрей
34 года, Москва
-
Елена
26 лет, Москва
-
Семен
30 лет, Москва
-
Екатерина
22 года, Москва
![Emoji party](/images/energo-smile-party.png)
UI/UX дизайн
Разработали дизайн-концепты, опираясь на прошлые похожие проекты, конкурентов и паттерны от Apple.
![UI/UX map location](/images/energo-design-map-location-ru.png)
![UI/UX address](/images/energo-design-address-ru.png)
![UI/UX power](/images/energo-design-power-ru.png)
![UI/UX power](/images/energo-design-push-ru.png)
![UI/UX design phone](/images/energo-design-phone3-ru.png)
![UI/UX design phone](/images/energo-design-phone7-ru.png)
![UI/UX design phone](/images/energo-design-phone6-ru.png)
![UI/UX design phone](/images/energo-design-phone4-ru.png)
![UI/UX design phone](/images/energo-design-phone5-ru.png)
![UI/UX design phone](/images/energo-design-phone1-ru.png)
![UI/UX design phone](/images/energo-design-phone2-ru.png)
Типографика
& Цвет
Нам было важно сохранить удобочитаемость даже на экранах небольшого размера с низким разрешением. Поэтому мы выбрали SF Pro Text — шрифт без засечек, разработанный компанией Apple.
Шрифт
SF Pro Text
А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
1 2 3 4 5 6 7 8 9
Цвета
-
#0E173C
-
#868B9E
-
#F0F0F0
-
#FFFFFF
-
#FCDE31
-
#C32336
![Emoji evil](/images/energo-smile-evil.png)
![Emoji evil](/images/energo-smile-evil.png)
Проблемы со станцией
Заказчик прислал нам станцию, чтобы мы могли проводить полноценное тестирование. Когда приступили к разработке, столкнулись с двумя проблемами:
1. Мы не знали, как с взаимодействовать со станцией
2. Документация не помогала
![Emoji fingers](/images/energo-smile-fingers.png)
Как работает?
Чтобы разобраться со станцией, связались с производителем и предыдущим подрядчиком заказчика — до этого он успел разработать десктопное приложение. Несмотря на то, что старый код был написан на Java (мы работаем с Node.js), смогли произвести реверсинжениринг и разобраться в сути.
Так мы поняли, что:
1. Станция ≠ сервер (она посылает запросы, а не обрабатывает их)
2. Станция подключается к фиксированному IP (поменять его мы не можем)
3. Станция настроена на работу с операторами сотовой связи (не всеми)
![Emoji cool](/images/energo-smile-cool.png)
![Emoji cool](/images/energo-smile-cool.png)
Настройка станции
Подключить станцию локально нельзя: чтобы она получала и отправляла запросы, нужно постоянно держать включенным сервер с актуальной версией кода.
Сменить IP тоже нельзя: производители станции утверждали, что мы не справимся. Обратились к ним за помощью — скачали TeamViewer, дали доступ к коду и наблюдали, что они делают. Поняли, что без китайцев это сделать было бы нереально — всё писалось иероглифами. Мы записали все действия и сели разбираться. Они вводили данные в шестнадцатеричной системе и определенном порядке. Воспроизвести их и перевести ASCII в HEX было несложно — так мы и научились менять настройки станции.
![Emoji runner](/images/energo-smile-runner.png)
Экспресс-дизайн станций
У заказчика был свой дизайнер — он должен был сделать дизайн для самой станции, но в один момент он просто отказался от работы. Тогда заказчик пришел к нам и попросил сделать развертку дизайна станции. Разумеется, сделать нужно было здесь и сейчас: в Китае к сборке станций все уже было готово.
![Design](/images/energo-express-design.png)
![Emoji pallete](/images/energo-smile-pallete.png)
Дизайн лендинга
Дополнительной задачей на проекте стала разработка лендинга. На этот раз ТЗ было, но работу оно нам не облегчило: после того, как мы подготовили макет, заказчик пришел с новым.
Мы подготовили кастомные иллюстрации и сделали лендинг в лучших традициях минимализма.
![Landing Macbook](/images/energo-landing__macbook.png)
![Landing Macbook In Ru](/images/energo-landing__macbook-in-ru.png)
App Store
& GooglePlay Preview
![Emoji encertitude](/images/energo-smile-encertitude.png)
React Native и бэкдропы
Заказчик очень просил добавить бэкдропы как в Maps — нативном приложении для iOS. В React Native анимация делается на JS, из-за чего при попытке анимировать все свойства происходит падение частоты кадров до 30fps.
Когда делали Energo, библиотек, которые могли бы нам помочь, не было. Пришлось использовать абсолютное позиционирование и делать перекрытие элементов, чтобы “спрятать” шторку на главном экране приложения и имитировать поведение нативного бэкдропа.
![Александр Пуртов, тимлид в Purrweb](/images/energo-purtov.png)
Чтобы полностью развернуть бэкдроп, нужно свайпнуть пальцем на 200px вверх, чтобы свернуть — на 50px вниз. Добавили брейкпоинты с “весами” в зависимости от направления свайпа.
![](/images/energo-iphone.png)
![Emoji card](/images/energo-smile-card.png)
3-в-1: откуда взялись еще два приложения
В итоге мы смогли разработать кроссплатформенное приложение для iOS и Android, которое работает в связке с IoT станциями. Несмотря на то, что изначально мы планировали разработать только одно приложение, в процессе разработки поняли, что заказчику понадобятся еще два:
Приложение для рекламы — приложение для медиарекламы и размещения плейлистов с видеороликами.
Приложение для техперсонала — приложение для техников, которые мониторят работоспособность станций и обновляют прошивку.
![Design](/images/energo-three-in-one.png)
![Emoji confetti](/images/energo-smile-confetti.png)
Много станций и выход на самоокупаемость
Сейчас в Москве размещено 650 станций, 100 из них — в метрополитене. Большую часть трафика заказчик планирует привлекать через метро и кафе.
![Влад Самарин, генеральный директор Energo](/images/energo-samarin.png)
С Purrweb мы работаем уже несколько лет. Они разработали мобильное приложение и всю архитектуру нашего проекта, что позволило нам привлечь инвестиции и заключить госконтракт. Ребята очень отзывчивые, очень качественно работают.
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 часов.
Может, вы хотите запланировать онлайн встречу?
Что-то пошло не так.
Пожалуйста, попробуйте ещё раз позже.
ТЗ на дизайн станций не было, поэтому пришлось постараться — чтобы клиенту было из чего выбирать.
Илья Саблин,
UI/UX дизайнер