Thanks for coming.

Today we're going to talk about the process of redesigning

Google Maps.

My name's Jonah.

I've been working as a designer at Google for seven years now.

ANNETTE LEONG: Hello everyone.

My name is Annette.

I'm also a designer on Google Maps.

I've been at Google for 2 and 1/2 years.

In the new Maps I designed the overall framework

and image browsing experience.

JONAH JONES: And I led the overall redesign.

So Google Maps was launched back in 2005.

And this time last year, we announced the new Google Maps.

And this was the biggest redesign we'd ever done.

Over the last year we've made a ton of changes.

We had a long preview period.

And now this is the new default experience for Maps.

So there are some pretty major changes that have taken place.

The map is now dynamic and full screen

and it adapts to every single one of your clicks.

And the imagery is also fully immersive in 3D.

But as you can imagine, redesigning a product used

by a billion people is quite a daunting task.

And we wanted to share a little bit of insight

into what our process was, so that you can design

your apps to be ready for a billion users as well.

And we thought about what this entailed.

And we realized that it basically

boils down to three key lessons.

The first is to think big.

So that you don't get trapped incrementalism.

The second is to question everything,

because sometimes your assumptions

can be holding you back.

And the third lesson is to listen to your users,

because even if you think big and question everything,

you're not going to be right about everything.

So let's jump into the first lesson, which is to think big.

We started with an audacious goal,

which is that we wanted to redefine expectations

of online maps.

And if you look at what we had with the previous maps,

we'd added so many features over the years

that the old user interface was starting

to get really, really cluttered.

And every new feature we added was

making it harder to find that new feature

and the old features too.

We'd added thousands of businesses.

We'd added thousands of miles of Street View.

And we'd also added further ways of transport,

so it's not just about driving.

It can be about walking or public transit.

On a technology side as well, Ajax

was the big innovation back in 2005

that let people smoothly scroll and zoom the map.

But nowadays, there are more recent technologies

like HTML5 and WebGL that let people do vector graphics

directly within a web browser.

And consumer expectations had changed too.

The arrival of mobile had brought new paradigms

for touch-based user interfaces.

But even more fundamentally than that,

we felt the existing mapping products were basically

just taking this old scanned map and sprinkling

a few pins on top and adding a search box at the top.

And we thought surely we can do better

with dynamic digital maps.

So we went back to the drawing board.

And we thought how would Maps be if we reinvented it today,

using all of the great data that we have as a foundation

and everything that we've learned over those last seven

years.

And we came up with this vision that we

called "The Future of Maps."

And we created this short video that we

shipped around the company.

And this was really, really good to get people

on the same page about where our vision was,

and where we were headed, and where our big thinking was

going.

And actually it's quite interesting.

Looking at this video, there's a lot of the concepts

that we had there made it through into the final product.

So here you see we have a beautiful new set

of rich dynamic bright map tiles.

And this is Lausanne in Switzerland.

And what happens now is we click on a transit station.

And suddenly the map shifts.

And dynamically becomes all about the transit network.

Later in the video we do a search.

And now we can see that the search results

are the primary focused thing.

And they're labeled too.

And then toward the end of the video, we zoom in further.

And amongst all of the regular points of interest,

we see the places that I've been to, and I've rated.

And the places that my friends have been to and rated as well.

So this is a map built for you.

Over to Annette.

ANNETTE LEONG: While the concept video focused on the map tiles,

it was a challenge to come up with a framework that

could really support and highlight the maps itself.

And yet be fully functional and easy to use.

We wanted to think big.

We wanted to be able to explore quickly and capture

all possibilities.

And wireframes and sketches were great for that.

We made hundreds of wireframes and sketches

to generate ideas and to [INAUDIBLE]

and also lay out variations.

This method let us go broad.

Then, from a subset of these wireframes and sketches,

we went steep.

We started filling in with the right typography, colors,

and visual elements to create higher fidelity marks.

The look and feel of the product started

to really come together.

