Rethinking Buenos Aires’ interactive map

Everything has a beginning

The interactive map is one of the most interesting projects to work with under the wide umbrella of oportunities that we have in Buenos Aires eGov office. The GIS unit already had a project that offers a very useful and timely service to the citizens. The information, database, technology and algorithms used on the map worked perfectly, and so for version 3.2 we had to focus on the reorganization of the elements, to prioritize some features over others.

Buenos Aires Interactive Map v2.2

Simple and goal oriented

When we started working, one of the first things we realized was that version 2.0 had lots of possible interactions at first glance. Although this may seem like an advantage, it makes it harder for the user to find the action she was looking for when she entered the site. So, the first step was to prioritize actions and users.

Buenos Aires Interactive Map v3.0

The stats

Analizing the data, we saw that the most used feature was the one to get directions, which the user had to perform one click to get. So we decided to put this feature as the main attraction.

mapa.buenosaires.gob.ar is used by lots of users of different characteristics and with different needs: it may be someone that’s looking how to get home, architects, real estate agents, or even companies that need hard data. We had to contemplate all of them and give them one solution.

Taking into account that variety we created sets of interactions. The icon sidebar was born that way, providing direct access to the features.

Directions (“Cómo llego”): The place where any user, new or old, comes to check directions on public transport, on foot, bike or by car. The center of the app and where we can show a real difference regarding our local and international competitors (Neither Google Maps nor Bing have public transport options)

Directions

My places: Relevant data for the user gets saved with a cookie for easy retrieval: Previous entered addresses and

directions.

My places

Information: The place with all the hard data. It was re-structures so at first glance you can check all important data of a place (photo, coordinates, and land registry). It was conceived as tabular data, for a faster and more understandable

reading.

Location information

Search places: Although it already existed, it was somewhat lost. This section is for those who are not looking for an address or directorios, but for those who want to search for specific types of places (bars, drugstores, hospitals, etc.). It’s a filter for all the data on the map.

Search location

Layers: Another way of visualizing data on the map. Each of them shows different data on the map. We worked on the readability and visual cues, adding icons to help understand what they’re about and what type of information it represents.

Gis Data Layers – City Bike Lanes

Navigation

Maybe one of the greatest changes. On version 2.0, the navigation worked through the primary button of the mouse: click, click&drag and double-click. These interactions were confusing. A click on the map opened a popup window with data. Click&drag allowed you to navigate the map, and double-click was used for zooming. This generated unwanted interactions. That’s why we decided to use the left button only for navigation and the right button for displaying actions.

Icons

A completely new iconography was defined, simpler and “flatter” than the previous ones that used gradients and depth. The icons were redesigned to improve their understanding. It’s still a work in progress.

We added visual helpers to the directions showing the representative colors for each bus or subway line (e.g. the green D line, or the red, green and yellow bus 59). This helps users find which transport to take, identifying easily their preferred buses by color.

New Icons

Performance

We improved loading times using image sprites and, CSS3 gradients instead of background images. We also degrade nicely to flat colors for older browsers. With these combined techniques we lowered the loading times a lot.

Markup

To optimize the markup we chose Bootstrap, more precisely a fork that we did called BAstrap. Implementing this helps us ensure good code, good performance and being up to date with good practices.

Pay no attention to that man behind the curtain

We focused on details. We improved a lot of the micro-interactions: a better address reader that can interpret the location we’re looking for, the address saved in “my places” appears first on search auto-complete, car directions take into account road blocks by default, and much more. The goal is for the users to find what they’re looking for with less friction, getting better info, and in a more pleasant way.

Mobile

One of the big issues we’re focusing right now is the mobile challenge. We started the new design focused on supoorting mobile phones without having to work for each device in particular. We’re finishing this at the moment and we expect to give the users the best experience on their smartphones.

Summing up

The map was not re-designed, it was re-organized and re-thought. New solid foundations were created to keep growing and adding features. It was thought to be updated and renewed long term.

Lots of different kind of users come to our website and we try to give them all a solution, given that their needs are very different. That was the main challenge.

We’re very happy with the result but even more so with what’s coming. We have lots of ideas and want to implement them.

Now go to mapa.buenosaires.gob.ar and discover Buenos Aires.

By Federico Abad, UX – eGov office – Buenos Aires City Government

Original Post (in spanish): http://digital.buenosaires.gob.ar/repensando-el-mapa-interactivo-de-buenos-aires/