Mobile App

UI/UX

2020

Energo —
a powerbank renting app

Station
Emoji stars

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.

Energo mobiles
Energo mobiles
Energo mobiles
Emoji glass

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.

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

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

  • User

    Yulia

    23 years, Moscow

  • User

    Andrew

    34 years, Moscow

  • User

    Helen

    26 years, Moscow

  • User

    Symon

    30 years, Moscow

  • User

    Katherine

    22 years, Moscow

Emoji party

UI/UX design

We used our previous projects, competitors, and Apple patterns — as leverage and made several design concepts.

UI/UX icons
UI/UX map location UI/UX locator
UI/UX address
UI/UX power
UI/UX push
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

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

Emoji evil
Emoji evil

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

Emoji fingers

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

Emoji cool
Emoji cool

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.

Emoji runner

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.

Ilya Sablin, UI/UX designer

We didn’t have any requirements. We made several conceptions, so the client had what to choose from.

Ilya Sablin,
UI/UX designer

Design
Emoji pallete

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

Energo store, {isLazyLoading: true}
Energo store preview
Energo store preview
Energo store preview
Energo store preview
Energo store preview
Emoji encertitude

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.

Alexandr Purtov, teamlead

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.

Alexandr Purtov,
teamlead

Emoji card

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.

Design
Emoji confetti

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.

Vlad Samarin, CEO of Energo

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.

Vlad Samarin,
CEO of Energo

Emoji phone

Results

The app is now available on the App Store and Google Play

Powerbank