Creator pages on Patreon

The most highly trafficked page on Patreon, a creator’s “home” page, was also the oldest, most technically deficient page on the site. It was time for a mobile-first, conversion-oriented upgrade.

Overview

 

Our team, responsible for helping creators earn more month-over-month, hypothesized that fan conversion was suppressed because of this page’s design and performance. We set about validating that through step-by-step iteration, working with our data science partners and leading our own research in order to ensure we were making incremental improvements to a page that sees roughly 40 million unique visitors each month.

Our goals and success metrics

  1. Follow through on a mobile-first product development process, and thereby

  2. Earn creators more money month-over month

    1. Success metric 1: Increase cents per device by at least 5%, where cents per device = (conversion rate * average pledge value)

    2. 7-day pledge deletion increases less than 10%, with the belief supported by leadership that we can perform follow on work to increase retention at a later time

    3. Reduce load abandonment from 14% to 7% through implementation of a performance budget (first of its kind at Patreon)

Why this page was a problem in the first place

  • Highly trafficked page with no direct owners over time, leading to different treatments across platforms

  • The internal belief that creators are sensitive to any changes

  • Old tech stack that made any work on the page difficult, which had held back previous product and infrastructure improvements

 
Desktop and native mobile web creator pages, prior to the project

Desktop and native mobile web creator pages, prior to the project

 

Hypotheses to validate

  1. Mobile-first will see the largest gains (current conversion rate is at 1.55% compared to 1.98% on desktop)

  2. An emphasis on membership and clear calls to action help fans find how they can support the creator

  3. Simplification of the page hierarchy will help fans understand what the creator is offering

  4. Clarity of who Patreon is and how the process works will increase trust and relieve this burden from the creator

  5. Performance matters, and improving metrics like response time, First Contentful Paint, and Time-to-Interaction will see more people officially “land” and have an opportunity to see the creator page

Design solutions

But first: Creator Brand Color™

Prior to our team beginning development, the company held a hackathon, where I teamed up with a couple engineers from the team and our front-end core team to build something small, but something we felt creators could use to express their brand in a way that helped the new creator pages stand out even more: Creator Brand Color. At the time, every creator page used Patreon’s brand color to communicate calls-to-action like buttons and text links. Using an image sampling library, we generated a set of colors based on the creator’s cover photo and avatar, then adjusted to fit WCAG accessibility guidelines. Every creator can choose from this set, or enter their own RBG/Hex/HSL/HSB value. It’s live in the product today, with about 65% of all active earning creators using the feature.

 
custom-colors1.png
custom-colors2.png
 

A mobile-first experience with an emphasis on membership

Our primary order of business was to clarify what the calls to action are, and where they are within the page. Previously, these had been buried within a long scroll, or hidden behind a confusing “become a patron” flow. We wanted to focus the page around the creator’s offering, in a mobile-friendly way. We also worked to standardize creator brand and asset representation to allow for a reliable “above the fold” experience that confirmed the creator’s brand, rather than Patreon’s. (Most fans don’t know what Patreon is when they come, so let’s not confuse the matter).

 
Native iOS and mobile web

Native iOS and mobile web

 

Simplifying hierarchy and clarifying Patreon’s role

There was extensive research and testing done to find how we could help fans access to the information they needed, in the right order, and nothing more. We ended up removing unnecessary content modules, truncating the creator’s about sections (with a read all link), and shortening the post feed.

In order to help clarify Patreon’s role in facilitating payment and accessing benefits, we added two new content modules to the creator page, below their content, to help explain the step-by-step process. In the end, clear and basic information won out over more verbose, help center-like content.

Below are the individual modules, each having been refined through user research and/or quantitative experiments.

 
modules.png
Desktop layout

Desktop layout

Reflections

 

There was a lot learned throughout the project, but I’ll focus on the results here. We surpassed our conversion goals by a significant margin, the latest rate at around 3% from 1.72% (74% overall, well above our 5% Q4 goal and 10% Q1 goal). That increase was… unexpected. As a team, in running a retrospective, I think I underestimated how aspects like performance and clear membership messaging could help fans understand how they can support creators with Patreon.

 
The new version of the page went fully live in Oct 2019, we had been iterating on specific modules in the older page for 2-3 months prior.

The new version of the page went fully live in Oct 2019, we had been iterating on specific modules in the older page for 2-3 months prior.

chart-retention.png
 
 

What comes next

As we have wrapped up initial work for this area, I am now focused on enabling creators to set up their pages and run their businesses entirely through their phones. It’s a core product strategy initiative I’m fortunate enough to lead, and rollout planned for Q3.

 
creator app