As we generated more and more of these marks,

it can be hard to keep track of what's the latest version.

It's like an engineer constantly asked you

where can I find the latest file?

So we needed a better way to organize them.

As you may know, when engineers want

to show progress of their latest code,

they create a build to test how well the code in the biggest

system.

So we did the same for design.

We created a design build, where we put in all the latest

designs from individual designers into a single place.

To keep things simple and easy to digest,

we focused on a few key scenarios.

Like finding a restaurant, getting directions,

and browsing imagery.

This let the designers, PMs, engineers, and everyone

in the company to see where we were headed.

JONAH JONES: So it's really important to think big.

But if you want to think big, you

have to be willing to question everything.

So you could argue if it ain't broke, don't fix it.

This seems fairly reasonable.

But it turns out this isn't really

the case with technology.

As you saw before, adding more and more features

meant that we couldn't stay still anymore.

But also the world is changing.

So by staying still, you're basically moving backward.

So I want to give you a couple of examples

of where we were questioning things as we were redesigning

different parts of the system.

And the first is around the map tiles themselves.

So this is how the map tiles used to look,

when you were looking at a world view.

And you can see here that we've got

some countries and some states and obviously the land

masses and stuff.

But we realized that actually this

isn't answering all the questions

that our users might have.

Like why are people going to a map at this zoom level?

Well first of all, you can't really

differentiate between the cities and the states in the US there.

You can't really see where the mountains are.

You can't see where the forests are, and where the deserts are.

This map isn't really doing everything that it needs to.

So when we did the redesign, we answered all these questions.

Now you can clearly see the difference

between countries and states.

We've got elevation data, so that you

can see where the mountain ranges are.

And we have vegetation data too, so you

can see the lush green areas and the more barren orange areas.

And plus also, we used a new brighter, more vibrant color

palette, so this feels much more on brand

than how it did before.

The same is true at deeper zoom levels, too.

This is the map of how San Francisco used to look.

And you can see here our heritage, that basically we

just used to be a road map.

But that's really all you can see here.

But even the roads, they're kind of overwhelming.

They're really, really fat.

And this orange highlight color and the yellow

is being used way too much and not sparingly enough.

And you also can't see all of the other information

that people care about at this zoom level.

You can't see the neighborhoods.

You can't see public transit.

You can't see where the parks are.

So we really want to redesign this, too.

So this new design answers all of the questions

that people need to know about from a city level too.

You can still see the road hierarchy very clearly,

but it's cleaner.

You can now see the neighborhoods too.

You can see the businesses, the points of interest.

You can see the transit information.

You can see all of this stuff.

Now another example is around this concept

of a map of a place.

So let's imagine that tomorrow after I/O

we're all going to go for a picnic.

And we're going to meet in the Pullens Gardens.

And I share this map with you.

Now on first glance, this map looks fairly reasonable.

But if you look closer, this really

isn't the best map that I could have given you.

So for a start, there's a ton of labels on here

that you really don't need to know about.

And some of the labels you wish were there are missing.

So if you look at the Pullens Gardens in the middle,

you can see Penton Place bordering it.

But you can't see the names of those other two streets.

So surely we can do better than this.

So we took inspiration from the kind of map

that you might draw on the back of a napkin,

if you were telling your friend how to get to this place.

In that kind of map, people will only

show the most important information.

You can see here that all we're doing

is we're highlighting the major roads that are landmarks

and the roads that are nearby and bordering this place.

These are the roads that you need to know about

to get to this place, and the other ones

are much less important.

We even developed a pretty snazzy algorithm

to approximate this kind of data,

where we look at anonymized logs of all of the directions

that anyone has ever got to this place.

And we look at the most popular ones.

And if you're interested on how this works,

we get a Tech Talk last year at I/O that's available online,

that goes into more depth.

But so here we go.

We've got these roads.

We've got the ones that are important.

But now we have to decide how we're

going to render these on the map.

So the first idea we tried was we

thought, OK, let's take these important roads.