Dawei Huang
May 1 · 9 min read

How Uber Movement Uses Color to Explore Travel Time

Comparing Travel Times

Every day, 4 billion people move through the world’s cities: an increasing, ever-changing flow of more than half the global population. Understanding how we move — and how those movements change across time — is crucial to improving our cities, the environment, and billions of lives.

We created Uber Movement to help increase that understanding.

Uber is available in over 700 cities worldwide. These trips create data points that are essential to improving our services and has the potential to help urban planners and others striving to make their cities better. Uber Movement allows you to use data in a variety of ways: you can look at the average duration of trips at one time on one date, view the average duration of trips from a set area across a range of dates, or compare two different trip times from the same area.

Fig 1. Travel time from downtown Washington, D.C.

Fig 1. This set of screenshots shows the average travel time from downtown Washington, D.C. to other areas in the city while some rail transportation was suspended for repair on Mar 16, 2016.

In Fig 1, (a) shows the average travel time during PM rush hour during the rail shutdown. (b) shows the average travel time during PM rush hour for the two weeks prior. © shows the comparison of (a) and (b) to indicate the huge impact of a rail shutdown to surface traffic. For example, in the case above, the average travel times increased 67.8% from zone of 1400 K St NE to zone of 1500 Kearny St NE during PM rush hour.

Whether you’re a public transit agency determining where a new bus route should go or a city agency identifying when required road improvements or maintenance is required on a crucial city artery, it’s helpful for planners to know when traffic will be least affected by a lane reduction and which alternate routes should be proposed to motorists.

Seeing is believing

But for any of this data to actually be useful, it has to be usable. That’s where data visualization comes in. As a product designer working on Uber Movement, one of my most important roles is to make sure that we are sharing the data in the clearest, most accessible manner possible.

An interesting problem we faced was how to show two different but related visualizations. A duration heatmap shows how long, in minutes, trips took from any single starting point, either at a certain time of day on a particular date (e.g. the morning of Monday, January 11, 2016) or as an average across a range of days spanning as much as several months (e.g. weekday mornings from March-May 2016). The duration heatmap uses a sequential color scale, a sliding scale of hues from light to dark within the same color (e.g. light blue to dark blue, as in Fig 1).

A comparison heatmap allows the user to compare two different instances (or averages) of travel times from the same set point. Here the salient information is comparative: in which instance or an average of instances were trips from this starting point faster or slower, and by how much? For the comparison heatmap, we used a diverging color scale (Fig. 2), representing data diverging from zero, from “more negative” (i.e. faster), to “more positive” (slower). A difference value of zero would indicate that travel times were the same in both instances. For a comparison heatmap, we want to use two contrasting hues to make the difference as clear as possible.

Our users often use these tools in quick succession, switching back and forth frequently. We have to make it easy to visually distinguish between the two modes.

Fig 2. 5-step sequential color scale

Fig 2. In early designs, 5-step sequential color scale (from light green to blue) was used to represent travel time duration and 5-step diverging color scale (from green to light yellow to red) to represent a comparison between 2 occurrences.

Early attempts using the 5-step color scales of Fig 2 to visualize the duration and comparison heatmaps (see Fig 3) failed usability tests for low color readability. Multiple issues were identified:

  • As we use color to represent travel time from Point A to Point B, each “Point B” map zone was colorized by a color from the color scale with an offset of the time duration and with 20% transparency. It was then added on top of the map. This design presented a ‘gradient effect’ from the center to the edges with very low contrast between adjacent zones, making them look ‘muddy’ with very low readability of the data represented in color and the map labels underneath it.
  • As a result, the 5-step color scales were not enough to show sufficient contrast from the center to the edges.
  • In addition, the 5-step color scales were insufficient to represent time durations across different cities, from 0 to 30 minutes, and to 1.5 hours, making the colors less effective in telling the travel time.

As a result, our test participants had difficulty in telling the travel times from the duration heatmap, particularly when zooming in to the downtown area, and differentiating the duration heatmap from the comparison heatmap (see Fig 3).

Fig 3. Travel Time in Seattle

Fig 3. Early design of average travel time from Seattle downtown to the other areas using a 5-step sequential color scale heatmap. (a) shows an overview of the travel times of the entire Seattle area where colors laying on top of the map shows a ‘muddy’ effect. (b) shows a zoom-in view to the downtown area where colors for adjacent zones were too subtle to differentiate.

Design Explorations

Taking a multi-step process and experimental approach, I broke down this complex design problem into smaller design challenges, ran experiments on various solutions, and derived a color system to reach high readability of the heatmaps.

1. Sampling sequential and diverging colors to clearly differentiate duration and comparison heatmaps

