Responsive image

Project description

This project was developed by Ubisoft as a part of the marketing advertisment for the game Whatch Dogs. The aim of this application is putting public available data on a map. Three cities are available: Paris, London and Berlin. Data depends on datasets available in the areas.

Responsive image Overview of the application. The selected city is Paris.


The application gathers available geolocated data in a non-exhaustive way: it only displays the information for which Ubisoft has been given the authorization by the sources. For this reason very often the information is not complete. The data displayed on the map are also present in a legend on the left. Data is organized in layers, the user can enable or disable a layer from the legend on the left. Data is collected realtime and for that reason sometimes there's a little delay between the user action and the actual reaction of the application. The quality of data seems good in every category, the only critique that can be made is about the relevance of some type of data.

This are the type of data that are actually present in the application:

Responsive image

Statistics based on area

There's a section on the right part of the application for statistics about the area currently displayed. It shows:

  • Unemployment rate
  • Crime rates
  • Electricity consumption

Responsive image Statistics


Zoom levels

The map is rendered using WebGL and a basic shader that takes into account light. The map displays a simplified 3D structure of the city, that enables the user to see the height of the buildings and contributes to the understanding of the area that is currently displayed. In order to see the map there are three different level of zoom:

Responsive image City overview
Responsive image Area overview
Responsive image Area specific


In order to see information about the data the user can put the mouse hover a certain icon on the map in order to see a little popup. For more information the user can click on the icon in order to open a second popup. This kind of popup is more invasive than the previous one. Since the application is high integrated with social networks it can displays a lot of public available informations such as tweets, photos and locations shared by people that are phisically there.

Responsive image Mouse hover popup - Subway train
Responsive image Mouse click popup - Twitter
Responsive image Mouse click popup - Bikes
Responsive image Mouse click popup - Instagram
Responsive image Mouse click popup - Instagram


When the user click on an icon on the map, before showing the popup the system creates lines that connects data of the same type around the clicked icon. This is very useful at area specific zoom level in order to see if there are more data in the surroundings.

Responsive image clustering


No additional information on the icons

There are no additional information on the icon that represent the position of the data. The icons are very important in order to let the user understand the meaning of the data. For example in project 3 my group used two different icons for stating that a certain bike station is full or empty (this information in very useful for a user and must be visible during the overview).

The application doesn't exploit shapes and colors in icons

Since this is a map based application the choice of the icons that represent data is very important. Here icons have no meaning, the user can distinguish them only using the legend. There are better ways to improve the knowledge that the user has on the data. For example we can use similar colors or shapes for data that have similar meaning (like underground and bikes that are both transportation systems). I suggest also to avoid same colors for completely different things (like bikes and ATMs).

Too many data in small areas

In some areas there are too many data, expecially when the user is in area overview zoom mode. There's the need to aggregate data. One example is removing the icons and use a circle with the number of icons in that area.

Responsive image Too many icons
Responsive image Too many icons
Responsive image Too many icons


In some popups no useful information appears. In other popups the information are not decoded properly (for example tweet that are written in french) and this result in an incorrect visualization of strings.

Responsive image Unuseful popup example
Responsive image Unuseful popup example
Responsive image Unuseful popup example
Responsive image Incorrectly parsed popup

Live activities: waste of space on the screen

Since this is an advertisement tool the Ubisoft introduced an area that shows how many people are watching the application in this moment. There are a lot of problems with this kind of visualization. First of all there's not a real need for the user to know how many other users are watching the same app. Second the nicknames are alphanumerics and have no meaning for a human being. In my opinion this section can be removed in order to make more space for the map and focus the user attension on more useful content.

Responsive image Live activities


The appication allows the user to rotate the map. This is an anuseful feature because in order to recognise pattern on a map (like well known areas of the city) it must maintain the same orientation.

Responsive image Zoom and rotation controller.

No street names

The map doesn't contain the name of the streets. This can be very confusing for the user that is looking for data in a particular street. The application also introduced a search field that allows the user to search among the data: it is not really useful because it doesn't allow street based search, it only suggests data with the searched string in it.

Responsive image There are not street names.
Responsive image Search works only for main turistic attractions.

No comparisons on statistical data

The application shows some statistics on the right but they're not enough. People need statistics in order to make comparisons between different areas. In this application in order to rereive statistics of different places the user needs to move the map. I think this is not the best way of presenting data because the user can't directly compare and gain knowledge from the comparison. A possible solution is using graphs like in every project 3 application and let the user enables comparisons with the entire city (for example make a comparison between the average income rate of the area and the whole city).


In conclusion the application is very good looking, it displays a lot of data in the right way providing also additional data using popups. Sometimes the popups are not well designed and display no data at all, but in general are useful. The user can interact with this application in a very intuitive way: dragging the map and clicking on the data that she want to see. In order to give a better understanding the icons can be changed and the indea is using same shaper or same color per data that are similar. Another possible improvement that I suggest is using some marker in order to indicate some situation on the data (for example a bike station that has no more bikes or is full). Last thing to point out is the way of showing statistical data. This is the weak point of this application: the statistics must allow comparison, in this application they are treated like curiosity about the area, but they don't help the user in finding information about aggregated data and to gain knowledge with it.