Automattic for Agencies

Automattic for Agencies gives WordPress agencies one place to manage sites, earn revenue, and access the full Automattic ecosystem: hosting, Jetpack, WooCommerce, and more. The bet is simple. When agencies succeed with open source, more of the open web gets embraced.

As principal designer I own design for the entire product surface, from the initial 0-to-1 launch to continued growth: the dashboard and its information architecture, the public site and brand system, and the marketing guidelines.

Dashboard

The dashboard is the primary workspace for agency owners: managing client sites, tracking revenue, accessing the Automattic ecosystem. The MVP launched and grew fast. Without a framework to evaluate what belongs in the nav, it hit 13 top-level items, all feature-named, all competing for space.

The restructure was organized around Jobs to Be Done. The more durable work was the governance rubric: if someone wants a new section, the question is “what job does this do for the agency?” not “which team owns it.” Teams keep shipping features; without that question, the nav bloats again within a quarter. 13 items became 6.

Section	Job to be Done	Blurb
Home	”See what needs my attention now”	Quick overview of activity and what needs attention.
Clients	”Manage my client sites”	Build, deploy, and manage sites you maintain for clients.
Marketplace	”Buy what I need for clients”	Find hosting, products, and deals. Manage purchases.
Resources	”Solve problems and get better”	Tutorials and resources to grow your agency.
Earn	”Make money from my services”	Track commissions, referrals, and revenue.
Agency	”Manage my agency and get found”	Manage your team and get discovered by clients.

Items that used to compete for top-level space now nest under the job they support. Dev tools live under Clients because that’s where the work happens. Referrals and payouts fold into Earn. To make the framework repeatable across copy and PRD definition, I built two Claude Code skills: jtbd-prd-frame for framing features around the user’s goal, and jtbd-copy for writing interface copy through that lens.

The dashboard design follows Automattic’s new shared design system, converging with WordPress.com and WordPress VIP so agencies move between products without relearning the interface. Patterns introduced for agencies get coordinated with principal-level designers across the org to make sure they work everywhere.

Site design system

Since the project started as 0 to 1, we also needed to define the visual and marketing language for the program, site, and collateral. The core tension: the brand lives inside automattic.com and has to feel like part of the family, but agencies are a distinct audience with their own identity. The sub-brand needed enough distinctness to stand on its own without breaking the parent system.

For imagery, I developed a specific style-reference code for AI image generation that gives every asset an editorial feel, consistent across the brand, without requiring a photographer or illustrator. I also built ShutterPrompt to compose scenes without having to memorize photography direction terminology for Midjourney.

Working with Automattic’s Team 51, we defined a small but versatile design system, built with reusable patterns on top of automattic.com’s existing components: tabs, carousels, content cards. Each pattern is versatile enough that new content adapts to fit without starting from scratch.

Before the site launch, I built a full-page prototype using Figma MCP and Claude Code to set the direction for scroll effects and interactions. Not a Figma walkthrough, but a running page the team could react to directly. The same approach applies across the product: I ship design in code, opening pull requests instead of handing off specs. That changed the collaboration from “do we have a dev for this?” to “here’s the fix.”

Results

A4A launched and onboarded over 7,000 agencies in its first year, generating multi-million-dollar annual revenue for Automattic. The JTBD navigation framework continues to govern every new feature addition, and the design system lets a two-person team keep pace with a product that hasn’t stopped growing.