Project Overview

Background

Pinterest is a popular app for saving ideas as "pins" to boards. However, with recent updates, the mobile version's user flow for saving a pin has seen a marked drop in efficiency while entirely missing out on the visceral experience of pinning things to a board.

So as part of my larger pursuit of developing a UX practise that harnesses emotional design, I set out to discover a more engaging and emotionally-driven interaction pattern for Pinterest.

For a closer look at the framework itself, here is an article.

The Problem

Pinterest fails to adequately capture the visceral and emotional aspects of its core metaphor, i.e., pinning content to a board.

The resulting user flow can feel a bit slow and unintuitive.‍‍

The Approach

I decided to employ an unconventional framework that places emphasis on user emotions and overall product aesthetics.

This framework, hailing from game design is a popular tool used to analyze game mechanics. However, we have attempted to use it here in a more generative context. This also had to be informed by some preliminary research that consisted of heuristic evaluations and uncovering user motivations. Finally, some quick user testing was employed to assess emotional impact.

Preliminary Research
Heuristic Evaluation
Guerilla Interviews
Market Research

MDA Framework
Product Voice / Aesthetic
Task Decomposition and User Flow
UI Design and Microinteractions

User Testing
Satisfactions Survey
Attitudinal Responses
A/B Testing‍‍

The Results

• New interactions reduce choice overload by 88%. This ensures that core interactions are quick and require less cognitive load.

• An average of 38.33% increase in time efficieny observed. This average combines both ideated flows for the new pinning interaction.

100% of test participants exclaimed with delight on trying the new interaction pattern for the first time!

Preliminary Research

Issues and Challenges

A survey of the apps customer reviews confirms some of our suspicions regading the current interaction design. The most recent changes to the mobile user flow does have some glaring usability issues.

It was clear that these issues needed to be addressed given the overwhelming community feedback.

Here are the major issues identified:
‍

A short user flow for the current way of saving a pin to a board. The flow is depicting by a red line running through the user interactions needed across 3 screens.

‍3-Step Process‍

The apps primary user flow which allows a user to save a pin to a board of their choice too cumbersome, with user having to navigate 3 different screens.
‍

‍Visual Overload

The intermediate screen is extermely cluttered. While the Save button is highlighted, the volume of information can be difficult to parse.

The intermediate screen is filled with text of various sizes and weghts, inconcistent icons and UI patterns.

The an intermediate screen for a pin with a tall aspect ratio. A red line denotes an extra swipe interaction the user needs to perform to reach the save button.

‍Inconsistent Interaction

Given the different sizes and aspect rations of each pin, the user may have to scroll down to access the Save pin, adding an extra user interaction.

Understanding User Goals

In 2022, Pinterest boasted the highest American Consumer Satisfaction score (beating out YouTube, Instagram and Twitter), with 85% of users leveraging the platform for project inititation.

So it was crucial to begin by understanding how users engaged with Pinterest and outline their core needs and behaviors.
‍
For this I conducted 4 guerilla interviews which consisted of direct observation of participants using the app followed by a list of semi-structured questions. This helped uncover two distinct user groups based on the patterns of exploration they employed to discover content on Pinterest:

#1
Search Based Exploration
‍
•   Use app to search for pins for a specific board
•    Refine queries over time to find better results
•    Rapidly add pins to single board
‍

#2
Browse Based Exploration
‍
•   Use app leisurely to evaluate pin suggestion
•    Rely on algorithm to suggest pins for boards made so far
•    Easy access to a variety of boards
‍

Design Process

A Multidisciplinary Approach

The Mechanics-Dyanamics-Aesthetics model provides us perfect framework to create emotional impact.
‍
While MDA is primarily used in game design for analysis of mechanics, retrofitting this framework with the appropriate UX tools, principles, and methodologies familiar to, us we are able to use it generatively.

We start with defining an aesthetic (not just visual, but emotional), then determine the dynamics that evoke that aesthetic, and finally incorporate the necessary mechanics to achieve those dynamics.

mda model retrofitted with ux methodologies

Aesthetics

Pinterest excels in product concept and voice, particularly through its metaphorical pinning-to-a-board idea, which reflects the real world. The dominant visual aesthetic adopted by them is minimal, emphasizing clean design and functionality to highlight content.

For our redesign, let us try and introduce a bit more of a tactile feeling to the app that evokes the emotional response of pinning a paper clipping to a corkboard.

Image depicts a lady's hand pinning a photograph to a busy corkboard.

To help guide the design process more explicitly, I established key user experience goals for finding pins to save to boards.

Emotional

The interaction pattern must be engaging and emotionally satisfying.

efficient

The interaction pattern must be easy to use, allow for rapid pinning.

delightful

The interaction pattern should create positive feedback loops for repetition.

Dynamics

To define the appropriate dynamics needed to create our intended aesthetic, I created user flows with an in-depth sentiment analysis for each step.
‍
The first flow involved a drag-and-drop interaction pattern, to help create the sensation of pinning an item to a pinboard.

