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
Duration: 4 Weeks
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.
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.
Once a year, Pinterest releases a data-driven insights documenting what their users are searching for in Travel. This document is released to the general public to help businesses find out where people are going and what they are looking for in a travel experience. Pinterest also uses these statistics to give brands recommendations on how to better cater to their audiences.
Below are some of the travel statistics for 2018 on Pinterest.
eco hotels (+125%)
small town destinations (+94%)
train travel (+136%)
bike tours (+142%)
photography workshop (+207%)
surf classes (+260%)
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:
Increased color contrast to make text more legible.
Strengthened text styles by bolding.
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.
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.
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.
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.
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.
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.
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.
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.