Guardrails for confidence

Designing for the moment of purchase, and the people who shape it.

Forms Builder for Zuora

End-to-end UX/UI lead · Creative Tool · Cognitive Science

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

+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.

+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.

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. So they filed engineering tickets and waited weeks. Or they didn't make the change at all.

The previous tool exposed high-risk decisions (layout, hierarchy, pricing presentation) at the same layer as low-risk ones (copy, color). It gave non-technical users power without protection.

Also, acquisition was approaching. We needed to ship real value to at-risk enterprise clients on a compressed timeline.

Designed for two, publisher and viewer.

1 Marketing teams running subscription strategy

Managing multiple subscription products across multiple sites simultaneously, often without technical or design fluency. The realization that shaped the product: 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 single biggest predictor of cart abandonment. We studied end-user behavior, drop-off patterns, scan paths on paywalls, micro-decisions at checkout, and the consumer research informed structural choices upstream. The empathy isn't decorative. It's load-bearing.

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.

The decision I pushed back on

The team's first instinct was a fully customizable visual editor. I gently steered away. An editor solved for freedom. Our users didn't want freedom; they wanted to ship marketing experiments without breaking revenue.

A fully open canvas would have put structural decisions in the hands of the user least equipped to make them. It would have meant rebuilding the same form five times for a multi-site enterprise client. And it would have missed the acquisition window.

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.” I held that line. The system shipped on time and the outcome contributed to the acquisition.

Executed Design

1 End-user experience

What end-user sees

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.

2 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

subscription plan options, payment method detail, user attribute capture

subscription plan options, payment method detail, user attribute capture

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 threshold between block types sits where the consequence of a mistake crosses from cosmetic to commercial. Underneath, the block taxonomy is a risk taxonomy. Users always know how much control they have before they open a block.

3 Live preview, with a craft callout

[-]

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.

4 CSS exposure to support 80/20 approach

[four screenshots: paywall / registration / checkout / optional user attribute capture]

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.

5 Shortcuts as connective tissue

[four screenshots: paywall / registration / checkout / optional user attribute capture]

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 $100K ARR each, renewed at the wire

$44M

Zuora acquisition of Zephr, September 2022. This work cited as a contributing factor.

The behavioral change matters more than the numbers. Marketing teams went from avoiding the tool to actively iterating on it. Teams started running multiple campaigns in parallel where before they'd run one and wait. The tool stopped being the bottleneck and started being the leverage. That's the case the acquisition was made on.

REFLEXTION

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.

Home

Back to top

Next case study: Restful Escape

Next: Designing towards absense