OpenStreetMap is a project that has brought together large numbers of people to create the most detailed map of the world. Map data is open to everyone, and anyone can edit or use it for their own project.
MAPS.ME is one of such successful applications of OpenStreetMap data. This is a popular mobile app that includes an offline map of the world, which is used by about 20 million users.
Urbica Design was commissioned by the MAPS.ME team to create a new map design. The main task is to consider the use cases of the product and develop a modern and useful map style. The major use cases include: navigating using the map, searching for objects and planning routes.
Discover
Let’s take a detailed look at what we needed to work on:
The first step was to print different areas of the map at different scales in order to compare them and determine old map style issues to improve.
While we were comparing the maps we looked into ways of improving it. We realized some objects take up too much space on the screen. For example, the lines of arterial roads are too wide, which makes it difficult to identify the city’s road grid. Also, the icons are too large and they take up a lot of space. Some object types are unnecessarily displayed at varius zoom levels. They clutter up the map and make it difficult to find the desired symbols. The map could be clearer and neater.
Secondly, we needed to understand how people are using MAPS.ME. In addition to analysing search query stats and most popular user devices, we asked the development team to share statistics about where users downloaded maps. We received a lot of data, and placed it on the map.
It was interesting to see what percentage of users in each country download maps of their own country. This gave us information about which countries maps are used by locals.
We made some interesting discoveries: for example, Austria is downloaded from Germany more often than from in Austria itself. This is most likely due to Germans visiting Austrian ski resorts.
What is the relationship between this statistic and the map styles? The precise knowledge of use helps us to clarify the map styling task for every country and design better unified solutions. It turned out that there are countries where MAPS.ME is popular among local users, and there are countries where tourists are the most frequent users.
Design
Next comes the main part of the project: the development of styles. We started from scratch. This process consists of many small iterations and experiments with style, data and user experience.
While creating the map style, we sometimes needed to make changes to the rendering technology and process some aditional data. The developers of MAPS.ME helped us with that, and we felt like a part of their team during the project. In addition, they provided us with tools for working with map styles which turned out to be very convenient as we could test it directly on the mobile device.
As a result, we came up with the following design concept:
We redesigned the visual classification of objects by reducing the number of visual styles to a small number of symbols. Now it is much easier to distinguish the main roads from the secondary ones, and the dotted lines of pedestrian paths are clearly readable. Now both drivers and pedestrians can navigate with ease.
Public transport stops are clearly highlighted. Subway stations are highlighted using their local insignia in big cities.
We have have improved the landmark designations. We have chosen the most important categories of POI (point of interest) using stricter object filtering. Which in turn eliminates visual clutter. The more you zoom in, the more you can see.
We have used Maki set from Mapbox for most of the POI icons — they are perfectly unified and suitable for use on maps. Also we have specifically designed the subway and other transport icons for this project.
We have simplified the color pallete so it is not overloaded with many different shades. We use high-contrast symbols to mark important map objects, such as landmarks, major highways, subway stations and bus stops. Whereas we use lower contrast to mark less imposrtant objects. Also the contrast of the objects depends on the zoom level.
We have selected the colors so all users can distinguish them, taking into consideration color blindness. Seeing as ~8% of men and ~0.5% of women have problems distinguishing color.
Deliver
The team from MAPS.ME liked the design concept. However, everything was not so simple, since we still had to implement the styles for a mass audience, this must be done discreetly. Which would be better as a typical app update rather then a complete redesign.
For this reason, we developed transitional map style. It uses the same principles, just with another road design. We discovered the users are used to seeing yellow roads in app, so we designed major highway styles similar to the prevous appearance, which kept the update simple.
Today MAPS.ME was updated a version of the app with our map design. In later versions of the app the rendering technology will be updated, meaning that some of our next designs will appear.
While we are on the subject of redesign we want to show the comparison between the previous styles (old/new version, left to right).
On the overview map of the world, we have shifted the focus from country to city labels, and now capitals are marked with an asterisk, making them easier to spot.
We have simplified the representation and created a user-friendly system of symbols. By reducing the number of visual categories and filtering small cities makes it more convenient. It is unlikely that at this scale a person needs to see every city.
At medium scale city’s major highways should be easy to read, because people quickly recognize the structure of the city from the road grid. The more road styles there are, the more complicated it is to distinguish between the main roads and the secondary roads. We have simplified roads symbols to a small number of the visual classes.
At a more detailed scale urban area labels can help users to find the proper area to zoom in on.
However, in many large cities with developed transport systems people navigate by using subway and train stations.
It comes in handy when map symbols match those of the particular city. So we have developed special subway icons for ten major cities. The list of cities will be expanded.
We realised the importantce of exact locations of subway exits so we clearly marked them.
We have filtered any unnecessary information at each map scale and keep only those objects which might be important for the user.
OpenStreetMap is a stunning project. As of today it is the most detailed map of the world, and any user can improve it.
Finally, we have a bonus: the updated app has a “night” map style, which uses a color palette that keeps the screen from blinding you in the dark. This mode can be enabled by typing “?dark” in the search field (and by entering “?light” will return you to the normal day mode).
Currently the MAPS.ME maps include 385 million different objects in a few hundred different categories. We would like to thank the MAPS.ME team for giving us the opportunity to work with such a large and interesting dataset. It was a greate challenge for Urbica.
Map data © OpenStreetMap contributors.
