Patterns & Flows with Pinterest

Whitley Pollet
NYC Design
Published in
4 min readNov 5, 2018

Patterns and Flows are extremely important to the UX design process and today I am excited to dive into how Pinterest utilizes both to create a simple yet rewarding user experience.

I mean, not to brag, but I was on Pinterest when it was invite-only (read: nerd alert.)

Tom Haverford dusting his shoulder off

It has been interesting to see how it’s changed throughout the years. The overall patterns and flows within the site have not changed drastically, but with each redesign, they’ve made incremental improvements that still allow users to use the website without having to relearn everything.

As a student of UX, this shows how important it is to identify the best patterns and flows in the beginning. It’s helpful for users when you can make improvements without a complete overhaul that causes them to re-learn how to use the site.

Let’s jump right in with a few of the key patterns that Pinterest uses to create a great user experience:

Every Pin is presented in the same format with the image, a brief description, and a button with additional options.

Pinterest Pin Example

Hovering over am image also gives the user the ability to save the Pin to a board of their own.

The actual functionality of the hover state has changed over the years, in early years there was a focus on “Loving” the Pin to save it to a Favorites section within your profile. This was in addition to the Save feature.

As Pinterest focused in on its user goals, it took that functionality away. This puts the focus on saving items to a Board. Eventually, they made the “Add to a Board” feature easier to use by suggesting the board that it will be added to.

Pinterest Pin Example — Hover State

To view more information for a Pin that is interesting to the user, the image must be clicked on and the images are shown in a larger size on top of the screen with the ability to save the Pin, information about the account that saved this Pin, and comments for the Pin.

A user must learn the pattern to receive more information for the Pin, but once learned it is simple to do.

View Pin Details Example

These three patterns help users quickly learn how to use the site and make for a reliable user experience.

The streamlined process for the main user flows within Pinterest shows how hard the UX team has obviously worked to understand their users. I went through a user flow to show how simple it is for a user to find a recipe that they Pinned previously, but can’t remember the name of to the Pin.

Let’s take a look at that now:

Alright, are you still with me? While that looks like a lot of steps, an experienced Pinterest user can get through them rather quickly. I actually can show you how I complete these steps in 17 seconds thanks to the user flows and patterns in place.

Pinterest User Flow Example

As a new user, this flow would take longer on their first attempt, but once it has been done once, It is easy for them to replicate. The learnability of this website and app is clearly well thought out.

I know as a budding UX designer, taking a good look at Pinterest’s pattern and user flows has been inspiring for me. I would love to hear from you! What are your favorite websites to use? I would like to take a look and see if I can identify their main patterns and user flows.

--

--

Whitley Pollet
NYC Design

Hi, my friends call me Whit. Here are a few of my favorite things: UX Design, 🌱 food, Crossfit, photography, & minimalism.