Taxometer redesign

Taxometer redesign

Taxometer redesign

More details we showed on MailDesignConf & DribbbleMeetup 2021

Overview

In the middle of 2019 Taxometer app was very outdated with legacy code. Almost every screen was easier to rewrite from scratch than to update it. After several screens we made a decision to redesign core of the app.

Full redesign with development and review was made in 6 month.

Old app screens
Old app screens

Main screen

Map became a main “layer” of the app. All other screens opens in bottom sheets.

Above the map was placed working mode selector, bottom bar with main sections and map control buttons.

image

Working mode selector

Mode selector is a slider and dropdown at the same time

Slide of the coloured circle switches online/offline modes.

Other working modes you can select from dropdown menu.

You can test slider in hi-fi prototype:

Above the map was placed working mode selector, bottom bar with main sections and map control buttons.

image

Bottom bar

Bottom bar contains 3 main sections:

  • Main menu
  • Preorders list
  • Company news

Every section can have a notifications.

image

Global notifications and errors

In different situations, various status messages may appear at the top of the screen, which shift the controls down.

3 colors can be used depending of the message.

Only one message can be displayed at a time.

Click on the plate opens a bottom sheet with a description.

image
image
image
image
image
image

Menu

It may seem like there is too much content in one page. It is, but we made this in favor of a speedy development of a new design and planned to spread it on different pages in the future.

Old on the left, new on the right
Old on the left, new on the right

Driver data placed at the top: profile, rating, status of loyalty programs and balance.

Next to profile, earnings statistics are displayed with connection to the history of trips and completed bonuses.

Further, list of available targets with cash rewards.

At the end, additional motivation programs, as well as an information section.

Footer

RowFooter rows
1