Coframe AI Editor

Business impact

• Featured by OpenAI as a showcase of applied generative AI
• Secured contracts with multiple Fortune 500 and billion-dollar enterprises
• 500+ companies joined the waitlist within the first month of launch

Reimagining How Businesses Optimize Their Site

Coframe is a B2B startup that helps companies optimize their websites with generative AI. Instead of running slow, manual A/B tests, Coframe automatically generates and personalizes landing page variations—copy, images, even layouts—so growth teams can launch experiments at scale and move faster than ever before.

To make Coframe valuable, we needed to design an editor that brought this technology to life—a place where marketers and growth teams could create, edit, and preview site variants in a way that felt intuitive and powerful.

Context

In 2023, we were one of the first ones to tackle AI-generated site experimentation. Unlike incumbents like Optimizely, Coframe didn’t rely on manual tests tests. But that meant we had no clear playbook to follow.

On top of that:

• We were a small, early-stage team (I was the only designer).
• Our ICP wasn’t yet defined—were we building for growth marketers or engineers?
• The product needed to feel powerful but not overwhelming—capable of technical integration while approachable to non-technical users.

Insights from early users

• AI wasn’t the feature—results were.Users didn’t care if it was AI under the hood; they cared about higher-converting pages.
• Most problems are search problems.Whether finding the right copy, layout, or imagery, users wanted fast, guided navigation through options.
• Know your audience.We discovered our early adopters leaned toward growth engineers—pushing us toward more technical integrations and flexibility, not just a marketer-friendly UI.

Defining what the variant-creation experience should be

During early explorations, we were questioning who our ICP was in parallel with discovery calls with potential customers. Our product depended on how technical the customer was, and the size of the company we were serving. We were also still learning what users actually cared about achieving. To cover ground, I explored multiple directions: structured forms, chat flows, and editor-style experiences.

We ultimately chose growth marketers as our ICP. That decision pushed us to focus on the editor, giving users precise element-level editing that balanced control with simplicity.

Wrestling with complexity: multi-page experiments

When the scope started to get more complex and I began thinking about experiments spanning multiple pages, I considered how users would navigate in and out of those pages, how they would create variants within them, and even drill into editing elements inside those variants. It got complicated very quickly once the multi-page layer was added, both for user understanding and engineering. We decided to cut this direction and focus on single-page experiments with deep element control.

Exploring flows for moving from one variant to another

With the scope simplified, I explored how users should confirm their variants. One option was a linear flow where users approved variants one by one. Another was a high-level dashboard where everything could be viewed at once. A third was a nonlinear model where users dipped in and out of specific variants. The linear flow offered clarity but slowed users down, while the dashboard gave flexibility but risked overwhelm. We landed on a hybrid: a clear entry point with an obvious next step, paired with the freedom to branch into deeper edits as needed.

Choosing between chat-first and variant-first experience

I also explored different layouts to decide whether element and variant navigation should sit at the forefront or whether we should lead with a chat-first experience. We ultimately moved forward with a chat-first approach, keeping element and variant controls secondary. This struck the right balance: it guided users through the AI without overwhelming them with an interface that felt like a full website builder.

Final design

The final editor brought Coframe’s AI capabilities into a focused, approachable workflow. Users could generate new sections, edit copy or elements, and preview variants side by side. A chat-first panel guided the process, while element and variant controls remained available without overwhelming the interface. This structure highlighted the “magic moment” of instantly seeing AI-powered changes, while keeping the editor clear, flexible, and easy to navigate.