Building Validity Engage

Designing Validity’s first AI-native email platform.

Validity Engage is a brand-new agentic AI platform that acts as a strategic partner across the full email lifecycle, from brief to post-send monitoring. It brings work once split across separate Validity products into one intelligent system, with AI reasoning built on Validity’s proprietary email data network

PROJECT DETAILS

Role: Director of Product Design
Team: 5 product designers across 4 agent squads and 2 platform squads, plus product, engineering and product marketing partners
Timeline: January 2026 start with weekly releases for a GA launch October 1, 2026
Platform: Web, SaaS (Next.js and Ruby)

CHALLENGE

There was no shared design language for AI, and squads were already shipping weekly, each designing its own agent. Without a connecting vision, Engage risked feeling like four separate tools instead of one product. The design system had to work in Next.js and Ruby, chat had to match what users expect from AI tools, and customers who relied on established products couldn’t be disrupted.

GOALS

Marketers: Give every team expert-level QA and deliverability help, with AI doing the diagnosis they used to do manually.
Business: Unite Validity’s products in one AI-native platform, with shared credit-based pricing.
Platform & AI: Build an agentic design system for every squad, with guardrails that keep AI answers accurate and trustworthy everywhere they appear.

The challenge

Validity set out to build its first AI-native product from scratch, with several squads working in parallel and no shared design language for AI yet. Without a connecting vision, it risked shipping as four separate agents rather than one product. [Add the customer problem in one sentence: who, what pain, why now.

We began with pre-send email checks, building on the existing Previews & QA functionality in Litmus. Soon after, we needed MVPs of two more agents, Insight (market intelligence) and Guardian (monitoring), to get beta customers using the product. That meant designing a UI that could connect all the agents before most of them existed.
Each squad designed from its own agent’s capabilities and iterated weekly in Claude Code on beta feedback. There was little room for up-front planning, so the product vision had to emerge from what the agents proved, not come before them.
Squads were building across both Next.js and Ruby, so the design system couldn’t live in one codebase. Every component had to be coded and maintained for both, and kept in sync as the system evolved. On top of that, we were building it from almost nothing: marketing provided a logo and a few assets, and from those we created a full visual language and component library, including patterns existing systems didn’t cover, like chat, streaming responses and agent status, all while squads were already designing.
With no existing product to iterate on, the AI raised open questions about whether customers could rely on its output. We built a way for internal teams to test agent results against real customer data, so we could set guardrails and keep results relevant before they reached customers.
Insight and Guardian both include chat, and customers arrive expecting the features they already know from other AI chat tools. We had to reach parity on those basics [e.g., list two or three: conversation history, stopping a response, feedback on answers] while fitting chat into each agent’s workflow.
ValidityEngage packages included access to other Validity products, like Litmus, BriteVerify, Sender Certification and DemandTools, each with its own customers, conventions and navigation. While we migrated their functionality into ValidityEngage, customers still had to jump to separate platforms depending on the job they needed to do. As a short-term fix, we made those included products visible inside ValidityEngage and routed customers to the right place for each task.

What I owned

Early product vision and north-star exploration
Direction and sign-off on navigation, IA and cross-squad journeys
AI interaction principles and patterns
Design system and Figma-to-GitHub workflow with Claude
Critique, hiring, coaching and quality bar

What my design team owned

End-to-end design within their squad
Navigation and the product switcher
Research and testing for their features
Detailed UI, flows and specs
Day-to-day partnership with their squad
Contributing reusable components back to the shared system

What was shaped with PM, Engineering cross-functional teams

Product roadmap and sequencing
Scope tradeoffs for each release
Success metrics
Integration and MCP priorities
Credit-based pricing and packaging

Designing agents, not just screens

Guardian Agent

Monitoring watches reputation, inbox placement and anomalies after every send to catch deliverability issues early

Ignite Agent

Pre-send catches rendering, code, compliance and deliverability issues before a campaign ever leaves the door.

Insight Agent

Market Intelligence: catches rendering, code, compliance and deliverability issues before a campaign ever leaves the door.

Shaping the vision from what we shipped

Each squad's designer worked inside one shared model; I owned the layer above them and the connections out to existing products and integrations. Swap in your real squad names and products, or recreate this as a polished visual for the site.

One Vision tied to every agent, existing Validity products and new integrations

ValidityEngage

Ignite Agent

Guardian Agent

Insights Agent

Expressions Agent (TBD)

Wallet & Credit usage

Settings & shared navigation

Integrations & MCP
Claude, Slack, Microsoft Teams, Figma & more

Existing Validity Products
BriteVerify, Litmus & DemandTools

Navigation & product switcher
The problem: Each squad had designed its agent’s pages differently, and some went several levels deep. Customers also still needed to reach other Validity products. Without a shared system, every agent would feel like a different app.
What we designed:
- A persistent top bar and a collapsible left navigation shared by every agent. The left navigation collapses when users are in chat, giving the conversation more room.
- Shared sub-navigation patterns for deeper pages, so customers always knew where they were
- A product switcher that takes customers to other Validity products, like Litmus and BriteVerify, while their features move into Engage
Billing & credit usage
The problem: Customers on the new package had every Validity product switch to credits at once. Admins needed to understand a new pricing model and know when to buy more credits, before running out disrupted their teams’ work.
What we designed:
- One credit tracking view across Validity Engage and the existing Validity products
- Clear guidance on when and how to buy more credits
- In-app alerts and admin emails as credits run low or run out
- Next phase: usage broken down by team, user and product
One design system built with engineering

The problem: Six squads were shipping at the same time across Next.js and Ruby. A component update in Figma had to reach both codebases without breaking either.
What we built: Working with engineering, we created a Claude skill that synced components from Figma to GitHub for review and publication. We tested it squad by squad, so the same update worked in both stacks.

Outcomes and impact

In under 9 months, and following an acquisition that reshaped teams and structures, a team of five designers, four of them at Validity less than a year, took Validity Engage from 0 to 1. The product reached general availability on October 1, 2026, with 17+ customers committed before launch. The impact below covers the build through beta: how the product came together and how the team’s way of working changed.

>9 months

from kickoff to GA

17+ customers

committed before launch

6 squads

one design system

How the team changed

Full ownership, fast: every designer owned their squad’s design end to end
From Figma links to code: the team moved from handing off Figma links to building prototypes in Claude Code and handing off through GitHub, so engineers reviewed real, working code
From research-first to learn-by-shipping: beta customers tested clickable prototypes, so their feedback shaped each feature before it was built

Faster iteration: design changes reached code, and customer feedback reached design, in days instead of weeks
A shared demo brand: Stride & Stone, a fictional apparel brand with realistic data, became the account for internal testing and for marketing’s screenshots, demos and website examples

Reflection

The biggest shift was how the team worked. With AI changing month to month, we pivoted quickly, designed in code and shipped early. We also learned that trust starts below the interface, with backend guardrails that keep answers accurate, and that designers need to understand those systems as much as the screens.