Mapping Place Pins

Click to start exploring

Foreword

Over the past year, we noticed more and more people were using Pinterest to plan trips and collect their favorite places around the world. We decided we wanted to make that process better through Place Pins, which let you add a map to any of your boards.

To help people learn more about how we work at Pinterest, we wanted to share the story behind Place Pins. Building a location-based product is a huge undertaking that can take many years to get right, and we wanted to make something that was beautiful, useful and different from other products right out of the gate. A small team of engineers and designers set out to figure out how we could accomplish this. We’re still planning to add lots more to the product, but we’re proud of what we’ve done so far.

— Michael Yamartino, Product Manager

Meet the Team

  • Image of Justin Edmund
    Justin Edmund Product Designer
  • Image of Sadia Latifi
    Sadia Latifi Writer
  • Image of Victor Ng
    Victor Ng Brand Designer
  • Image of Jon Parise
    Jon Parise Software Engineer
  • Image of Eric Rodenbeck
    Eric Rodenbeck CEO of Stamen Design
  • Image of Michael Yamartino
    Michael Yamartino Product Manager

(and many other awesome people!)

1
The Idea

Place Pins offer a major update to boards on Pinterest. Now, Pinners can get a map of all their Pins.
Place Pins offer a major update to boards on Pinterest. Now, Pinners can get a map of all their Pins.

Not long after I joined Pinterest, I learned that Ben, our CEO, had written a design proposal for something called Hometown Guides, where people could create boards about their hometowns. It sounded really exciting, and I had a good deal of experience building location-based products, so it was a great fit for my skills and interests. I thought there was a lot of opportunity to take the project in many different directions.

I worked on the original Rich Pins project,which is where we show extra details on the Pin close-up to make them more useful—like price, ingredients or author, depending on what kind of Pin they are. I thought moving into places was really interesting, and I was on the team when we started the project.

We wanted to create a tool that would let people plan trips, create local guides and map each of their interests, whether that’s food, art, or the outdoors.

Yeah, we wanted to inspire people to actually go to the places they’ve always wanted to visit. I think that knowing where to go and letting those places inspire you is a huge part of being able to take the leap from plan to action, which is what Pinterest’s about. I started thinking about what features would be really helpful for planning a trip, as well as what features would be useful once you got there.

2
Designing the Journey

Place Pins were unique in that we had the freedom to make something completely new. I needed an understanding of existing travel behaviors to form an opinion on how to make something more fun and engaging for Pinterest’s take. I used some design exercises like Design Play (à la For 100 of Our Closest Friends, Volume 2) and did some rudimentary research on how people think about travel.

At Pinterest, we think that high-fidelity sketching is a great way to quickly generate a lot of ideas without a lot of overhead.
At Pinterest, we think that high-fidelity sketching is a great way to quickly generate a lot of ideas without a lot of overhead.

After that, I started sketching. I made a point to sketch for a lot longer this time around, so I was off of Photoshop for at least two weeks. Sketching is a great way to quickly generate a lot of ideas at a decent fidelity without much overhead, and I use it as a tool for making lots of different directions really quickly.

Building a combined map-and-pins view presented a few challenges. Our default layout is based on an infinitely-scrolling grid of pins, and the Pinner is only looking at a small slice of those pins at any one time as the grid is scrolled.


Are Place Boards a type of board that a Pinner chooses to make, or is place an attribute of a board that can be toggled by the viewer?


I designed many ways of combining Pins and maps. Two versions trumped all: an ancestor of the design that shipped, and one that has both a “grid view” and “map view.” It's interesting because this was the first crossroads in the product that had technical implications as well: are Place Boards a type of board that a Pinner chooses to make, or is place an attribute of a board that can be toggled by the viewer?

Adding the map introduced a new spatial organization. Two Pins that are near one another on the map might be far apart in the grid, and vice-versa. Keeping the two parts of the interface synchronized meant being very thoughtful about how we designed and implemented scrolling, panning, and zooming. It was important that we also showed the relationship between Pins and their locations on the map in context.

On Web alone, Place Pins went down seven different directions. All in all, around 250 PSDs were created across all platforms.