As both sequential and diverging color scales were used together, these colors have to be a tetradic color set with sequential color scale clearly distinguishable from the diverging color scale. I used Uber Movement’s brand primary color (#2473BD) as a base for the sequential colors. I then used Paletton.com to sample a couple of sets of the tetradic color scheme — four colors arranged into two complementary pairs.

Fig 4. Colors sampled for experimentation

2. Increasing the number of steps for color scales with equal or varying time intervals

Early designs started with 5-step color scales (see Fig 2–3) created “muddy gradient effects” for both duration and comparison heatmaps. We wanted a system that would be useful for cities of varying sizes, where the average travel time from the city center to outer regions could range anywhere from under 30 minutes to over 1.5 hours.. Using only 5 colors to represent 0 to 1.5 hours wouldn’t help our users clearly identify time ranges on the map.

As an experiment, I tried increasing the number of color-scale steps from 5 to 9, 11 and 13, with either equal or varying time intervals, with the varying intervals increasing after a set amount of time, in this case, 30 minutes.

Table 1. Experiment conditions of color scale steps and equal and variant intervals

Why variant intervals? From our conversations with urban planners, we learned that they conduce transportation modeling based on travel analysis zones, which zones were typically structured by population density. Downtown zones are much denser and smaller than suburbs. In the downtown area, 5 minutes intervals are more useful in defining transit stops for a much higher population density than that found in the suburbs.

Color scales were then computed using the Chroma.js helper. Variations of color samples were used to form a sense of sequence for both sequential and diverging color scales (See Fig 5). Monochrome colors were used for candidate set 1. For candidate set 2, a mix of color hues were used in order to increase the contrast ratio among color pairs.

Fig 5. Color samples with 9-, 11- and 13-step for sequential color scales

3. Removing gradient effect and measuring contrast ratios

I built these color sets into a test environment to try out different colors. To remove the gradient effect, discrete color values from color scales were used without being offset by the time value and transparency (see images on the right of Fig 6). Regions falling in the same color-scale intervals merged, presenting a clear grouping of travel times and clearer differentiation across groups.

Figure 6. Comparison of coloring methods for early and latest designs.

Early coloring method colorized each zone using a color from the color scale with an offset of the duration value and a 20% transparency, presenting a ‘gradient effect’ that colors for adjacent zones were close to each other, making it hard for users to read the value from the color. The new method uses a color from the color scale without transparency and time offset, merging the zones in the same time range and making it easier to read by clear bands of colors.

I also developed a program to compute the contrast ratio of adjacent color pairs (see Table 2). The 9-step color-scale in candidate 2 sets yielded the best contrast ratio, with the 11-step scale coming in second. Considering the average travel time duration varying significantly across cities, the 11-step scale in candidate set 2 showed optimal scalability and readability. When compared with early design attempts, the average contrast ratio gained by 30% for the 11 steps in candidate 2 set (see Table 2).

Table 2. Contrast ratios for adjacent colors

From the table above, colors in candidate 2 presented a higher contrast ratio than those in candidate 1. Within candidate 2 colors, few steps presented higher contrast ratios.

4. Comparing colors in the experiment environment

Based on the above results, I eliminated candidate set 1 from consideration. Candidate 2 colors and equal and variant time intervals were applied in the test environment for visual inspection.

Fig 7. Comparison of average travel time heatmaps between equal time interval and variant time interval by 9, 11, 13 steps for greater Boston area.

Fig 7 showed a comparison of heatmaps for the large Boston area. Let’s see how the colors play out when zoom-in to the Boston downtown areas.

Fig 8. Comparison of average travel time heatmaps between equal time interval and variant time interval by 9, 11, 13 steps for downtown Boston areas.

Fig 8 further confirmed that variant time intervals presented even higher contrast ratios for the downtown areas.

5. Fine-tuning the color-scales

After working with the experimental heatmaps, the combination of candidate color set 2 with an 11-step scale was judged to be the ultimate best fit, performing best for larger duration coverage and higher contrast ratios for both city overviews and zoom-in downtown areas.

The experiments were reviewed and tested with internal teams. The final color scales (see Fig 1) was finally identified, tuned and deployed in a recent release.

As more and more users explore their cities through Uber Movement, we continue to learn and improve, working to make our data as useful as possible.

Useful is beautiful

Ultimately, the goal of data visualization is communication. When we communicate true things clearly, the aesthetics of our creations are not incidental but intrinsic to the value of those creations. Aesthetic beauty is not a value added after the fact, a window dressing or accessory. When data visualization is done well, it is beautiful because it is useful.

In small ways, with lots of trial and error and experimentation along the way, we work to show people their own world from a new perspective in a way that is useful. Which is to say, in a way that is beautiful.

To read more stories about Uber Movement, go here.

Special thanks to Christopher Starr, Mark Brouillette, Jordan Gilbertson, Michael Lu, Chelsea Kohler, George Zhang, Jessica Grodzki, and Charlie Waite for helping make this happen!

Uber Design

We are passionate about the pursuit of ideas that put people first. Work with us: uber.com/design. Follow us on Twitter: @DesigningUber.

Dawei Huang

Written by

Uber Design

We are passionate about the pursuit of ideas that put people first. Work with us: uber.com/design. Follow us on Twitter: @DesigningUber.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade