Building an agentic AI design process for conversion-focused UI

Intention

Why agentic AI, and what was our goal

Leadership's mandate was to raise conversion with speed: design faster, build faster, see results faster. That mattered, but speed alone doesn't produce pages that convert. That part was mine.

My goal was quality — layouts and copy that actually spoke to users, addressed their hesitations, and helped them picture their own outcome. I'd already proven this mattered: some of the first pages I built here outperformed everything already live, because I got the details right — copy, imagery, contrast, accessibility, all working together.

Setup

The environment behind the workflow

Before Claude Code could design anything, I needed a real technical foundation. Once that was in place, Claude Code could read our design system directly and make changes inside Figma itself, not just generate isolated mockups.

Building the proof of concept

Putting the guardrails to work

With the Three-Layer Model and CLAUDE.md in place, I set up a sandbox environment inside Figma, a space where Claude Code could build freely without touching live production files. I had it generate multiple landing page variations inside that sandbox, then worked through the bugs and inconsistencies that came up: places where it misread a component, ignored a token, or made a layout choice that technically followed the rules but didn't read well.

Each fix fed back into the guardrails themselves, tightening CLAUDE.md and adjusting how I prompted, so the same mistake wouldn't repeat on the next page. By the time I had a handful of clean, on-brand pages built entirely by Claude Code inside our real design system, I had something worth showing leadership.

Market check

A gut check with other designers on where we stood against the market

Around this time, I attended a Design X event in Toronto and spent time talking with designers from companies of all sizes. Most hadn't incorporated AI into their design process at all. The ones who had were still improvising, without anything close to a tested, repeatable workflow.

That told me two things. We were further ahead than I'd realized, which was a good confidence check heading into the harder parts of this build. And the conversations themselves were useful on their own — a few designers shared ideas that later shaped how I explored using AI agents more accurately and efficiently. This context ended up mattering beyond just my own confidence — it became part of how I framed our position to leadership at the Day 28 demo.

Phase 2

From proof of concept to production system

With that mandate, I scaled the work across every vertical we served. I built out prompt templates for each one — bath renovation, kitchen refacing, roofing, flooring, basement renovation, and more — each tailored to the specific language, concerns, and visual expectations of that category, while still pulling from the same core design system underneath.

Alongside the vertical-specific work, I codified a set of universal CRO best practices — conversion principles that applied across every page regardless of vertical — so Claude Code had a consistent baseline to work from even as the specifics changed page to page.

I also started pressure-testing pages directly with AI: feeding it a live or in-progress page and asking it a direct question, "give me five reasons a user wouldn't convert on this page." That became a fast, repeatable way to catch weak points before a page ever went live, rather than waiting for real traffic data to reveal them.

Research

Listening to the customer, directly

Beyond competitive analysis, I went to the source: how customers actually talked about their hesitations, fears, and goals in their own words. I listened through real sales calls, paying close attention to the specific language customers used when expressing doubt — about price, timeline, or whether the result would actually look the way they imagined.

I paired that with a deeper analysis of customer reviews, scraping and feeding Google reviews to Claude so it could surface patterns at a scale I couldn't manually track. Together, this gave me a prioritized list of the hesitations that came up most often, and I used that list to guide both design and copy decisions, addressing each one directly instead of guessing at what might be holding users back.

Outputs

What shipped

The research and workflow came together in real, deployed work. I built 4 sample landing page templates, each designed around the prioritized hesitations for its vertical, with copy, information architecture, and content hierarchy structured to address concerns before they became objections.

Two concrete examples: the Alenco Windows SE page and the RBA social landing page. Both follow the same structural logic: a UVP section built around specific, icon-led benefits rather than vague claims, a local trust section addressing "why homeowners here trust this brand," a simple multi-step process visual to reduce uncertainty about what happens after contact, and testimonials placed directly before the final call to action, right where hesitation peaks.

As with the design system in Case Study 05, these pages were built and prepared for launch, but full conversion data wasn't available before my role ended. What's shown here reflects the structural and research-driven decisions behind the design, not measured performance.