At Pinterest, we believe getting feedback early and often leads to better products. Even before sketching, I'd make decks to present my ideas to the rest of the Product Design team to critique. I believe that there's a balance between feedback given and feedback implemented, especially with a v1 product. Oftentimes people really want a certain feature or a certain behavior simply because the sky is so blue, but you can't do everything at once. As a designer, you just have to try your hardest to find a compromise that works.

At one point, I realized I didn't know what I was talking about; I'm not a traveler and never went on vacations when I was a kid.

So, I booked a trip to Tokyo to visit my girlfriend during her internship. It was a genuine desire of mine to visit, and a good way to research the collaborative trip-planning process. I came back with a completely new view of what we should be doing and a renewed vigor to make a really amazing product.

I came on the project right before Justin left for Japan. One of the first things we talked about was how we didn’t want to mix metaphors. We talk a lot about Pinning to boards, and we wanted to keep that separate from the act of mapping a Pin. It was tricky. I tried to phrase it so that the map didn’t seem like a replacement for a board but an addition to a board.

An Omotesando restaurant called Eggs 'n Things specializing in pancakes consistently had a line that wrapped the block. Pancakes are extremely popular in Tokyo right now.
A view of Lake Ashi from a trail in Hakone, Japan. Hakone is a tiny hot springs town a few hours from metropolitan Tokyo.
A man taking a break from the arcade machines in Super Potato, a retro video game store in Akihabara.
Really delicious ramen from AFURI, a ramen chain in Tokyo. This bowl is from the Harajuku restaurant.

3
Building the Foundation

These kinds of large projects generally start with a requirements-gathering process. Once we have a good idea of what the feature needs to do, we can start making decisions about our technology. We look at our current software and think about how it would need to change to support the new feature. This is also the time when we start thinking about building new systems and incorporating external products and services.

We knew we were just launching a first version of the product, but it was still hard to narrow the feature set. We wanted to build it all. Featured: Engineer and High-Fiver Connor Montgomery
We knew we were just launching a first version of the product, but it was still hard to narrow the feature set. We wanted to build it all. Featured: Engineer and High-Fiver Connor Montgomery

Working with development is always really fun here. I think it's great to have everyone involved from the very beginning, and this project was no exception. A lot of our developers have really great product sense, so we often went back and forth talking about features that could be cool or useful.

The hardest part was focusing the core feature. We had a broad, long-term vision for where we wanted to take the product, and it was challenging to narrow down the shipping feature set for our first version.

The great thing about having both parties present is that we can gauge how well a feature fits into our overarching system as well as how much time and effort it will take to build it. Mocking things up really helps, because most things only take 10-20 minutes to visualize, and often that communicates the feature's value or even shows that it might not be as hard to build as anticipated.

Connor (engineer), Justin (product designer) and Sadia (writer) chat about copy for different user flows. Apparently, Sadia said something strange here.
Connor (engineer), Justin (product designer) and Sadia (writer) chat about copy for different user flows. Apparently, Sadia said something strange here.

At this point, I had a good sense of how the new Pin and board layouts would work, but we were still designing the way Pins would be added to the map. We knew that flow was going to be critically important to the success of the product, but until those details were locked down, we weren’t able to much make progress on the technical implementation. That was my biggest concern.

We started with our newly-launched Rich Pins system, giving partner sites from all over the internet a way to add rich place information to their content. That’s great for Pinners because Pins from sites like Airbnb, Booking.com, Citysearch, Foursquare, Hotels.com, OpenTable and UrbanSpoon will be placed on the map automatically.


It's challenging to anticipate exactly how a new feature is going to be used, and that's made even more difficult when you consider the incredible scale at which people interact with Pinterest.


But we also wanted to let Pinners add any of their other Pins to a map, too, so we needed to integrate with a database of places from all over the world. We evaluated a lot of approaches but ultimately chose Foursquare as our partner due to their extensive experience in the space. Knowing that other services like Instagram are also built on Foursquare was also encouraging.

It's challenging to anticipate exactly how a new feature is going to be used, and that's made even more difficult when you consider the incredible scale at which people interact with Pinterest. It's important to make engineering decisions that are flexible enough to adapt to a changing design while also being solid enough to provide Pinners with a great experience.

The flow of viewing a place board on mobile. We wanted to build an experience that could stand alone from the web version in terms of contextual utility.

4
Making it Pinterest-y

