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.
Competitor analysis helped us to sum up the common design and functionality trends incorporating best practices and unique approaches.
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.
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.
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.
The app communicates with users by giving them visual feedback through microinteractions, animations and in-app notifications.
Segmenting enabled us to focus on users and help each audience adopt new behavior patterns. We added location-based autofill, discounts, and special offers.
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.
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.
> 10 years
> 5 years
23 years, Moscow
34 years, Moscow
26 years, Moscow
30 years, Moscow
22 years, Moscow
We used our previous projects, competitors, and Apple patterns — as leverage and made several design concepts.
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.
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
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.
& GooglePlay Preview
React Native & backdrops
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.
Thanks for your inquiry. It 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.