Click in Cover.png
 

Overview

Pinterest Bookable Pins

Leveraging Pinterest's constantly growing travel category, Bookable Pins is a new feature which will allow travel inspired users to seamlessly book accommodations directly over Pinterest.

As the team's interaction designer, I was in charge of creating high fidelity mockups, implementing features and setting a visual design style.

 
 

Team Members: Derek Tam, Aron Chen, Anya Valueva, Zhanna Krupinina, Tavan Sohi

Role: Interaction Designer

Type: Academic Case Study

Tools: Sketch, Flinto

 
 
 

Opportunity

Travel Category on Pinterest

Travel is one of Pinterest’s most popular content categories. Though the number of travel-related Pins is high, travelers aren’t only saving “pin-spiration” photos to fantasize about trips they might one day take––they’re actually using these Pins to help plan and book trips, to make decisions right before departure and as a point of reference during the trip itself.

 
 
“As of February 2017, there were 3 billion travel-related Pins on the platform. A quarter of all travelers who plan travel online use Pinterest for this purpose.
— Global Travel Industry Intelligence (2017)
 
 
 

Precedent Study

Buyable Pins

Pinterest introduced Buyable Pins in June 2015, allowing users to start buying items directly from the pinning site. Currently, Pinterest has 10 million items for sale on its site from retailers like Kate Spade and Nordstrom.

Around 80% of users access Pinterest through a mobile device, which, because of their small screen size, make it inconvenient to click through to another site to complete a transaction.
— Ben Silbermann, CEO of Pinterest (2015)
Bitmap.png
 
 

Visual Design Audit

Inclusive Product Design

I wanted to treat this as close to a real product as possible, going deep into Pinterest's design language, I found out that they had just updated elements of their UI to better accommodate users who are visually impaired.

While it is important to meet accessibility standards, I believe that this also works in favor of getting design and engineering teams to start thinking about inclusive development. I took screenshots of Pinterest's app and analyzed their visual design guidelines as much as I could.

Some things I noticed included:

  1. Increased color contrast to make text more legible.
  2. Strengthened text styles by bolding.
  3. Put emphasis on key actions through highlighting and gray-scaling UI elements.

For Bookable Pins, I used primarily the original brand colours throughout the experience. In some areas, I adapted those colours by changing the opacity to 10% to represent background colours. I did this to bring more visibility to areas that we want the users to notice.

 
 
 
 
 
 

Prototype

Tagging Keywords Through Search

It was important to figure out how Bookable Pins would live on Pinterest. Just like how we can filter pins based on ingredients in recipes, Bookable Pins would filter some basic travel booking details to help users get started.

Discovery: The "Refine" button would only appear when select keywords are searched normally. This way, we can surface the feature but not take away what Pinterest is as a product.

 
 
 

Prototype

Filtering out Bookable Pins

There are a lot of pins on Pinterest, we can narrow down some options for potential travellers and provide them with highly relevant information. Below are some of my design decisions for filters.

Focusing Results: The results screen already does not have much room for contextual information. By moving information such as price under "Refined", users are reassured that results are within the parameters that they set.

Visual Design: Here is the first area where I could apply some of Pinterest's new design guidelines. My intent here is to rely on strong type sizing and bolding to create a meaningful hierarchy so that information makes sense at a glance. 

Furthermore, I wanted to only use colours to create focus indicators that are straightforward and obvious for all pinners regardless of ones' level of ability. Combining this with a majority grey scale UI increases clarity as to what options users have.

 
 
 

Prototype

New Layout For Listings

One of the challenges to implementing a booking platform onto Pinterest is the difficulty to present dense information on one screen. Below, are the design decisions that helped me get where I ended up.

Multi-Room Support: Hotels usually have multiple types of rooms that they offer. I wanted to group these rooms together to help businesses gain more visibility on the platform.

Room Feature Chunking: I also carried over the idea of side scrolling to help save vertical space when listing room features. By doing this, we can also categorize amenities into chunks to lower cognitive overhead.

Availability Check: There are many factors to consider when booking a place to stay. I combined available dates, price breakdowns, into one visual section. This gives the opportunity for people to find out about price fluctuations so that they get the best rate.

 
 
 

Prototype

Building Trust Through Meaningful Reviews

Implementing a booking feature on Pinterest means that I needed to rebuild reviews. Even for Pinterest, a lot of trust is required when people are handing over large sums of money and potentially travelling across the globe to pursue something they found. Some efforts I took to facilitate trust include:

Verified Reviews: Same has how we are able to see who has tried ideas found on Pinterest in real life. We can label comments with a "Verified" tag as well as the time they stayed with with the particular brand.

Review Guidelines: Support transparency on how grade points are to be given out can give people more specifics on what to expect.

Image Support: Currently, comments and photos from people who have tried ideas on Pinterest are two different sections. Now, reviewers can pair images with their text review to provide better context on their experience.

 
 
 

Prototype

Simplifying the Booking Flow

Booking a place to stay requires a lot more information from users than looking up recipes or buying a jacket on Pinterest. For the booking flow, I wanted to spread out the information as much as I could to lower cognitive overhead. Below are some of the design decisions that helped me achieve just that.

Autofill Information: I analyzed Pinterest's signup flow for new users and much of the information that is used there can be autofilled into guest details. This significantly reduces the amount of information needed to be inputed.

Form Splitting: I simplified the booking process further by spreading out required user data. Information about time of check-in, check-out, number of guests and rooms was collected earlier in "The Listing" and "Refine" prototypes. This significantly shortens the actual booking flow creating a streamlined experience.

Post Booking: Finally to complete the experience, users are encouraged to create planning boards if they haven't done so already. This is one way we can naturally engage and direct users back into the platform.

 
 
 

Value

Just Another Booking Platform? No.

On the surface, this may seem like just another accommodations service. But I see it differently. The platform can provide and guide people through transformational experiences that could change the way they see the world. Pinterest is more than just sharing recipes, it’s a powerful tool to inform, entice and inspire.

“The mission of the company is to help you discover things and then try to go out and do them in real life.”
— Ben Silbermann, CEO of Pinterest (2018)
 
 

Reflection

Thinking About Pinterest's Entire Ecosystem

There were a couple of ideas that I wanted to explore that didn't make it to this iteration. One of which was "Lens Search" where Pinterest would utilize robust artificial intelligence and machine learning algorithms to search through users' camera. I believe it would be interesting to take a look at how this can effect a service like Bookable Pins on the physical front.