Back in 2013 I joined the Yandex Taxi team as their UX/UI design lead. For over a year we created new interface, features and a fresh new look that was used to develop taxi system control. As a result, about 150 application screens were designed. The program for dispatchers has been redesigned
(a small piece of design which can be viewed below).

The beginning was the analysis of the main on-Board systems of cars-Mercedes, BMW, Volvo, Toyota, Ford, Audi, Tesla. What the individual decisions has ever managed emphasize. We are borrowing the Apple Carplay dashboard. A very good solution for us, if we consider the plans to integrate the system into the on-Board computers.

In this case, I tried to show small fragments of the most interesting details. On the example of the dashboard you can see the logic — “starting point of functionality”. But dashboard is not the main screen of the application. It’s hub. After research and testing, it became clear that the main screens are quick settings, taximeter screen and messenger. Don’t forget that we are only talking about the Taximeter app. If we talk in general about the driver tools, the main screen is of course Yandex Navigator.

Back to dashboards and control panels. Taximeter was created only for the Android platform. The most common system for drivers. About 90% of drivers use Android smartphones. But as you know, this system has a lot of resolutions and screen sizes. Surprisingly, we were able to come up with an adaptation of almost most of them.

Every new project I draw icons from the beginning. It doesn’t matter if it’s a special function or just a cross. I draw them myself or order for the project. Always from scratch. If you want, it’s a kind of “component calibration”. Work to achieve the best ergonomics. Not always they will be perfect, but the project will look much better.This time is no exception. We created a set of icons for dashboards. Set of icons to manage settings. And a set of icons to indicate functions.

Special thanks for the help when working on icons to my friend and great designer Azamat Kodzoev.

Dashboard icon set

The app’s main screen is the screen of the Taximeter. It has five views and changes the set of displayed items for each of the States. If the driver switches to the Navigator from the Taximeter screen, the fare for the passenger is saved on the map. This was true when the amount for the trip was not fixed. And the meter wound the amount for kilometers.

The main solution was a grid of changing vertical columns. It has evolved from the toolbar, the information parts and the control panel. This grid helps the user to understand exactly where the indication is. Where the information section and its management is independent of the screen. It also helped to find a solution for the saturated orders screen.

We developed a lot of hidden functions of the interface. For example, one of them, changing the menu control taximeter. The driver creates an account to which he is tied to his profile and the car.

The system counts down the time from profile creation. After about a month reduces the font in the taximeter menu. After another month removes the text completely.

Indicate functions
and manage setting icons set

The screen changes
the amount of the trip

Orders screen

Thanks to this grid, we were able to find an unusual filter solution in the Orders section. A kind of curtain, which consists of three types of representation of orders. The main block is a list view. List management menu-filters. Which is also a statistics of the number of orders by class. And the representation of orders on the map. It may seem unnecessary. But since these are different displays of the same thing, which is always unnecessary, we allowed ourselves to experiment.

The map screen with the orders

And in General, the application has many different interesting solutions. For example, the poster with the notification text. Above, where I talked about creating icons and logic of color matching to them. Someone might have a question about the icons with the aircraft. Why is it yellow and not blue, that makes more sense. The answer is just in the poster screen with text. The driver can write on it the name of the person you want to meet at the airport. As you know, white and black color, as well as their gradation are neutral against the

background of the “environment of reality”. Add yellow to navigation. You could see it in many airports. This is an attempt to jump out of monotony. And the combination of black and yellow succeeds it better than others. The second factor is the Association, which I also wrote about above. Black text on yellow background is associated with taxi. If you have booked a taxi from the plane, in advance. You have context. Add the Association, and brightness. Get the good effect of simplifying life.

Poster with notification text

For a fine indication of settings and statuses, it was necessary to add an auxiliary set of icons that would differ from the functional set. They looked more systemic.

As I wrote in the beginning, there are three most used screens: dashboard, taximeter (order fulfillment) and messenger. In the Annex, two messengers One with the taxi fleet Manager to which the driver is attached. In which you can ask for help from the Manager and in which system messages come. The second with all drivers connected to the system. General chat where drivers can communicate with each other.

Messenger screen

The rationality of the use of a dark theme interface is a big question. Popularity is due to the frequent use of people working in a dark space. In the game industry, video production, etc. The dark theme allows you to reduce the counter light. Allows you to visually isolate the working field from the “interface noise”. Use dark themes for the information displayed is not conducive to the facilitation of perception. I would even say, much more difficult. Or on the big boards, for isolation from surrounding “noise of reality”. In our case, there are two reasonable reasons. Within the car, at night, it is very important to reduce the distracting counter light. And the ability to reduce battery consumption in the device. Which greatly helps to make a dark screen. The light theme saves the screen lightening on a Sunny day.


The white color absorbs much of the dark color. Especially black. Black same “increases” the bright colors. Due to the maximum contrast. And the optical illusion of increasing the object due to the invisible glow. On this one thing and the same style font on the black seems thicker than on the white. For similarity, it is necessary to use a light font on black. On white regular font. The same applies to all other interface objects. Including icons. Which we had to redraw, increasing their volume for a light theme.

Quick settings screen in light interface

Order progress screen in light interface

An example of building a grid based on
vertical columns. Vertical, mobile adaptation

In mobile, vertical adaptation we have kept the logic of division into sectors. Changed columns to rows. It kept meaning. Remained sectional perception. This allowed to keep the principle of adaptation to different screen sizes. At the same time, the formation of information has changed. Treatment was subjected to almost all the screens of the app. Including night and day theme.

Not included the version of the
Icons of the terms of the order

Order progress screen

The screen changes
the amount of the trip

Driver rating screen

As a result of the work done, about 70 percent of what we designed and created was implemented. Anyway, this is a great result. Thanks to Yandex Taxi team for the opportunity to become a part of such a large, complex and very interesting project.

Yandex Taxi System
for Yandex LLC

November 2013

Special thanks incredible guys from team Yandex Taxi

Roman Prudnikov
Artem Prudnikov
Lev Volozh