Today marks the launch of Google Treasure Maps (and my first appearance/voice-over in a Google video!). Anyone who has been following me for a while knows my love for process and the importance I place on sketching out projects prior to making them. With that in mind, I thought this would be a good opportunity to gloss over the process of redesigning Google Maps.
When we set out to make Google Treasure Maps, I sat down and sketched out a multitude of ways to handle things like terrain tiles, landmarks, and borders.
Once these ideas had solidified a bit, I began experimenting in the computer with different color schemes, textures and aesthetic approaches; ranging from 100% vector to 100% hand drawn, and hybrids that were a mix of both approaches. Here are a few examples.
After deciding on the 3rd direction pictured, I sketched out a world map.
I then scanned this map and spruced it up a bit, which simultaneously helped to pitch the idea and give us some idea of what to shoot for during the next month of actually building the map. Some ideas, such as the map’s border, were abandoned during production because of technical constraints and/or a lack of resources.
Next up, I split the map up into four different zoom ranges and decided how much information would be displayed at each zoom level. Below, you can see basic black shapes at the outermost level; slightly more detailed terrain, state lines and city icons at the next level; roads and landmarks at the next; very detailed terrain, road markers, and landmarks at the closest zoom. Again, various elements and features were cut over the course of production and we eventually settled on three levels of detail as opposed to four.
Once the zoom level detail was decided upon, I drew each type of terrain, later scanning it in and modifying it to work in the map. People far smarter than I then figured out how to place the terrain on the map without revealing the clear borders between each land type.
Last year, we replaced Google Map’s Pegman with an 8-bit hero. While I toyed with a few ideas, I eventually settled on the idea of a spyglass; I liked the idea of contextualizing Street View by using a pirate’s viewing device. I also remade the UI in red to introduce a little color into an otherwise brown map and to make sure an old compass was always present.
The Street View team really brought the spyglass idea home by doing this:
Now that the look and feel of the map was settled upon, I designed a handful of landmarks that served as a guide to other googlers that were kind enough to contribute their time to the project. I believe that we ended up with 175+ landmarks, only 20 of which were designed by myself.
Finally, we began troubleshooting and embellishing the map with more details that would serve to make the map interesting for everyone, regardless of whether they were merely glancing at it, or spending more time discovering its secrets.
In the end, building this map from the ground up was a great exercise in designing with constraints, picking and choosing your battles, not being afraid to scrap ideas you like and coordinating a large team toward a single vision. It’s a cheesy adage, but I hope everyone else enjoys Google Treasure Maps as much as I enjoyed making it.