A series of screens and arrows depict the user flow for dragging and dropping a pin into a new board.

The flow works well for rapidly adding pins to a new or recent board by optimizing comfort by following the easiest path (swipe down to the bottom center).

However, it might prove cumbersome if users need to access older boards and this interaction is particularly inaccessible for users with motor disabilities.

So I created a user flow that provides the same functional and emotional experience without relying on the drag-drop interaction.

This is intended to be the primary interaction pattern for our product!

This is a great example to elucidate why quick and early prototyping is the GOAT.

A series of screens and arrows depict the user flow for adding a pin to a board using a pin button.

Mechanics

Finally, I ensured the atomic components like UI, microinteractions, animation and sound all came together to double down on delight and ease of use.
‍
Where there was scope to rehaul the original visual design, I decided to work within the constraints of the design system already in place to ensure a seamless transition to the new interaction patterns.

A table with UI components design for the new interactions. The first component is the Board, with active and hover states. The second component is a tab for creating a new board with default and hover states. The last component is a for the pin with default, pinned and hold states. An animation depicts a pin with a board below it. The pin transitions from default to held state while the board transitions from default to hover state, the pin then translate down towards the board and both components slides off screen, mimicking the feeling of adding a clipping to a folder.

Testing and Improvements

Minor Iterations

A quick informal heuristic evaluation before finalizing the designs for formal review revealed some key usability issues.

These insights helped smooth over the granular user-interactions to increase time efficiency and created a way to contextualize the new features to users on potential release.

Screens depicting change in size of trigger area for the pin button. The first iteration hs the trigger hugging the pin button closely while the second covers a larger area of the top left corner of the screen where the pin button lies.

‍Leveraging Fitt's Law

The while the earlier pin button conformed to the minimum recommended target size (26px), it still led to frequent missed taps. An increase in the size of target area while keeping the pin icon the same size, resulted in a much smoother interaction.
‍

‍Clearer Feedback for Drag-and-Drop

The motion of the arc created by the thumb while holding the phone one-handed can blocki the visual feedback for hover states. A slight tweak in the animation and haptic "bumps" which indicate successful long tap and hover state create a much better user expererience.

Two screens showing the two points in the drag and drop interaction that will benefit rom audio and haptic feedback. The first is as the pin changes from defualt to held state and the second is when the pin crosses over the board bounday, causeing the board to enter the hover state.

User Testing and Results

Task List
‍
•   Add pin to Most Recent Board using the original flow.
•   Add pin to New Board using the original flow.

•   Add Pin to Most Recent Board using Pin Button.
•   Add pin to a New Board using Pin Button.
•   Add pin to the third Board using Pin Button.
‍
•   Add Pin to Most Recent Board using Drag-and-Drop.
•   Add pin to a New Board using Drag-and-Drop.
•   Add pin to the third board using Drag-and-Drop.‍
‍

Metrics

‍Satisfactions Survey
Attitudinal Responses
Time Efficiency

Participants
‍
4 participants from initial user research.

7.7/10
Avg. Satisfaction rating for Original Flow
‍

‍
"This is the reason I switched to Instagram for inspiration."

10/10
Avg. Satisfaction rating for using pin button
‍
43% increase in time efficiency.
‍
"I like this."
‍‍‍‍‍

9.2/10
Avg. Satisfaction rating for drag-and-drop
‍
49% increase in time efficiency.
‍
"Ooh, nice!"‍
‍

Looking Ahead

Key Performance Indicators

We can directly measure the business impact created by our newer, more emotional interaction design.

Some particular metrics to measure success would be:

increased user retention
‍
Detecting improvement in retention and churn rates after new feature release can be key to measuring feature success.

positive brand perception
‍‍
Increase in app rating as well as positive shift in customer reviews are also be effective.
‍
‍
‍

Learnings

Game Design x UX Design = Sweet Synergy!
‍‍
As a UX Designer, the iterative design thinking process has been my bread and butter. However, I've realized that stepping back and thinking about the product holistically through differentdisciplinary lenses may help us define its identity with more confidence. The MDA framework is a powerful tool used to analyze games, but we were able to find a way to use it generatively! And with a fair amount of success.
‍
‍
Emotional Design's significant role in driving product adoption.

Some of the research I carried out for emotional design led to findings that indicate implicit visceral responses to products may have a much larger role in forming opinions that explicit and reflective ones.
‍
‍
Drag-and-drop can be a challenging interaction to get right for mobile.

While Nn/g provides a robust set of guidelines for designing drag-and-drop interactions for mobile, it recommends having a compelling reason to justify its inclusion. This compelled the decision to relegate it to a superuser interaction. Additionally, using an advanced prototyping tool like Protopie was essential for testing this interaction's ease-of-use.
‍

Team

Role

Tools

Timeline