Justin O'Beirne

Justin O'Beirne of San Francisco, California. Essays, projects, and contact information.

Content-Driven Design vs. Brand-Driven Design

Which map’s text is easier to read?

The left one? Or the right one?

If you’re like me, you probably think the left map is easier to read.

That’s because the map on the left tends to have better contrast. Its background is lighter and its text is darker, making it more legible than the map on the right.


This is a little trick I do whenever I evaluate a new design. The maps above were designed in color – but I’ve since made them grayscale to assess their contrast.

Given how often maps are used outdoors in bright sunlight (especially in cars), it’s crucial that they have good contrast so that they’re easy to read. (Insufficient contrast is one of the top mobile map complaints.)


*   *   *


Maps are the centerpiece of today’s ride-hailing apps – and it’s been that way since the very beginning. They’re used for marking and confirming pickup spots, visualizing driver locations, and monitoring trip progress. They’re even used for receipts.

Given how essential maps are for coordinating riders and drivers, it seems to be only a matter of time before ride-hailing firms start optimizing and enhancing their maps – and perhaps even begin developing maps of their own.

And we’ve certainly seen moves in this direction. Companies like Uber have acquired mapping firms, scooped up mapping engineers from AppleGoogle, and Tesla, and licensed data from TomTomDigitalGlobeFoursquare, and others.

So when will Uber, Lyft, and others start shipping maps of their own?

We’ve seen Yahoo! Maps, Google Maps, and Apple Maps.

What will Uber Maps be like?


*   *   *

The first test of redesigns: It should be immediately obvious which is before and which is after.

Let’s return to our maps from earlier.

One of the them is actually a redesigned version of the other.

Can you guess which one?

If I were seeing these maps for the first time, I would guess that the left map was the redesigned map (because its contrast has been improved).


I mentioned earlier that the two maps are actually color maps that I had turned grayscale.

So let’s revert them to their original look:

Now which map do you think is the redesigned version?

I’d still guess the left map. Even in color, it continues to have better contrast (and therefore better legibility) than the other one.

But the left map also has other improvements. For instance, the place labels are no longer all the same color: restaurants are orange, shops are blue, parks are green. So if I’m looking for, say, a restaurant, I can focus on just the orange labels, ignoring the rest. The color-coding makes the left map easier to scan – and I don’t have to read each label like I do on the other map.

But that’s not all. Notice that there’s also more information on the left map: buildings with businesses inside are colored orange. So even though there’s not enough space on the map to give every business a label, we still know where all the businesses are. It’s super helpful.

So my guess as to which map is the redesigned map would be the left map. It’s easier to read and scan, and it has more information than the other map. And if I had to quickly figure out where I was, it seems like it would be easier on the left map.

And that’s something else, isn’t it?

If I had to characterize the maps, I might say that the right map is muted and subtle, while the left map is obvious and clear:

If a map is a way of communicating, should that communication be muted and subtle? Or obvious and clear?


*   *   *


What would Uber Maps look like?

You’ve actually been looking at it for most of this essay.

The map on the right is Uber’s new map. It’s a redesigned version of Google Maps that Uber recently started using. The map on the left, meanwhile, is the default version of Google Maps—it’s the map that Lyft currently uses, and it’s the map that Uber used to use:

Here’s how the new map looks in Uber’s app:

The new map is part of a larger design change to Uber’s rider app:


*   *   *


If Uber is still using Google Maps, what explains the map’s new look? In other words, why has its appearance been so dramatically altered?


Perhaps one reason for the change was to make it easier to see the little cars that move across the map. (I.e., the more subtle, muted map makes the cars easier to see.)

But I’m not convinced.

Uber’s arch-rival, Lyft, uses the same map that Uber used to use, and I’ve never had a problem seeing the pin or the moving cars in Lyft’s app:

Nor have I ever heard anyone complain that it was difficult to see the pin or the cars in Uber’s old app:

Another possibility for why the map was changed is that the map itself isn’t particularly important for riders. After all, the rider isn’t navigating (the driver is)—and all that’s needed for a pickup is a user’s current GPS location or an address. So who cares about the map and its legibility?

But there are problems with this.

Many of Uber’s largest markets are dense cities like New York and San Francisco—cities where tall buildings often interfere with GPS signals. Using Uber in both of these cities, my GPS location has sometimes been off by more than a block—forcing me to manually mark my pick up spot.

Moreover, it’s also not uncommon for people to request rides on behalf of others—so a user’s GPS location can’t always be relied upon as the actual pick up spot.

What’s more, users often don’t know the address of where they’re requesting a pickup. If a user’s GPS location is inaccurate and they also don’t know (or can’t see) the address, marking a spot on the map is really the only option they have. So there are a number of scenarios where a map (and being able to find your place on it) is still necessary.


But perhaps the most likely and convincing reason why the map was changed was to more closely align it with Uber’s corporate brand. Notice that the map’s colors (the blues, the greens, the teals, and the grays) are very similar—if not identical—to the colors on Uber’s website.

Take another look at the map:

And now take a look at screenshots from Uber’s website:

Look at how similar the colors are between the two:

I don’t think it’s a coincidence. Rather, it appears that the map has been re-styled to match Uber’s corporate colors.

But was this a solution in search of a problem? After all, when was the last time you heard one of Uber’s customers complain that the map colors didn’t match the brand colors?

And though Uber gets a map that better matches its brand, what do its customers gain? How do they benefit? Could it even be that they’re worse off than before?

In more closely aligning its map to its brand, Uber has inadvertently regressed its usability. And compared to Lyft, Uber’s users are being offered an inferior version of Google Maps—one that’s arguably less informative and harder to read:

If you offer your customers a map, shouldn’t it be the best map you can offer?

🏠 Home  ·  ✍️ Essays
Copyright © 2010–2017 Justin O’Beirne