Mobile App Redesign UI/UX

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.

App screen with map

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.

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.

Many app screens
  • Mobile app screen
    Search

    Convenient station search

    The app can determine the user’s location and offer the nearest available station.

  • Mobile app screen
    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.

  • Mobile app screen
    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 Elon Musk
Tesla auto

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.

  • develop-item

    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? 🙂

Electro motorbike

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.

Key
Features

  • QR-code
  • LED
    indicator
  • Electric charging socket (type 2)
Charging station
Charging stations

Dimensions

Charging station sizes
Charging stations