Today in Brazil we face a big challenge of not having data on the cycling infrastructure available in our cities. This makes it very hard to paint a clear picture of our reality and measure the opportunities and impacts to society of improving urban mobility.
I’ve teamed up with UCB (Brazil Cyclists Union) and ITDP (Transport and Development Policy Institute), two important brazilian civil society organizations on cycling and urban mobility, to design and developed the first platform of cycling maps encompassing all Brazilian cities.
We’ve leveraged the data and collaborativeness of OpenStreetMap (OSM), a huge global initiative similar to a Wikipedia of maps. I’ve created an open-source web application, free and accessible from any computer or smartphone, aimed at both the average citizen that doesn’t know her city’s bike paths, and researchers, who now have easy access to data to develop further analysis.
As the main stakeholders of the project my first activity was conducting a workshop using the Lean Canvas framework so we could make sure we were aligned on what we were going to build.
The main problems we wanted to solve were:
We also found out some of our “unfair” advantages: UCB and ITDP and 2 of the biggest organizations of this kind which could at that time invest in this project and would be able to mobilize the community. Also everyone on the team already had experience with similar projects involving webapps, maps and OSM data.
Our first step was to dive in OSM documentation and learn about cycling infrastructures. Fortunately we had on the team a specialist on OSM, who helped us abstract the super granular and technical tags into something more accessible.
We also did a deep dive on everything that was available on the market, from other map-based webapps to some PDF cycling-maps from cities around the world. At this step we validated that our solution seemed to be innovative and unique, since there didn’t seem to exist anything exactly like it. Still, we found intersections with existing solutions that gave us inspiration and new ideas on how to solve the problems.
Our main insights were:
It was important to start off with a very low-fidelity prototype to validate the main features and visual hierarchy, without putting on the table discussions on visuals. Although it looks very different than the final version the overall experience didn’t change that much!
With the references in mind and the typologies well defined I started sketching different ways we could lay out these feature on the screen. The concept always was to have the map as the main thing. Second came the current city in focus, and third the complementary UI elements to control the map such as typology filters, address search field, “about” link and the small but important data download button.
The entire development was done by me. It’s always a challenge to separate the engineering and design mindsets in the process, so I forced myself to always ideate on Figma first, validating with the peers and only then creating cards on our Trello board to document the task and prioritize it.
The overall system architecture passed by many iterations. I started with very simple ones to test concepts concerning the OSM Overpass API and slowly added more complexity to mitigate the problems we’re seeing, getting feedback from the stakeholders and always aiming to improve the user experience.
For this project I also wanted to try out Mapbox, an open map library which is built on top of OpenStreetMap. It’s also super modern and well done, and offer way more flexibility than any other library I’ve used before. In addition, it was a pleasure using Mapbox Studio, their interactive map customization tool, which is an awesome product and enabled me lots of controls to be creative designing our base map.
The visual identity draws inspiration from data dashboards from sci-fi movies, with a dark-themed color palette. The map style is highly subdued, so the bike infraestrucure would look like neon stripes glowing in the dark.
A nice little interaction detail are the tooltips on the layers filters. They help educate the user of what each layer type is about.
I was also responsible for designing social media posts that would highlight the different features. These included posts in Instagram, Facebook, Linkedin, Twitter, etc.