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
Duration: 4 Weeks
Opportunity
Travel Category on Pinterest
According to the Global Travel Industry Intelligence, travel is one of the most popular categories on Pinterest. People use Pinterest to dream, plan and research their vacations. They take advantage of the product’s constantly growing catalog of travel ideas and use them as a point of reference right up until departure as well as during the trip itself.
““Out of 2,000 Pinterest users, Deep Focus Intelligence Group found that 3/5 Pinterest users use the platform to help them plan their travels.””
““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.””
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.””
Design Intent
Product Design at Pinterest
At the start of this project, we began by examining the context of product design at Pinterest from an outside designer’s point of view. This meant looking at their engineering and design forums, taking screenshots, and actually using the app to see what kinds of systems we needed. Below are some of the things the team had in mind going into this project.
1. Align with Brand Mission: Our project strategy matches Pinterest’s company mission: to help people discover and do things they love. Our team didn’t propose Bookable Pins just for the sake of developing technology. Instead, we approached this project firstly with a purpose to the brand — to support Pinterest’s mission. Bookable Pins is our aligned interpretation of where the brand could be in the future.
““The mission of the company is to help you discover things you love, and then try to go out and do them in real life.””
2. Pinterest is Complex: According to the CTO of Pinterest Vanja Josifovski, every type of Pin is fundamentally different from each other. Realizing this allowed us to have sufficient freedom in supplementing Pinterest’s existing interaction patterns with industry best practices. This ultimately helped us deliberately design and implement features with a deep understanding of the tradeoffs.
3. Design for Growth: As Pinterest grows its global user base, new products and systems must be geared towards achieving a long-term growth. This is why we have begun to set guidelines for Bookable Pins. For example, building from scratch a new type of booking pin and checkout process different from buyable pins that are scalable and adheres to no particular brand.
““There has been a gain of about 50 million users between 2017 and 2018. Out of those new users, 80% are from outside of the U.S.”
”
4. Reducing Cognitive Overhead: There are many other apps that do similar things; it’s likely the user has been exposed to these before. Therefore, it’s hard to justify making dramatic departures from “norms”. I performed a thorough competitor audit of industry leaders such as Booking.com and Expedia to help me figure out how they formatted their information hierarchy.
Visual Design
Hierarchy and Colours
During the project, Pinterest had updated the visual design of the app. I took screenshots of the new update and compared it with the old version; analyzing their visual design guidelines as much as I could. Below are some of the things I took away from this study.
Increased color contrast to make the 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 colors throughout the experience. In some areas, I adapted those colors by changing the opacity to represent background colors. I did this to bring more visibility to areas that we want the users to notice. As for text, it made sense to me to that Pinterest had bolded more UI elements. Therefore, I have done the same.
Prototype
Tagging Keywords Through Search
It was important to figure out how Bookable Pins would live on Pinterest. We approached discoverability of the feature by implementing it naturally into the search results which is what Pinterest already does with recipe pins. Once users click on the refine tab, they are met with a set of controls that will help narrow further narrow down results.
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 tabs 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.
Concluding Thoughts
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.
Reflections
My favourite part of this project process was digging through Pinterest’s engineering page on Medium. It really propelled my workflow in understanding interaction patterns, visual design and on a whole, what teams at Pinterest were building and testing. Especially when introducing a new feature, being able to recognize if it aligns with brand values, user needs, and even the interaction patterns and design system was critical in determining if the solution made sense, provided value, and belonged within the app.
I also enjoyed working together with a team of researchers, designers, and copywriters. The best part about working in multidisciplinary teams for me was bouncing ideas between myself and my teammates and together, in the end, building something that we were all proud of. That’s something that I believe is pretty rewarding and I think it is unique.