Guardrails for confidence
Designing for the moment of purchase, and the people who shape it.
Forms Builder Suite for Zuora
End-to-end UX/UI lead · No-code builder · Consumer psychology
Conceptual images. Consumer facing storefront UX/UI designed with Forms Builder.
Summary
Description
A no-code system that gave marketing teams and other business users running subscription strategy independent control over consumer-facing subscription flows.
The Problem
Engagement collapsed from 16 monthly interactions per client to less than 1.
The product wasn't broken. People were afraid to touch it.
My Role
End-to-end UX/UI lead.
Operator tool + consumer-facing subscription flows.
Clients
Wall Street Journal, GoPro, Planet Fitness, New York Post, Vogue Business
Outcome
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.
Designed for two, publisher and viewer.
1 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.
2 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.
Executed Design
End-user experience
What end-user sees
Business-user experience
What people who builds end-user experience sees
System design. 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.
Three block types: progressive disclosure as risk taxonomy
Different elements need different kinds of editability. Three block types, calibrated to that.
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
Toggle-and-edit blocks (login link, alternative price link, social login, divider) include an 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
need real estate. Clicking opens a dedicated configuration page with a back button that returns the user to exactly where they were in the preview. The depth lives in a new surface; the context stays preserved.
The decision behind why constraint, not freedom
The brief was about seamless blending. Subscription forms had to feel native on each brand's site, no matter how different the sites looked. The team's first instinct was a fully customizable visual editor, and there was a real case for it. But research kept telling a different story. Our users weren't asking for freedom. They were asking to ship marketing experiments without breaking revenue. Those are different problems.
A fully open canvas would have put structural decisions in the hands of the user least equipped to make them, and meant rebuilding the same form five times for a multi-site enterprise client. So I proposed a deliberately constrained system. Slightly more deterministic. Far more secure. Faster to ship.
The principle that became the spine of the work: "Design should not expose consequential decisions at the point of use."
The system shipped on time and contributed to the acquisition.
Strategy: a three-layer system
The architecture distributes decisions to the right level, made by the right person, in the right context.
1 Style Guide
Each site defines its visual DNA once: color, typography, spacing, button styles, logo. Low frequency, high consequence.
2 Interface Library
Reusable components built within the style guide, saved across forms and sites.
3 Forms Builder
The assembly layer. By the time users arrive here, the risky decisions are already locked in.
For multi-site enterprise clients, this meant building structure once and theming it across sites, instead of duplicating effort five ways.
CSS exposure to support 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
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.
5 Shortcuts as connective tissue
Three shortcut patterns let users move freely across a four-step, multi-site, multi-device builder without leaving the page. Individually small. Together, the connective tissue that makes the system feel like one workspace.
Outcome
+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
What I changed my mind about
Going in, I assumed flexibility was the goal. The research changed my read. The best systems for high-stakes work don't give users more control. They remove the need for it.
That reframe is something I now bring to every product I work on, particularly anything involving AI: the question is rarely how much can we let the user do? but what is the smallest surface area on which they can act with confidence?
What I'd push next
The architecture distributes decisions to the right level, made by the right person, in the right context.
Decouple structure from skin at the architectural level.
Each element should know what it is separately from what it looks like. Compose a form once, theme it across five brands without rebuilding. (Technical: design tokens.)
Merge the builder and the preview.
Direct manipulation on the live canvas, controls surfacing contextually. Less cognitive translation.
Bootstrap from existing assets.
Claude's design tool now imports from Figma and GitHub to derive the visual system. We built the opposite. The right shape now is hybrid.
Activate three years of behavioral data.
Tracking has been live since first launch. With Zuora's AI agent layer now in place, the foundation is there for proactive conversion optimization and a system that learns from every published storefront.