A new take on the camera functionality in the Pinterest mobile app.
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 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. That’s how I ended up rethinking the camera functionality on the Pinterest iOS app.
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.
A screen recording of the current flow
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.
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.
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:
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.
1. In the camera, the shape of the "lens" doesn't match the shape of the output image.
2. There are two overlapping user stories: “view related” and "save pin”.
3. After taking the photo, there is a delightful animation, but it is not clear what is happening.
4. The "tags" that are generated are not clear.
5. A website url cannot be added to the pin that is being saved. To save the pin, users select or create a board.
6. The board creation in the flow only allows for adding a name and a privacy setting.
7. There is no final state that shows you’ve completed the process.
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.
With these pain points and constraints in mind, I sketched out some ideas that could solve the overarching problem of clarity.
Below are the redesign decisions I made to the camera flow.
Pain Point #1: In the camera, the shape of the "lens" doesn't match the shape of the output image
Pain Point #2: 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.
Pain point #3: Prematurely saving a pin; Not understanding the purpose of the animation.
Pain Point #4: 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.
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
- Allowing for browsing of one tag at a time
- Adding a "+" button when adding a tag
Pain point #5: Inability to add a website to the pin; Accidentally saving the pin by tapping on a board.
Pain Point #6: Limited ability to create a board within the pin creation flow.
Pain Point #7: No clear indication that the pin-saving flow has ended.
A demo of the confirmation micro-interaction
- 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!
- 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.
I hope that these redesign decisions improve clarity in the Pinterest app, help people find inspiration through existing pins, and lead them to create pins of their own!