Crafting Data-Driven Maps
Finding Our Way Forward

Overview

Whether you're visualizing millions of trips, watching events unfold in real time, or just curious what your city’s data looks like, we created a design system for crafting beautiful data-driven maps.

Team Department

Data Visualization Team

Team Members / Roles

  • Erik Klimczak - Creative Director
  • Jian Adornado - Design Lead
  • Launched

    Dec 2016

    The challenge

    With so many teams across the organization producing maps, we saw a need to create a framework for producing consistent, high-quality data-driven maps. We also needed the framework to scale up to the needs of 400+ cities around the world.

    One of the first things we did was take inventory of maps that had been created in the last year. Individually, each map is successful, but as a family they lack consistency. This was a core problem we needed to address.

    It was challenging to creating enough contrast between different elements that held up on a variety of screens and devices.

    We set out to bring consistency to all maps being created at Uber, and to elevate their overall quality. From a business perspective, we believe consistency is a core tenet of quality. Quality isn’t the easiest thing to tie back to a business metric, but it is tightly coupled with trust. We want drivers and riders, as well as policy makers and civic leaders to be able to trust implicitly in our maps and the data they bear.

    Our Process

    Our process was characterized by trial and error, and by stringing together an unlikely cast of tools to get the job done. Here are some key elements.

    01/03
    Dark Mode
    Light Mode

    Foundation

    A lot of our time was spent defining base map themes. We knew these themes would serve as the foundation for the entire project, so it was critical to get them right. We wanted to optimize these base maps for data visualization, so we focused on three main areas.

    Detail

    We fine-tuned the amount of detail you see at any given zoom level. We went with a relatively minimal approach so that the data wouldn’t compete with the base map.

    Color

    Starting with Uber’s brand colors, we produced various shades and tones for different map elements. For example, the dark theme was inspired by the Night Mode map used in our driver app.

    Typography

    We created a type system that leverages our brand typeface to pull it all together. In the spirit of consistency, we went with a relatively simple type ramp to reduce the amount of variation between our maps.

    01/03

    Data Layers

    Once we had a first cut of our base maps, we began adding data layers. Lucky for us, sourcing the data wasn’t hard. We used our internal systems to generate massive data files containing all the geo data we needed. With the data in hand, we started with our two most commonly used visualizations:

    Scatter plots

    Scatter plots show individual data points and are great for showing volume of activity in an organic way.

    Hex Bins

    Hex bins are great for showing density when there are many overlapping points.

    A Step Further

    At this point we were happy with the overall look we’d achieved, but creating a single map visualization was tedious. We needed a way to accelerate the process and scale it up.

    Trip Lines

    Trip lines are one of the signature visualizations shown in our CEO’s TED Talk, and featured in a variety of publications. The challenge is that the actual trip path is not baked into the raw data. It needs to be generated in code based on an array of latitude and longitude points. To aid our process, we built custom tools to quickly generate these visualizations for over 400 cities.

    01/03

    Choropleths

    Choropleth maps help visualize how a metric or value varies across a geographic area. For this case, we used US postal codes as our geographic boundaries and infused various datasets to create the color variation.

    Our Results

    Over the course of this project we produced hundreds of maps to fine-tune the details—colors, typography sizes, opacity, line thicknesses and many more. These guidelines were delivered in an internal framework that we share across teams for creating maps.

    Find the Perfect Fit

    We’re looking for talented creatives from all disciplines. Our team is focused on creating beautiful, functional designs that fit people’s lives. We’d love for you to join us.

    Want to get updates on Uber design news?

    Follow:

    Group

    © 2017 Uber Technologies Inc.