Go to top arrow

Pinterest

Facilitating native content creation
PinterestPinterest
November 2021

Project Overview

Problem:

Driving native content creation is central to Pinterest’s new vision as an actionable inspiration platform. With modest adoption rates of our core features, Idea Pins and Takes, our team tackled how to facilitate meaningful and actionable content creation on the platform.

Solution:

A tabbed experience in our creation tool that allows users to create content using flexible templates in addition to our existing free-form video mode.

Impact:

A 23% experiment adoption rate that led to feature’s integration into the core publishing flow for all users

My Role

IA, UX/UI Design, Prototyping

Team

Amy Lima - Product Designer

Alan Walker - Design Lead

Alisa Ono - Engineer

Varun Bansal - Product Manager

Brie Taylor - Content Designer

DEFINE

Project Details

When joining Pinterest, the company was embarking on the biggest shift to the platform in recent history by pivoting from a visual discovery platform to a realization platform through native (primarily video) content.

This new vision, while bold and exciting, naturally came with many challenges, namely pushing a foundational user mindset shift from Pinterest being an individual experience to a communal one.

While adoption of our core creation features (Takes and Idea Pins) has been steadily increasing among professional creators, everyday users (Pinners) have been slower to participate in this new ecosystem.

In a crowded creator-focused landscape, how can we make content creation on Pinterest lightweight, easy, and engaging for Pinners?  

Our project, Templates, aimed to tackle just that.

DEFINE

A Blue Ocean Strategy

Business Model: A Blue Ocean Strategy
A survey of the current charitable donation landscape revealed there was considerable room for innovation. I found that charitable organization platforms fall into three main categories:

• Siloed: each individual organization has its own web or mobile platform

• Congregated: a large (read: overwhelming) resource of many organizations with high-level filter and search functionality

• Crowdfunded: most often used as a buoy for systemic state failures

Moreover, of the few micro-donation platforms on the market, none were focused on mutual aid, nor were exceptionally effective at facilitating discoverability of organizations or conveying the impact donations on the platform were having.

By leveraging the power and impact of mutual aid organizations, the innovation and ease of micro-financing, and the simplicity of a service-fee-based revenue model, Be the Change is poised to be an empowering life-raft in a blue ocean of possibility in the charitable donation space.

DEFINE

Why focus on Mutual Aid?

After brainstorming with my mentor, I intentionally decided to focus on Mutual Aid Funds for this platform. In systems of mutual aid, communities take on the responsibility for caring for one another, rather than forcing individuals to fend for themselves, or for government assistance, which has unfortunately proved to be an unsustainable lifeline in desperate times of need.

Rather than centralized organizations where one person is giving to another (effectively creating yet another dependent relationship negotiating access to material resources), mutual aid creates a symbiotic relationship, where all people offer material goods or assistance to one another. Mutual aid organizing is volunteer-run, transparent, and driven by the needs articulated by community members - all values my research found donors to charity highly regard.

Put simply, allies want to make a meaningful impact where it's needed most, and mutual aid organizations are a noble and mighty vehicle to drive such impact. Be the Change is the marriage of these harmonious truths.


UX CHALLENGES

Creating a unified layered tooling experience

Building a tool (templates) within a tool (our native publishing flow) proved to be a delicate undertaking. I had to consider how the design paradigms of our current creation experience should influence the template flow we were embedding into it, making careful and intentional decisions to mirroring or depart from existing patterns.

Additionally, designing for a multi-sided user base made every decision two-fold; we had to take into account how both experienced and novice creators (our everyday users, aka Pinners) would move through the flow. Beyond this, our team spent a lot of time thinking through the level of customization templates should have, from allowing for layout flexibility to advanced image settings.  

Lastly, designing for creator flexibility with content constraints was a delicate balance: how might we build a net-new tool that communicates and allows for rich content creation while providing guardrails to make that creation process as simple as possible?

Creating a unified layered tooling experience
RESEARCH + PLANNING

Problem space definition

This project kicked off with a blank slate and a high degree of ambiguity. We first gathered as a team to identify the precise user problem we were aiming to solve with templates.

From there, we brainstormed different mental models we could assign to templates, as well as tactical approaches in its execution. This helped inform what our measure of success would ultimately be for this feature.