While the product was getting polished, the brand team had a brainstorm with PR and marketing around how to launch Place Pins. This was a blue sky brainstorm with some traditional ideas (product launch page) to the unconventional (strapping GoPro’s to feral cats). We were really trying to figure out what a Pinterest launch looked and sounded like.

Victor (brand designer) and Sadia (writing) talk through user education flows with Snuggies on.
Victor (brand designer) and Sadia (writing) talk through user education flows with Snuggies on.

We started with messaging. After some back and forth we decided to go with aspirational messages and not just focus on Place Pins as a travel product. Travel is obviously a huge part of it, but we wanted to help people realize they could use this new functionality to do more than just plan vacations—you could map out the best mac and cheese spots in your town, create a local guide, or whatever your interests are. We didn’t want to get too prescriptive about how to use the product right out of the gate.

I think our breakthrough came pretty early on the project. Product pages have become the norm for tech launches. These are typically river pages with screenshots and videos of the product but they’re not visited often. We wanted to take a more direct approach with our Pinners. Why show them what it will look like if they can try themselves right away? We made a decision early on to focus almost exclusively on a compelling, beautiful and highly contextual user education. It became very obvious that it was much more important to educate Pinners on the value and utility of the product.

I worked with Victor and Skip, another brand designer, and we started solidifying the messaging and user ed flows. We were iterating on copy and designs in a war room. We brainstormed in Snuggies once when the office was cold.

The product design team had been working on a set of design principles and assets that helped me iterate quickly on the user education. These assets make up our standard set of components, type styles, buttons and rules for in-product education. Because many of these rules have already been established, my work really centered around the strategy around when to show a full tour, a tooltip, a helper or any combination of these. In a way, it was kind of a stress test of this new system.

The final user education animation, featuring illustrations by Matt Stevens.

Having the Brand Design team do user education gave me extra time to focus on the product, and make sure that the education wasn't as much of an afterthought as it can sometimes be. Brand Design tends to inject a lot more of the Pinterest voice and feel into the product than might have happened if the Product Design team had done it, and for this launch especially, it helped Pinners understand that this was just another way to view Pinterest and not a completely different product.

As we were designing tours, I wanted to make sure that we were as clear as possible about how Place Pins worked. To get your Pins to show up on the map requires a bit of work on the part of the Pinner so it was super important to keep the tour simple and direct.

And it was important to have the launch visuals feel just as inspirational as the product. We worked closely with designer and illustrator Matt Stevens to craft an illustration style that we thought captured the feeling of exploration. The final set of illustrations took form in many ways from prominently being shown in the home feed to invitation postcards sent to the press and projections around our office for the launch event. We made time to build an elegant parallax animation complete with an easter egg when you hover over the hot air balloon. Skip even contributed some Foley art for the hot air balloon sound.

After we put together copy for the product, the in-product education and the messaging, it was also time to do a pass for voice. At Pinterest, it’s incredibly important to have a voice that sounds like us—clear, conversational, honest, warm and delightful. I knew the illustrations and easter eggs would take care of the delight factor, so I really just wanted to make sure all the copy was as clear as possible while keeping it warm and us.


At Pinterest, it’s incredibly important to have a voice that sounds like us—clear, conversational, honest, warm and delightful.


We then found out about three weeks before launch that everything had turned up a notch—we were going to throw a launch event November 20. The addition of press and Pinners at the event added a lot of pressure. Everything people saw and heard needed to spark their imaginations.

Launching any new feature always requires a high degree of coordination amongst our internal teams, but launching at a publicized event takes that to a whole new level. Both the actual product and our presentations needed to be polished and ready to go the night of the event, and you want everything to go smoothly with the launch after building up the excitement and anticipation.

I was dead-set on making custom maps, and it became more important when we decided to have an event. It's kind of the holy grail of designing a location product, and it’s easier than ever before with tools like MapBox and TileMill. Time wasn't really on my side, though, so as much as I wanted to learn as much as I could about cartographic design, there are times you realize you just aren't the right person for the job. This was one of those times, and that's okay. We decided to call in the experts: Stamen. They did a terrific job, and their map designs were stunning.

Stamen crafted a beautiful map style that helped us take Place Pins maps to the next level.

