Mobile App   Website  

The making of Yandex.Navigator for iPhone and Android

Overview   Process  

Studying navigators created before us.

yandex navigator process 01

Starting to go through usage scenarios schematically.

yandex navigator process 02

Creating an approximation of the interface based on the maps we created.


Working on the style of the 3D map.

yandex navigator process 04

The application will use vector maps. Unfortunately, Russian legislation forbids measuring building heights, which means 3D will be added by uniformly stretching the whole map layer vertically. Making houses semi-transparent so they wouldn’t obscure the view of the route when the map is tilted.

yandex navigator process 05

Considering different styles for interface elements.

yandex navigator process 06

Preparing a 3D model of the cursor and a texture to go along with it.

yandex navigator process 07

The arguments about the application icon go on the entire time we work on the project.

yandex navigator process 08

The screen map does not satisfy the art director. Offering two new ones.


In the first version the main screen includes route information.


In the second version the main screen offers buttons for most frequent usage scenarios.


The art director sends both screen maps to the rubbish bin. A decision is made to think about conceptually different layouts.


The new concepts never see the light either, but leave a trails of helpful features and clever solutions.

Starting to develop a screen map using the most frequent usage scenarios.

yandex navigator process 13

Drawing the screens based on the chosen map.

yandex navigator process 14

Preparing interface elements for typesetting. In the course of the project we decided to work with four resolutions standard on iPhone and Android. This meant that the outsources need to cut out all the elements for the following resolutions: 640×960, 480×640, 320×480, 240×420.

yandex navigator process 15

Drawing advertising t-shirts.

yandex navigator process 26

Working on use cases and thinking over finger ergonomics.

yandex navigator process 16

Polishing the style.

yandex navigator process 17

The first field tests. The dashcam captures drivers’ reactions, while their interactions with the interface are getting recorded on the iPhone.

yandex navigator process 25

Recording the sounds at the Love Radio studio.

yandex navigator process 18

The application will have a male and a female voice. It will combine compound numbers in real time using pre-recorded audio files.

yandex navigator process 19

By default, the application inherited the traffic information style of mobile Yandex.Maps. Many efforts to calm down the screaming mess led us to borrowing the style of the main version of the Maps.

yandex navigator process 20

Restyling Favorites and POI icons taken from mobile Yandex.Maps.

yandex navigator process 23

Evolution of the main screen led to its extinction. But the route screen remained faithful to the core design principles all way long.


We don’t have enough time to include adding a waypoint to a route. This will have to wait until the next release.

yandex navigator process 24

To be continued...


Order a design...