UX SOLUTION

Providing intentional constraints to facilitate content creation

By establishing clear rules surrounding content customization within our creation flow, we developed a system that makes it easy to create high quality Idea Pins and Takes on Pinterest.

Providing intentional constraints to facilitate content creationProviding intentional constraints to facilitate content creation
IDEATE: EXPERIENCE 1

Tabbed creation modes

Templates can be thought of as an extension of our native creation tool. With that in mind, I designed a tabbed creation mode that allows a user to either create an idea pin from scratch or using a template with a tap of a finger.

In template mode, preset layouts are displayed as preview chips below the menu bar with the selected template occupying the greatest screen real estate. The template layouts themselves were designed with Pinterest’s primary content use cases in mind to meet our users where they are.

IDEATE: EXPERIENCE 2

Template editor

I had to find a balance between providing users customization tools and overwhelming them with functionality, as is often the barrier to creation in our native publishing tool. To do this, the designs allow for a few baseline customizations: choosing (and changing) your assets, and scaling them within the template’s fixed frames. As the template editor would be distinct from (but embedded within) the camera editor, I was intentional with what visual and ux patterns to adopt and depart from.

Ultimately, I chose to keep the template editor void of any superfluous UI elements and surfaced helper text throughout the flow. This would assist early understanding of net-new patterns and gestures within this distinct creation mode and focus the experience entirely on the content.

Moving progressively in the flow, a user sees familiar UI such as the same top nav bar and action buttons found in the page editor. This tension between novelty and familiarity, we hoped, would help introduce new functionality while not feeling entirely foreign.

Template editor
IDEATE: EXPERIENCE 3

Integration into page editor

Allowing users to add page-level editing properties to templates was an important choice: we wanted templates to maintain the same freedom of expression users love when creating organic Idea Pins.

However to help reinforce the feeling of progression in the creation process, I established a hard transition from the template editor into the page editor to bring some degree of finality (since a user would not be able to edit their template assets once they reached the page editor). This emphasized the importance of establishing a unique visual language within the template editor as well as providing education and workarounds for accidental destructive actions.

Beyond this, I introduced distinct creative customization once a user graduates into the page editor by setting the default canvas background color as the dominant color of the user’s selected assets. From here, the user can apply all the same page-level properties as with any Idea Pin, including changing the background color and adding interactive stickers, layered text, and sounds.

Integration into page editor
IDEATE: EXPERIENCE 4

Feature education

As this was a net-new experience, education was central to communicating the product to users and bring the intended vision (and user behavior) to life.

I worked closely with our content designers to craft the new user education modals, tabs, and pop-overs to help guide users throughout the flow.

BRANDING + VISUAL DESIGN

Layout-centered visual system

As our primary focus was to facilitate content creation, I went with a wireframed-approach to the template’s designs, utilizing simple grayscale frames as a default template visualization with inverse-filled selected states to emphasize content layout above all else.

Early explorations included branded placeholder images and custom template backgrounds as a means to provide a polished default state in case users didn’t further customize their template. We ultimately decided to leave room for creative, imaginative content possibilities in the hands of our users and instead provide users with only the foundational structure they’d need to bring their uniquely Pinterest-perfect visions to life.

USABILITY TESTING

How effective are templates in driving content creation?

After releasing the templates experiment, we ran a funnel analysis that showed:

• 71% users navigating to the “Layout” tab

• 52% users navigated to the editing page

• 23% users published an Idea Pin using template

View Prototype

Key screens

OUTCOMES

Lessons learned, and where we go from here

Our ambitious templates project saw a 23% feature adoption rate and will be integrated into the core publishing flow of our tool.

The ambiguous nature of this project meant that a lot of my work as a designer was to help our teams reach alignment, make quick decisions, and facilitate the conversation to move the project and vision along every step of the way. I also had to have continuous communication streams with our engineer to ensure there weren’t any unconsidered edge cases or unexpected eng constraints.

I experienced the intricacies that come with navigating a project of this size and scope, as well as seeing the evolution of a small-experiment-turned-successful-feature. I learned how to be a more effective communicator, collaborator, and facilitator, and how every great product update starts with a humble ambition to improve the status quo. I’m proud to have had a hand in raising the bar alongside a world-class team.

MORE CASE STUDIES