Guardrails for confidence
Designing for the moment of purchase, and the people who shape it.
Forms Builder Suite for Zephr
PLATFORM ARCHITECTURE
DESIGN SYSTEMS
CONVERSION
Summary
DESCRIPTION
An operations workbench (and the trust infrastructure that earned its adoption) for the people who run subscription businesses at scale.
THE PROBLEM
Engagement collapsed from 16 monthly interactions per client to less than 1. Non-technical users were afraid to touch it.
MY ROLE
End-to-end UX/UI lead for both Operator tool + consumer-facing subscription flows.
CLIENTS
Wall Street Journal, GoPro, Planet Fitness, New York Post, Vogue Business
OUTCOME
+40% engagement in 3 months. +8 NPS.
Time-to-publish a marketing experiment: weeks → hours.
Five at-risk enterprise renewals closed.
Cited as contributing factor in Zephr's $44M acquisition by Zuora.
PROJECT LENGTH
6 months. 3 to MVP, then 3 iterating post launch.
The setup
THE PROBLEM
The problem wasn't usability. It was fear.
Marketing teams at major subscription brands were responsible for testing offers and growing revenue. Every edit on the existing builder felt like a risk to live conversion. They filed engineering tickets and waited weeks, or didn't change anything at all.
The tool exposed high-risk decisions (layout, hierarchy, pricing) at the same layer as low-risk ones (copy, color). Non-technical users with power and no protection.
USERS
Designed for both sides, publisher and viewer.
End Consumers. Subscription is one of the most psychologically loaded moments in consumer product. Decisional friction at the moment of payment is the biggest predictor of cart abandonment. We studied drop-offs, scan paths, and micro-decisions at checkout. The consumer research shaped structural choices upstream. The empathy isn't decorative. It's load-bearing.
Marketing teams running subscription strategy. Managing multiple subscription products across multiple sites, often without technical or design fluency. They didn't want more control. They wanted confidence. Different design briefs.
STRATEGY
Guardrails for confidence.
Forms needed to feel native across very different brand sites. We could have built a fully customizable editor, but research showed users wanted to ship experiments without risking revenue.
So I proposed a constrained system that locked high-stakes decisions upstream, keeping form-building fast, consistent, and secure.
Core principle was "Design should not expose consequential decisions at the point of use."
The architecture puts decisions at the right level, with the right owner, in the right context.
Style Guide Each site defines its visual DNA once: color, typography, spacing, button styles, logo. Low frequency, high consequence.
Interface Library Reusable components built within the style guide, saved across forms and sites.
Forms Builder The assembly layer. By the time users arrive here, the risky decisions are already locked in.
Features we've built
End-user experience
Three steps: paywall, account verification, and checkout, with an optional fourth step for collecting user data.
Business-user experience
Intuitive configuration tool mirroring end-user experience.
The system
Each step designed against conversion
Minimal cognitive load, visually quiet at the payment moment, progressive disclosure on registration. The same four steps marketing teams build in the tool, seen from the end of the funnel.
Building blocks
Progressive disclosure for the flexibility and clarity
Complexity of configuration is hidden behind the building blocks so non-technical users can experiment without any risk
Three block types
Different elements need different kinds of editability.
Simple blocks
Text, copy, image, divider
Expand inline to expose the few fields that matter. A user changing button copy doesn't need a panel; they need the words to be reachable in one click.
Toggle-and-edit blocks
Login link, alternative price link, social login, divider
On/off toggle as the primary affordance, because some marketing teams' organizations don't support these features at all. Hiding cleanly is as important as configuring.
Deep-configuration blocks
Subscription plan options, payment method detail, user attribute capture
Clicking opens a dedicated configuration page, so the depth lives in a new surface. A back button returns the user to the same spot in the preview, preserving context.
CSS exposure
Supporting 80/20 approach
The MVP supported single-column stacked layouts. For brands that needed image-text side-by-side arrangements, we exposed available CSS classes inside the same edit panel, available to users with engineering capacity. The depth lived next to the simple cases, not behind a developer mode, so it stayed discoverable without making the surface heavier. The 80/20 line, drawn deliberately.
Live preview
Best supports editorial visual across sites
The preview's UI controls (device toggle, site switch, zoom) adapt between light and dark modes based on the background they sit on. Subscription brands span clean white to deep editorial black to saturated brand color, and the controls had to read clearly across all of them. The kind of edge case that, left unsolved, makes a preview feel like it doesn't belong on a real consumer-facing site.
Shortcuts
Connective tissue
These shortcut patterns let users move smoothly through a four-step, multi-site, multi-device builder without ever losing their place. Each one is small, but together they form the connective tissue that makes the system feel like a single workspace.
Outcome
The behavior change mattered most.
Marketing teams went from avoiding the tool to iterating fast. Teams ran campaigns in parallel. The tool shifted from bottleneck to leverage.
+40%
product engagement within 3 months of launch
+8 pts
NPS lift after launch
Weeks → hours
time-to-publish a marketing experiment
5 enterprise clients
over $100M ARR each, renewed at the wire
$44M
Zuora acquisition of Zephr, September 2022. This work cited as a contributing factor.
Reflection
User research again revealed the most valuable evidence: the best systems for high-stakes work do not give users more control, but rather remove the need for it.
We made sure to install user behavior tracking tags at launch. After more than three years of the product running and helping users experiment and improve subscription conversion, the team is now looking into ways to use the data to train an agent to create a more dynamic storefront and checkout experience.