Simplifying Collaboration on Pinterest
Mobile App Design
Allowing users to react to pins in a collaborative board to make collaborating more efficient.
Role: Product Designer
Timeline: October to December 2021
Team: This was a personal project but received weekly critique from other students
Introduction
Check out this pin!
Pinterest was my go-to for projects. Dorm room ideas? No problem. Cute fall outfits? We got you. My friends and I love using it for group project ideas, yet we use regular text message to discuss pins.
Pinterest allows users to send messages to other users and add pins to a collaborative board with other users. However, these features aren’t used much because users are unable to do more than just add a pin to the collaborative board.
I initially thought that users were just more comfortable with using iMessage or text message when communicating about anything, however that wasn’t just the case. So I did some digging.
User Research
Understanding Why Collaborative Boards Don't Work
My user research revealed that:
Users hardly ever used the integrated messaging in the app.
“I’ll text my friend to let them know that I added a pin to the board and to check it out.”
Users had to tell others which pin they added to the collaborative board.
“It’s not really clear who added the pin to the board.”
Make it more user-personalized
I discovered that users actually avoided using it because it didn’t give them enough features to make it easier to collaborate on than their own messaging app.
People want to be able to efficiently communicate inspiration ideas, but Pinterest does not provide enough collaboration tools for them to choose it over what they are comfortable with.
With this in mind, I got some friends and sticky notes and went to work.
Brainstorming
Figuring Out Which Feature to Implement
I recruited a few friends to help me brainstorm. After exploring many ideas, we decided on a few features:
Quick Reactions: How might we allow users to quickly express their feelings to a pin for others to see?
Identifying Users: How might we allow users to build familiarity with each other?
I explored these features further through low-fidelity drawings:
Feature 1: Quick Reactions
✅ Opportunity to build familiarity with other users
✅ Encourages user engagement
Feature 2: Identifying Users
✅ Feasible
❌ Low Impact
❌ Doesn’t encourage new interaction
Final Feature
After evaluating the pros and cons of each feature, I decided to continue with the Quick Reactions feature, since it would allow users to build familiarity with each other’s preferences while also receiving straightforward opinions on pins.
I continued to design the feature to increase user-collaboration friendliness but not stray away from Pinterest’s purpose: discovering ideas and finding inspiration.
Using my low-fidelity drawings as reference as to where the feature might be place, I mapped out an information hierarchy. I wanted the feature to have seamless integration into a user’s muscle-memory, while also emphasizing that it is a feature that is completely separate from the discovery of other pins.
Goals I had for the Quick Reactions feature included:
How can I make reacting a thoughtful and quick action?
How can I optimize the use of reactions for collaboration purposes?
Implementing Quick Reactions
The Market — How Other Products Show Reactions
I first investigated how other other products utilized reactions in various contexts. Reactions across different platforms served the same purpose — to react to something sent from another user.
iMessage — message reactions
Facebook — post reactions
Instagram DMs — message, post, and reel reactions
Medium Fidelity Explorations
Finding an Entry Point
I wanted to find an entry point that will be both familiar and easy to access. Given that the reaction feature is only for collaborative boards, the entry point would be a pin in a collaborative board. I explored different entry points for a single pin.
Each flow differed in their entry points, which was the main issue in designing the flow. I had to choose between brevity and familiarity, since option B and C compromises familiarity for one less step in access.
Although a long press and drag from option D could be counted as either one or two steps, I decided to go with it since it’s a familiar action to existing users of Pinterest. I also decided to include option E as another entry point so users don't need to exit out of their enlarged pin in order to react.
Visual Design
Designing the Entry Point Icon
Since the icon would be the user’s first exposure to the feature, it needed to be easily recognizable and fit Pinterest’s branding. I came up with three different options:
Option A: I thought a plus sign would fit Pinterest’s clean branding, however it was too vague in that it could mean adding anything to the pin, or additional options.
Option B: Since most keyboard emoji icons were faces, I believed a smiley face would fit as the icon. However, it was too vague, as it didn't immediately convey that the option would bring up quick reactions, and did not fit Pinterest’s branding.
Option C: Hearts are common in digital platforms such as Twitter and Instagram. Since its use in most social media platforms is to "like" a post, I chose the heart because it's a familiar icon that users can immediately recognize it as a reaction.
What Can I React With?
Reactions are a key part of Quick Reactions, and to implement them would require further user interviews.
I went with Option C: the heart reaction would be expressing like for a pin (like other platforms), and would be an easy reaction to choose to react to for a variety of pins. Because collaborative boards have varying themes and contexts, they may require different reactions. Thus, I added an option for users to choose an emoji from a popup array of emojis, which would give users more flexibility in their expression.
While iterating on reactions, I did not want to have an option for users to “dislike” a pin or a way to express any form of negativity on the platform, because Pinterest is a platform that brings everyone the inspiration to create a life they love. Thus, if users dislike a pin added to a board, they could simply not react.
Crafting the Visuals
Design System
I created UI Kit with Pinterest’s font sizes, icons, components, colors, and spacing. I created some of the icons in Figma for good practice. This made my high fidelity screens a lot easier to create and made me realize how important a design system is.
Final Interaction Flow
After conducting user testing with 5 users and revising based on feedback, I put together the Quick Reactions feature final interaction flow and prototype.
Prototype
Conclusion
Working with a group can be stressful, and there is no doubt that inefficacy contributes to it. Although skipping the collaboration process is impossible, making communication and expression easier can reduce this stress. This feature will allow users to efficiently express their feelings about ideas while also allowing them to build familiarity with each other.
Reflection
This was my first UX case study, and I am thankful to have learned about the design process through conducting my own. Through each step of the process, I have come to understand the value of each step to the final product, and am excited to see how I grow in the UX/product design world!
This is a case study project for the course Introduction to Digital Product Design. I am not affiliated with Pinterest.