Pinterest

I’d love to start exploring more onboarding experiences for different apps. Onboarding and user activation is an incredibly nuanced and challenging problem for designers, and it’s an ever-evolving process to understand and improve the experience for people new to a product. I really appreciate what Pinterest does – both on their app and website – with their new user experience.

The focus here is entirely on benefits, not features. They don’t talk about pins, sharing, social media, et cetera. No – they talk about how people are using the app to solve real challenges or problems in their lives. The panning images here, accompanied by the simple value statements, make for a compelling (and intriguing) experience.

I’m biased towards apps that don’t hesitate to break away from default iOS design patterns, yet still retain usability and clarity. Here, Pinterest’s search filters add a nice touch that separates themselves from the standard iOS toggles.

After exploring the app for some time, you start to notice the subtle things that make the product so enjoyable to use. Subtle transitions, entrances and the use of fading elements helps create this incredibly smooth experience for users. There’s not too many instances of sudden, static state changes that I was able to find anywhere in the app.

My hat goes off to anyone willing to try something different from the default iOS7 loading indicator. Here, Pinterest goes with something simple and clear – nothing too wild or out of the ordinary – but it adds a nice touch and polish that goes a long way for building a memorable product.

This recording is a bit jumpy – sorry about that. I wanted to highlight the tooltip here as general nod towards Pinterest’s clean visual style and clear instructions to guide new users around different parts of the app.

The second part of this design detail is so easy to overlook; I missed it myself a few times. Keep an eye here on the follower count as I follow this board. The text springs to life, using motion to help me understand the context of my actions.

Plants!

Scrolling + blurring image backgrounds aren’t really new anymore – although they still provide a really slick experience for users. What I wanted to really focus on here was what happens as you get past the header here – notice the way the text ‘Plants’ bounces into place. The fluidity here is amazing – it would have been so easy to have that text just…appear. But the motion here adds life and depth to the app that I think people out there will appreciate.

Even when I start to scroll back up, the text bounces and scales away into the distance. Nice touch!

This recording emphasizes the overall smoothness that users experience when browsing around the app. Every transition is carefully planned and designed. I love the way the main view blurs and scales back into the distance whenever a new modal-view appears. Slick.

When you like a photo, the heart bounces to life.

These are the kinds of details that are so easy to overlook and brush aside, yet for me, they are the details that add the most life and character to an app. Knowing that the designers and developers out there care about these small details means a lot to me as a consumer.

It takes a keen eye here to spot the subtle tilt of a pin as it fades in and out of view. The transition is so small, and happens so fast – and I can’t get enough of it! The tilt of the cards and the way the new one swings in from the bottom adds depth and tangibility to the photos – these are the kinds of details that matter.

Bouncy! Pulling down on a pin takes you back to the main board. Everything is super springy and the transitions here are quite smooth.

Tap and hold a pin to bring up these quick actions – bubbly, playful little icons that let you quickly interact with content or share photos with friends. The physics here are remarkable – there’s a certain resistance and “magnetism” that the icons have with your touch. If you haven’t tried this in person, I’d highly recommend it!

The consistency here is great whenever you quick-pin an item. The modal slides into view while the background blurs and scales into the distance. Super clean.

When you quick-like a photo, check out the little heart that bubbles on top of the photo – a subtle confirmation that the user’s action was completed successfully.

Oh my, this one is good. Unliking an item here works as expected, but the icon changes to a broken heart. For some reason this small change adds a lot of emotional charge to the un-liking action – I have a hunch that in user testing this actually resulted in fewer folks un-liking a post…but that’s just a guess!

Sending a photo gives us the same slick transitions and blurs that we’ve come to expect in the Pinterest ecosystem. It’s also worth paying attention to the little black confirmation bubble at the bottom of the screen once the message has been sent.

If you add a custom message to a shared pin, the textarea has a really slick expansion – I love the way it pushes the title bar to the top of the screen, filling the space and removing all distraction.

Adding content from the tab bar here is so slick – the plus icon rotates to an x, giving users a quick way to close out and cancel. I’m not sure about the usability of this design pattern, but man it looks good! As always, I appreciate the transition of the icons into view, using scale and color to bring attention to the key actions on the screen.

As the final detail in this post, I wanted to highlight some of the subtle brilliance nested on the Pinterest homepage. The background, slowly scrolling through rows of photos, is tied directly to the headline and value prop. I grabbed a view videos here to show some of the different contexts that are used – planning a trip, planting a garden, going for a run – I can only dream about data the designers here were able to play with to end up with this landing page design style.