Map of charging stations for electric vehicles

About

EvTrip allows people to charge electric vehicles — such as cars, motorbikes, bicycles, or scooters — from everywhere they go.

Initially, the client hired us to design a mobile
app. He had the original design that was supposed to act as a focus for redesigning the interface — when we tried to put it into practice, it unfortunately emerged there was little use of it. The architecture of the app was not well thought out: it took the user 5 steps to solve the main problem, so we had to rebuild the system.

Our role

Pre-project
analysis
Redesign
of the app
New
identity
3D model
of a station
React Native development

Competitive analysis

In order to build a clear-cut information architecture of the app, we conducted
UX-research: gathered a list of competitors — direct and indirect — and thought out all possible user flows.

Availability Interaction Reviews Transport modes
2GIS
Availability Interaction Reviews Transport modes
Chargemap
Availability Interaction Reviews Transport modes
PlugShare
Availability Interaction Reviews Transport modes
Google Map
Availability Interaction Reviews Transport modes

Features prioritization

We started by detecting the main flows and came up with two core functions the user is after: searching and booking the nearest charging station. We knew there should be something else and brainstormed additional features that might be useful (for example, saving vehicle parameters, getting a route, or managing personal information).

⚡

Searching and booking
the nearest charging station
🚗

Saving vehicle
parameters

📍

Getting a route
🔔

Managing notifications

New
identity

In order not to get too far from the brand identity, we decided to keep the colors. The combination of black and yellow was chosen on purpose: yellow is associated with energy and optimism, which perfectly fits the industry, and black is a universal color creating strong contrast.

Logo

In addition to the UI/UX design, we also designed a logo. It’s needed for maintaining UI consistency and strong brand identity. We slightly changed the tone of yellow, tried applying different fonts and sizes, and delivered the final result that excited the client.

Typeface

Rubik 1 2 3 4 5 6 7 8 9 0 $ € £ ¥ % & ? ! @

AaBbCc

AaBbCc AaBbCc AaBbCc AaBbCc

Colors

Accents

FEE033
01BC6A
6657C8
FE5833

Primary

000000
2A282A
EAE9EA
FFFFFF

UI/UX
design

There were no problems with the design process itself. The client got what he wanted fast: both concept approval and prototype testing went flawlessly.

Search
Convenient station search

The app can determine the user’s location and offer the nearest available station.
Station details
Comprehensive station information

The app will show detailed information about a chosen station — the user gets to know what plug types are served by the station and which of them are currently available.
Route
Best route planner

Thanks to the integrated GPS system, the user easily gets their route arranged.

I've actually made
a prediction that within 30 years a majority of new cars made in the United States will be electric. And I don't mean hybrid, I mean fully electric.
Elon Musk

React Native
development

EvTrip came back to us a year later. This time they asked the Purrweb team to build a mobile app. We were amazed to find out that the client got a web app instead of a mobile one with our design. Investors wanted to see the mobile app prior to submitting a new tranche.

We, of course, suggested using React Native as a technology for building the mobile app but the client didn’t have enough time (plus, the current investments were running out). Having contemplated the situation, we proposed wrapping the web app in a mobile-like app. What we meant: reuse the existing code, utilize WebView class, and put the web version into a mobile view.

React Native
WebView

Anyway, we still had to write some parts of the app with React Native. The App Store and Google play don’t like when people try to upload a website that puts on a mask of a mobile app.
Crafty
developers

The way we did it — built registration and authorization on React Native and kept the rest as Webview — worked out well. It’s always possible to outsmart the system, right? 🙂

React Native is a technology that has already earned trust from world-known giants.
And from all
our clients.

3D model
of a charging station

The task was to create a 3D model of a charging station that would fit all modern requirements. We set to work and delivered a great model — the client liked it very much yet said it would be too expensive to produce. EvTrip offered how to make the model cheaper: add wires, cut out the screen, reduce the size. That’s what we based upon when working out a second iteration that fitted the client’s constraints.