Cristiano Dalbem

CicloMapa

An open platform to democratize access to bike maps of brazilian cities, combining the open collaborativity OpenStreetMap with web technologies and easy-to-use design.
8 min read

Challenge

Democratizing the access to bike maps of brazilian cities with open data.

Roles

Design, Front-end, Product Management

Team

Cristiano Dalbem, Bernardo Serra (ITDP), Felipe Alves (UCB).

Date

June 2019 – Now
See it live

Overview

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.

320+
brazilian cities
900+
users / month
300,000+
pageviews total

Understanding the problem

Kick off

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:

  • The lack of centralized, standardized and updated bike maps of brazilian cities.
  • OpenStreetMap contributors found disencouraging that there wasn’t good applications that reuse its data.
  • Contributing to OSM demands some technical knowledge, and there isn’t good documentation written in Portuguese.

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.

Research

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.

layers
Documenting how the data would be modeled and the information would be shown to the users, including: labels, textual descriptions and visual representations of data. I find spreadsheets to be a very powerful prototyping tool that is often overlooked by designers.

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.

bench
Benchmark research looking for similar digital tools as well as official bike maps from cities around the world.

Our main insights were:

  • Solutions based on OSM are very technical and hard to understand and operate, and none had clear instructions about the collaborative dimension and how to contribute with the mapping.
  • Bike maps rarely explain their terminologies which are not very friendly to the broad public.
  • When multiple typologies are these are often colored in rather random ways, producing a final result that is not only unappealing but, most importantly, confusing and overwhelming.
  • Almost none of them were responsive and accessible via smartphones.
  • Several local maps had interesting features but couldn’t be easily reused for other cities.
roadmap
Prioritizing the features we wanted to develop next.

Prototyping

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!

Figma interactive prototype

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.

Implementing

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.

To build the UI I chose Ant Design, which has super high quality React components and have great documentation. All styling was done on TailwindCSS, an amazing CSS framework.

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.

Visual design

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.

final
Final version of the UI and map style, now with a present brand.

A nice little interaction detail are the tooltips on the layers filters. They help educate the user of what each layer type is about.

Promoting

I was also responsible for designing social media posts that would highlight the different features. These included posts in Instagram, Facebook, Linkedin, Twitter, etc.

We were glad with the organic coverage from different media channels, mainly with Mobilize and ArchDaily which are big portals specialized on mobility.

Results

320+
brazilian cities
900+
users / month
300,000+
pageviews total

Links

Prototyped in Figma and handcrafted in React and Gatsby.js.
Fonts by Pangram and Google Fonts.