Mobile App
UI/UX
2020
Energo — a powerbank renting app
About the client
The client was inspired by his traveling to China: there he met guys who produced IoT devices. When the client came to us, he had already had an idea and investments.
We analyzed competitors, picked minimal required functionality, and thought out the core flow of the app.
What's the challenge?
It’s easy for us to develop a React Native mobile app. However, we had to integrate the app with an IOT station, which we have never done before.
Trends
& Features
Competitor analysis helped us to sum up the common design and functionality trends incorporating best practices and unique approaches.
-
Anticipatory design
We added anticipation features to simplify processes by responding to needs one step ahead of the user’s decisions. The app knows what users want — there is no need to waste their time.
-
Flawless experience
At the design stage, we thought out all drivers, barriers and hooks — so the user won’t get stuck while signing up or interacting with the station.
-
Blazing onboarding
Users will learn how renting a power bank works from the very beginning. We added a bright onboarding with custom illustrations — it clearly demonstrates the basic idea of Energo.
-
Interaction
The app communicates with users by giving them visual feedback through microinteractions, animations and in-app notifications.
-
Personalization
Segmenting enabled us to focus on users and help each audience adopt new behavior patterns. We added location-based autofill, discounts, and special offers.
-
Intuitive search
We introduced an advanced search in the app — it’s easy to find the nearest station just in 3 taps. Users can filter the stations by venue, location, street, or choose the recent one in history.
Screens
70+
screens
To polish the user experience, we carried out JTBD research (helped us understand the users’ goals the app can accomplish), created CJM, worked out all core User Flows, and came up with the Informations Architecture of the app.
Target
audience
-
Gender
Female, Male
-
User Experience
> 10 years
-
Geography
Major cities
-
Age
20-35
-
Online Experience
> 5 years
-
Yulia
23 years, Moscow
-
Andrew
34 years, Moscow
-
Helen
26 years, Moscow
-
Symon
30 years, Moscow
-
Katherine
22 years, Moscow
UI/UX design
We used our previous projects, competitors, and Apple patterns — as leverage and made several design concepts.
Typography
& Colors
It was important to make all texts in the app legible — even if it’s run on a low-spec device. That’s why we used neutral SF Pro Text — a sans-serif typeface developed by Apple.
Type
SF Pro Text
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Colors
-
#0E173C
-
#868B9E
-
#F0F0F0
-
#FFFFFF
-
#FCDE31
-
#C32336
What’s wrong with IoT stations?
The client sent us one of the IoT stations he had received from China — it’d help us test the app. When we started developing it, we faced two problems:
1. We didn’t know how to communicate with the station
2. The manual didn’t help us at all
How it works
Hoping that we’d figure out how the station worked, we contacted the manufacturer and the client’s previous contractor (he had already developed the first version). Although the contractor worked with Java (we use Node.js), we managed to reverse engineer his code and understand the matter.
Thus, we learned that:
1. Station is not a server (it sends requests, not serve them)
2. Station connects to a fixed IP (and we cannot change it)
3. Station is set up to work with particular mobile service providers
Setting up the station
You cannot deploy the station on-premise: it requires connection to the up-to-date code run on a server.
In addition, the manufacturer stated that we couldn’t change IP by ourselves. We asked them to help — downloaded TeamViewer, gave access to the code, and looked out for their steps. We would never do it, because everything was written by hieroglyphics. We did capture their steps and began puzzling out — as a result, we found out that they entered data in the Hexadecimal system. All we needed to do was to repeat the actions and convert ASCII into HEX.
Express design of the station
The client had a designer who was to create the station look. However, it turned out that the designer wimped out, so the client asked us to take on the task. We had to design the stations in no time: in China, everything was ready for production.
Landing page design
We had a subtask to design a landing page for Energo. Although this time we had requirements, it didn’t help us at all: when we finished designing the page, the client brought a new one.
The landing page is a mix of custom illustrations, bright colors, and minimalism.
App Store
& GooglePlay Preview
React Native & backdrops
The client asked us to add backdrops — just like in the native iOS Maps. React Native utilizes JavaScript for animation. When you try to animate all properties of an element, the app will experience a dropdown to 30fps.
When we worked on Energo, there were no libraries that could help us. We had to use absolute positioning and overlay elements to ‘hide’ the backdrop in the main screen of the app — this way, the user faces a truly native experience.
To expand the backdrop, you need to swipe 200px up. To collapse it, you need to shift 50px down. We added breakpoint instructions that determine swipe direction.
3-in-1: why there are 3 apps instead of 1
We managed to develop a cross platform mobile app for iOS and Android that is connected to the IoT stations. Although we initially agreed on making one app, there were 2 more apps that came along on the road:
App for advertising — an app for stations that play video playlists and show advertising banners.
App for maintenance — a mobile app for servicemen to help them set up and maintain the stations more efficiently.
Many stations and reaching the breakeven point
Now there are 650 stations in Moscow, 100 of them in the metro. The biggest chunk of the traffic we expect to get in the metro, but we also don’t forget about the cafes.
We've been working with Purrweb for several years. They provided full-scale mobile app development, which allowed us to raise a round of investments and earn a government contract. The team did a great job: they were proactive in providing feedback and implementing my suggestions.
Results
The app is now available on the App Store and Google Play
Thanks for your inquiry. We usually take up to 24 hours to get back with reply.
Wanna schedule an online meeting?
We didn’t have any requirements. We made several conceptions, so the client had what to choose from.
Ilya Sablin,
UI/UX designer