Published on | Prototyping: From UX to Front End — Medium Andres Arbelaez

Overview

I decided to complete a redesign project because I wanted to challenge myself. It’s one thing to design in a bubble where there are no design specs or established user stories and another thing to design according to the established actions and designs of a platform. Redesigning is an exercise in staying true to the product, yet trying to improve the user experience.

I’m also really interested in the KPCB Design Fellows program and they’ve historically asked applicants to redesign a specific feature of one of their portfolio companies. This is how I ended up rethinking the camera functionality on the Pinterest iOS app.

Initial Thoughts

I chose Pinterest out of KPCB’s impressive portfolio because I was familiar enough with their product to understand its basic use cases, but I had only used the web platform a few times and I had never even looked at their iOS app. This created a unique opportunity for me to assume the persona of a naive first-time Pinterest user, and make design decisions accordingly.

After downloading the app, some things that immediately stood out to me were its imaged-centric aesthetic, seamless animations, and a navigation experience heavily reliant on native actions such as swipes and scrolls. One aspect of the app that I did not really understand, however, was the flow after tapping on the camera icon.

It seemed to allow me to create a new pin but there were some other actions intertwined within the flow. This feature felt out-of-place when compared to the overall experience on the app, and left me itching to dive into it more.

Focus Feature

Because of this, I chose the camera pin-creation/browsing feature as the focus for my redesign.From a product perspective, this feature is important in maintaining a healthy ecosystem for Pinterest, where users feel like they can contribute meaningfully to the platform just as easily as they can browse endlessly.

User Feedback

After narrowing down the scope of the redesign, I asked some of my friends to play around with the flow and verbalize their thoughts as they went through it. To get a feel for some of the frustrations in the Pinterest camera flow, here are some noteworthy quotes from the sessions:

“I don’t know what’s going on here but I’m just gonna wait until something happens.”

“Am I done?”

“Why is my picture a square now when it was a circle before?”

“Whoops…I did not mean to save that yet.”

The Problem

With this user feedback, I decided to focus on clarity as it pertains to the app’s camera feature. It was evident that this flow had some cool and useful functionality, but it was not being portrayed in a way that made sense to the end user. This caused the user to end up frustrated and consider giving up on the process altogether.

Pain Points

In order to be systematic in my approach to the redesign, I made a list of the pain points that were uncovered:

In the camera, the shape of the “lens” doesn’t match the shape of the output image.

There are two overlapping user stories: “view related” and “save pin”.

After taking the photo, there is a delightful animation, but it is not clear what is happening.

Imagine this screen, but with those bubbles frolicking around. Now imagine that animation looping endlessly without any indication that anything is happening. Yeah.

The “tags” that are generated are not clear.

Why does tapping on the tag show me similar pins? Are they all immediately active or inactive and do I have to select them? Do these tags go towards the pin-saving process?

There is no final state that shows you’ve completed the process.

The button at the bottom of this screen is the closest thing to a confirmation screen

A website url cannot be added to the pin that is being saved.

The only field that can be added in the pin-saving process is a description

Constraints

Since I am not a well-versed Pinterest user/Pinterester(?) or someone on the Pinterest team who’s aware of the market demands and data-driven decisions of their product, I didn’t want to add any new features to the app or make assumptions about its functionality.

I would just be making changes to clarify the existing product.

The Process

With these pain points and constraints in mind, I sketched out some ideas that could solve the overarching problem of clarity.

Ideation

Implementation

Below are the redesign decisions I made to the camera flow.

Major Pain Point: Unclear behavior after taking a picture

To solve this pain point, I decided to create a fork in the logic of the camera flow. An intermediate screen forces the user to decide if they want to view similar pins according to tags, or go ahead and create a new pin of their own. By using a navigation stack with a “back” button, the user can always go back to this intermediate screen and complete the opposite flow.

A closer look at the intermediate screen

Major Pain Point: Confusion in browsing and adding tags

I saw that there was something fundamentally wrong with the interaction design of the “view similar pins” user story. For instance, the persistence of the “save pin” button in the top right implies that the selection of tags will go into the saved pin. This is not the case. Also, the tags can be selected and deselected in any order and in any combination, each time returning a slightly different grid of results.

A refresher on what the browsing screen looks likeThe tag-adding screen is confusing because it implies that you suggest a tag and then tap “save”

In order to alleviate these problems, I fired up Origami to play around with the the interactions, making sure to maintaining the consistent “Pinterest-y” experience of clean and subtle animations. My redesign decisions included:

Removing the fastidious save button
Adding a “+” button when adding a tag
Allowing for browsing of one tag at a time

<a href="https://medium.com/media/4525c6b2052f38c64b4d13c567d71e48/href">https://medium.com/media/4525c6b2052f38c64b4d13c567d71e48/href</a>

Below, a breakdown of smaller changes to specific screens. To the left is the current screen, and to the right is my proposed redesign.

Pain Point: In the camera, the shape of the “lens” doesn’t match the shape of the output image

Pain points: Prematurely saving a pin; Not understanding the purpose of the animation.

Pain points: Inability to add a website to the pin; Accidentally saving the pin by tapping on a board.

Pain Point: Limited ability to create a board within the pin creation flow.

Pain Point: No clear indication that the pin-saving flow has ended.

Conclusion

I hope that these redesign decisions improve clarity in the Pinterest app and help people find inspiration through existing pins, and lead them to feel compelled to create pins of their own!

Learnings

English is hard. In a medium where text needs to be concise, informative, and clear, Content Strategists really have their work cut out for them.
It’s easy to be a critic. It’s much harder to come up with a better solution without worsening other aspects of the product.
Pinterest is not just for girls. Before this exercise, my primary interaction with Pinterest had been my girlfriend showing me hundreds of dorm room decor ideas, but I found that the platform is amazing at helping people find things they’re interested in. I even ended up pinning a dope rock climbing workout!

Pinterest Redesign was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pinterest Redesign

Cool stuff, every week

More Articles