Project Overview
Enabling area highlighting for Pinterest user
Overview
- Feature addition
- Desktop & mobile
- Image annotation
Problem Statement
The lack of image highlighting on Pinterest limits the ability of users to label and communicate effectively, hindering the full potential of the platform as a visual inspiration browsing and curation tool.
Goal
Enhance communication accuracy, reduce communication costs, and improve workflow efficiency and productivity on Pinterest.
Solution
Design the image annotation feature on desktop to allow high-precision, easy-sharing, and powerful search capabilities.
Impact
A survey of 14 weekly active Pinterest users revealed:
86%
in Net Promoter Score
36%
willing to pay $5/mo for the feature
pain point
Limited ability to focus on specific image areas
Pain Point
Inability to comment on specific image areas
Pain Point
Difficulty in drawing attention to comments
Pain Point
Unable to search for pins based on comments
Goal
Enhance communication accuracy and reduce communication costs
Goal
Enhance communication accuracy and reduce communication costs
Goal
Improve workflow efficiency
Goal
Increase productivity
Solution
Enable image area highlighting
Solution
Enable image area commenting
Solution
Facilitate comment sharing via DM
Solution
Enable comment-based search functionality
zoom_in_map
Coalesced Solution
Empowering image annotation feature with high precision, easy sharing and effective search capabilities
chevron_right
*Disclaimer: This study is an independent initiative and the designer is not affiliated with Pinterest. The screens used in the case study are designed based on Pinterest assets as of December 2021.
Research & Ideate
Empowering Pinterest users with the right pro feature
Why pro features?
Pinterest excels in product discovery with 61% of users turning to it for visual inspiration for new project. Pinterest's task-driven nature means constant feature enhancement is crucial to increase its utility and benefit its business in two scenarios:
- Better utility results in increased content creation and user engagement.
- Pinterest's current business model is predicated on ads. An alternative revenue source can be generated through offering premium features to pro users who are less receptive to ads and willing to pay for productivity improvements.
Narrowing down the feature to work on
Five self-identified Pinterest power users were interviewed to gain insight into their usage patterns and willingness to pay for pro features. Results from the interviews informed the creation of a survey to expand the sample pool. Two key findings emerged:
Dispensable
Many people view Pinterest as replaceable and consider alternatives such as Google, TikTok, Behance, and Dribbble as feasible options for visual inspiration.
Most wanted features
- integration with third-party tools
- image annotation
- built-in moodboard generator & improved organization system for saved pins (tied in importance)
In order to maintain its competitive advantage, Pinterest must provide more value, which is challenging in the field of visual inspiration as it relies heavily on user-generated content. Pinterest can enhance its offering as a productivity tool and introduce new pro features.
The highest requested feature is integration with other productivity tools, however, there is a risk of copyright infringement. Improving the pin organization system is not within the scope of the current project. While the moodboard generator is popular among casual users, it is not as well received by professionals. This leaves image annotation, which is the second most sought-after feature and offers ample opportunities for user experience exploration.
The highest requested feature is integration with other productivity tools, however, there is a risk of copyright infringement. Improving the pin organization system is not within the scope of the current project. While the moodboard generator is popular among casual users, it is not as well received by professionals. This leaves image annotation, which is the second most sought-after feature and offers ample opportunities for user experience exploration.
Benchmarking
I conducted a survey of other products that offer image annotation functionality and grouped their features according to complexity to identify best practices and a suitable blend of feature sets.
Persona & User Story
I searched for the user group that would benefit the most from image annotation. Freelancers, who use Pinterest to communicate and share visual concepts with clients, are highly motivated to avoid misunderstandings and miscommunications. I also included a secondary persona of the client in the Freelancer's user story. Freelancers primarily use desktop computers to create annotations, while clients are more likely to view annotations on mobile devices.
Site flow
Creating a visual representation of the basic flow of image annotation helped me to consider each step of the user journey.
Design
Think more, show less
As it is not necessary to visually reinvent the wheel of an established product, I bypassed the wireframe stage and progressed directly from sketches to a high-fidelity prototype.
Here is what a typical image annotation user flow looks like:
Here is what a typical image annotation user flow looks like:
Julia, an interior designer, wants to clarify with her client Melissa which pillow in this pinned image they discussed in a previous conversation.
→
When Julia hovers her mouse over the pin, she is presented with an onboarding screen explaining Comment Mode.
→
Julia follows the instruction and clicks the comment button.
→
The onboarding screen disappears and Julia selects the pillow she believes Melissa was referring to in their earlier conversation.
↓
Julia clicks on the export icon and a message window is displayed with a pre-filled message.
←
Julia now wants to inform Melissa of the new comment through a Pinterest message. She clicks on the avatar and a window appears.
←
After hitting the "Post" button, Julia is presented with a confirmation screen.
←
A comment window pops up for Julia to type in her question.
↓
Julia fills in the recipient's name and clicks the "Send" button.
→
The sent message is displayed in the message window on the right side.
→
Melissa receives notifications from Pinterest on her mobile phone.
→
Melissa reads Julia's new message in the Pinterest app.
↓
Clicking on the new comment opens the comment card in full view.
←
After clicking the link in the message, Melissa arrives at the new comment with the highlight.
I would like to emphasize two challenges encountered during this phase:
unarchive
Design peripheral screens influcned by image annotation
blur_off
Minimize visual distractions and reduce clutter
Think beyond the main screen
I dedicated time to designing the peripheral screens impacted by image annotation. The updated board page showcases a high-level view of pins, including the number of annotations and commenter avatars on each pin, allowing users to easily locate annotated pins at the board level.
The addition of comment-based search functionality has greatly improved the user experience, making it easier for users to find annotated pins they are looking for by searching for specific keywords within the comments or annotations.
Moreover, the inclusion of annotations/comments in the notification section allows users to view all annotations/comments across different pins in one central location.
Reduce Clutter
Pinterest uses image recognition to identify and label objects in images, helping users explore related items. However, it also adds visual clutter when hovering over the image and competes for screen space and attention with image annotations.
Existing Pinterest UI (left: no hover; right: image hover).
I introduced a dedicated button for image annotation when hovering over a pin. This design allows users to switch between viewing and annotation mode. The annotation mode removes existing category links and provides a clean canvas for image annotation, avoiding accidental comment creation.
Image annotation UI (left: view mode; right: annotation mode)
Iteration
Identifying usability flaws through reverse engineering
Small-scale testing revealed usability issues, which were addressed in three iterations, resulting in improved scores from the 20s to almost 100 without requiring a major overhaul.
Iterative testing with small groups (5 testers except for first round with 13) allowed for quick iteration and in-depth analysis of each participant's interaction history. This approach revealed two key usability improvements:
help_center
Use of onboarding screens to familiarize user with new feature
menu
Use of a primary menu for important features
When onboarding is necessary
The first issue identified is with activation of annotation mode, likely due to the button being overlooked or mistaken as part of the original UI. An onboarding process was added to direct user attention to the new feature.
It is unreasonable to expect users to notice and understand a new "comment" button without a prompt (left: existing UI upon hover; right: comment button added)
Initial onboarding design required pressing spacebar to exit. This extra step was intended to prevent skipping the onboarding screen due to accidental double-clicking, but it caused confusion with the instruction "click here."
Onboarding - adding annotation v1 (top: onboarding screen; middle: after spacebar press; bottom: after clicking "comment" button)
Changes in v2 of the onboarding design:
- Removal of the spacebar press to exit
- Direct activation of annotation mode after onboarding
- Removal of underline style to avoid confusion with hyperlinks
- Use of background blur in onboarding screens to draw more attention to the text
Onboarding - adding annotation v2 (top: onboarding screen; bottom: after clicking "comment" button)
The introduction of onboarding screens dramatically improved usability with 100% success rate and 0% bounce rate.
Usability score of adding image annotation provided by Maze
(top: no onboarding screen; bottom: with onboarding v2)
(top: no onboarding screen; bottom: with onboarding v2)
The value of primary menu
Another task with low completion rate was forwarding a comment through Pinterest's messaging system. In the first design, both link to this comment and message features were located in the secondary menu (meatball icon), behind the existing features of Highlight, Edit and Delete.
v1 design of Link to this comment and Message features
User feedback revealed two issues with the design:
- Users either didn't check the secondary menu or lost attention after the first three options.
- The feature title "Share in message" was also confusing.
To address these issues, the following changes were made:
- Move the message feature from the secondary menu to a primary icon next to the reply icon, using the export icon open_in_new instead of "share in message".
- Combine the link and message features into one, with Link being a child feature of message with a dedicated button.
v2 design of Link to this comment and Message features
The result of this change was a dramatic improvement in task success rate, which rose from 15% to a full 100%, and a significant increase in usability score, which went from 25 to 90.
Usability score of sending comment via message
(top: v1; bottom: v2)
(top: v1; bottom: v2)
Postmortem
Test small and often
Project Summary
The project goal was to introduce image annotation as a new feature on Pinterest. The final design features a seamless UI with clear onboarding process and well-thought-out peripheral features, allowing the full potential of the feature to be realized.
Success Matrix
By iteratively identifying and fixing major flaws and evaluating user feedback, I was able to attain:
>90%
in usability score
87%
in Net Promoter Score
Lesson learned
Through this project, I discovered the value of conducting multiple small-scale usability tests that yield rich data, without the need for more than 5 users per test.
Future Direction
As mentioned in the research section, there are a few new features worth exploring to enhance Pinterest's utility, and I think building a native moodboard generator is a great way to attract casual users.
View More Work