When we heard about Place Pins, we thought it was a fun way to engage Pinners and a smart use of behaviors that we see on Pinterest. But before that, it was probably a mental explosion of hearts and rainbows upon thinking of Pinterest Pins on a lovely, textured, paper-like web map.

The biggest challenge was the timeframe—we had two weeks to build a map that we’d normally need at least a month or so to build. There was also a design challenge in striking a balance between making a map that is both attractive and also demure enough to work as a backdrop for the most important content: people’s Place Pins. The use of texture and a handcrafted look and feel ultimately helped us to meet that challenge.

5
Preparing For Launch

We knew everything had to be ready by the launch event, and we were all just committed to making that happen without sacrificing any part of the product. Not even the hot air balloon.

The days before launch were sometimes grueling but still fun because the product kept looking better. That's Ben, our CEO, on the right checking in on us.
The days before launch were sometimes grueling but still fun because the product kept looking better. That's Ben, our CEO, on the right checking in on us.

The weeks leading up to launch were some of the most stressful in my life. At this point, I had been thinking about and looking at the product for almost six months, and I was frightened that it was boring. That is one of the scariest feelings you can have as a designer.

It was crunch time, and I was getting pretty excited! At this point, we had all of the pieces in place, and people within the company had already started building some amazing boards. We were focusing on bug fixes and polish tasks, and it was rewarding to see how even those small changes were making the product better every day.

After releasing the product internally, we got lots of feedback that the “Add a Place” flow was very difficult and unintuitive. I worked with Connor, one of our front-end engineers, and we rebuilt the whole thing in under 24 hours. What shipped still isn't perfect, and we still have improvements to it in the works, but it’s unbelievably better than what we had.

A peek into the user education for Place Pins on the Web, by brand designer Victor Ng.

It was a busy evening. We actually had all of the new code deployed and ready to go earlier in the day, but the entirely Place Pins feature was hidden behind a master switch that would be turned on later in the evening. We spent the hours before the event making sure everything was ready for the public launch, including testing the code and making sure all of the text and tutorials were just right.

I started the project writing copy in a Google doc to keep a canonical record but there were lots of last-minute needs for copy, especially around error states and other things we hadn’t thought about in the beginning. There were times I was just writing copy in emails and in Asana, or even just dictating to Justin, which is risky. I kept playing this video (note: colorful language) to keep me sane.

In the war room, we were playing lots of 90's songs that captured the frenzied atmosphere. No matter what, we were gonna ship this thing and it was gonna be friggin' awesome.

Late night inspirations.

Once we were close, I sent an email to all of translators explaining the product and giving them guidance so they could translate everything with as much upfront context as possible. Every last minute change was carefully thought through—when you change a line the day before, you threaten not having it translated in other languages at launch because of time constraints. I tried to be judicious.

We worked closely with the PR team to build out a presentation for the big reveal. It needed to not only show how the product worked but also the possibilities, the incredible engineering and design effort, and what a big freakin’ deal this was. It was no small feat with product changes happening up to 24 hours before Ben was suppose to take the stage. The first rehearsal of the presentation happened 6 hours before we were live. In those 6 hours, demos were re-recorded twice with some major changes in the narrative were made as we were testing the projection.

Our launch party featured a coaster-making station, postcards, delicious truffled onion dip and lots of hot air balloons.

The launch event was amazing, y’all! We created projections and had stations for people could send one of our custom print postcards or create their own map coaster. We really wanted to transport people.

Revealing the product to a crowd of Pinners was incredible. People actually cheered as Jon demoed the product. It felt really validating.

After seeing the looks on people's faces when we launched it at the event, all the anxieties I had melted away. That kind of saved me. Suddenly, I was really excited by the possibilities of everything. It was such a relief that I went home and worked for six hours straight.

Justin’s insane.

6
Looking Forward

Since our launch, Pinners have added millions of Place Pins to hundreds of thousands of boards with maps. People made fun, unique boards for their hometowns, their must-see spots and for all the other things they love. We’ve still got lots more to do to make Place Pins more awesome and useful, and we couldn’t be more excited to keep working on it in 2014. Interested in helping out? Join us!

— Michael Yamartino, Product Manager
Wish you were here! Apply to Pinterest's Creative team today! Morning Tide Postcard