Case study: wireframing a “happy path” on Pinterest

A minimalistic design for a never ending visual discovery.

Should you want to create a mood board to share with your coworkers, get inspiration for your wedding or simply unwind after a long day, you can do it in a few clicks thanks to Pinterest. Its users vary from creative industries’ professionals to DIY amateurs in quest of new ideas. “Pin” after “Pin” you are building “boards” organised into a collection to keep your projects neat and tidy. Pinterest’s simplistic use, basic design patterns and essential features (mainly search and save) make the user experience seamless across the different galeries and carousels displayed. Add an infinite scroll to this and you are good to spend hours on it without feeling too “overwhelmed”.

User flow
Let’s study what a user would typically do during the pinning (saving) process on Pinterest. I broke it down into 6 steps.

A Pinterest user on its happy path to pin.

UI inventory
Having a look at the UI inventory helps to understand the design system of an app. Pinterest’s one is pretty straight forward and minimal: smart for a search app which generates so many kinds of content of different formats, sizes and colours.

*Note that Pinterest has its own typeface: “Pinterest Sans” but “Inter” does the trick for a mockup.

Wireframe

From Pinterest’s original interface to mid fi wireframes — When browsing, the images sizes are aleatory.

Here are the mid fi wireframes following our user’s “happy path” as described earlier.

This is what it looks like put in a basic prototype (it screams:try me)

I guess you know where to find me now. See ya.