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 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.
The first version of this platform is already on production, but we consider it just the first step, a prototype to validate the concept, and we’re undergoing research to understand better and prioritize all the opportunities that lie ahead.
UCB (Brazil Cyclists Union) and ITDP (Transport and Development Policy Institute) are two civil society organizations that have joined forces to solve once and for all the problem of access to data on Brazil’s cycling infrastructure. 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.
The most polemic section of the discussion was around the Customer Segments. At this point in the project it was not clear to us who our users were exactly, or what segment we’d lock in, so it raised a yellow flag to me that we should revisit that in the future.
Our first step was to dive in OSM documentation and learn about cycling infrastructures. Fortunately we had on the team a specialist on OSM, but still we had to go through some wikis and lengthy (but healthy) discussions on how we’d interpret them.
The main challenge is that OSM tags entities in very detailed, granular and often technical ways. We, however, wanted to abstract this complexity to our end users, while at the same time educating on how good the different types of cycling structures are to the cyclists using a colored rank that went from green to red.
An important part at this step as well was to understand what other similar tools were available “on the market”. I documented this on a simple Google Docs were I included main screenshots, a general rating of the solution and some comments on the positive and negative sides of it.
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:
Extending the benchmarking research now I started looking at more broad inspirations of webapps that were strongly based on maps and data visualisation.
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 2 iterations. The first one, way simpler, barely did its job but was useful to validate some hypothesis concerning the OSM Overpass API. On the second version I could mitigate some of the problems we’ve found and improve the user experience.
To build the UI I chose the amazing Ant Design components, which was one of my main inspirations of Design Systems and I always wanted to try it in a real project. Their React components are super high quality and have great documentation.
For this project I also wanted to try out Mapbox, an open map library which is built on top of OpenStreetMaps. 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.
With a very functional first version of the system up and running ahead of schedule I found myself with some extra time to make it pop. Based on all the process up to now I’ve devised some brand principles to start thinking on some visual directions:
The main colors are dark because it gives a “data dashboard” vibe. It also resembles the aerial look of a cityscape at night, with the bike paths lighten up as if they were neon lights, which is pretty cool. The color palette is made of steps in a gradient from green to red representing the safety and “goodness” of the different typologies. These were optimized to the best visibility possible on both the dark map as well as available variation of a satellite map.
I helped creating some arts to promote the project and our launching webinar in different social media channels.
Check below our full webinar, in Portuguese, with participation of the entire team as well as some special guests discussing the brazilian scene of urban mobility and usage of data in advocacy.
With the current version in production we wanted to start gathering context to think about its future. We had some ideas in our mind but lots of people also came with others. Although we had a product vision of what the future could look like we didn’t have a clear strategy of what should be focused first. So I’ve planned a research to interview users and other specialists all around Brazil to understand in more depth their needs and also get feedback about the product.
Our main conclusions have been:
This will help us to plan the next steps, which I’ll update here as soon as we have news. :)