FRIENDS OF SFGATE
SFGATE had never charged readers for access to its journalism. We were introducing a new app-only subscription experience to an audience accustomed to free, ad-supported content — with a hard paywall and a completely new subscription model.
As the sole Product Designer, I owned the end-to-end experience across the app, paywall strategy, subscription funnel, pricing presentation, messaging, navigation, App Store experience, and launch campaign. I partnered closely with Product, Engineering, Editorial, Marketing, and senior leadership to take the product from concept to launch in just over three months.
Wireframing | Hi-FI Designs | Marketing Campaign
The Problem
SFGATE had never charged readers for anything. The audience is large, free, and ad-supported — so a subscription could not read like a wall. It had to read like joining something.
Three constraints shaped every decision: the offer is app-only, the value is the absence of something (ads), and the brand voice is irreverent in a way most paywalls are not.
GOAL 01
GOAL 02
GOAL 03
Create an app experience worth returning to every day.
Communicate the value of membership clearly enough to earn the first conversion.
Introduce a hard paywall without alienating a free audience.
STEP 01
Research & competitive analysis
I audited how other news and lifestyle apps sell membership — where the ask appears, what it promises, and how many taps it costs. This research helped me identify where users were most likely to encounter the value proposition and informed how early we needed to introduce the subscription experience. I marked up each flow to separate what earned attention from what got skipped.
STEP 02
User flows
I mapped the full membership journey — first open, browsing free, hitting the ad-free pitch, purchase, and returning as a member — with branches for lapsed and restored subscriptions. I used wireframes to pressure-test the subscription moment before committing to visual design. The key question was how to explain the new paid experience within a familiar environment to our user base.
STEP 03
Wireframes
I wireframed out the user flow and began to add in real elements so we could solidify where the subscription offer would be placed and find best practices for checkout and sign in messaging.
STEP 04
High fidelity screens
The membership moment sits inside the reading experience rather than in front of it. Type, spacing, and motion carry the "fun and friendly" brief; the offer itself is one line and one button.
Clear delineation between login and sign up buttons
Value proposition front and center
Local photography emphasizes we're an integral part of your community
Red -> Purple gradient differentiates this from the standard SFGate.com product
New user welcome screen
STEP 05
App Store designs
Five store cards, each carrying one promise, sequenced so the first two do the work if nobody swipes. Because the App Store was one of the first places prospective subscribers encountered the product, I treated it as part of the subscription funnel—not simply launch marketing.
STEP 06
Launch campaign
Social and on-site creative reused the app's type system, imagery, and distinct color gradient so the campaign and the product read as one thing. The campaign extended the product experience beyond the app itself, creating a consistent visual and verbal introduction to the new membership.
Promotional page announcing the Friend of SFGATE product
Online user account page
A sample of digital ads and promotional units leading users to become a Friend
NEXT PROJECT→