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 the entire product surface. I think in systems so a small team can scale, and I ship design in code so the conversation shifts from “do we have a dev for this” to “let’s refine it.” I helped launch from 0 to 1: the dashboard and its information architecture, the public site and its design system, and the brand and marketing guidelines.

Dashboard IA System

The MVP dashboard launched and grew quickly over the first year. It ended up including 13 top-level navigation items, all mostly feature-named: Sites, Plugins, Reports, Purchases, Referrals, WooPayments, Tools. Every stakeholder wanted top-level space. The result was a flat list that exceeded what people can hold in working memory (Miller’s Law caps it around 7), and made the dashboard feel like a feature catalog instead of a place to get work done. We started working on a revamp.

I led the restructuring around Jobs to Be Done. Features got grouped into jobs: Clients (sites, plugins, development), Earn (commissions, referrals, revenue), Agency (team, partner directory, tier). 13 items became 6.

The harder problem was governance. Teams keep shipping features. Without a framework, the nav bloats again within a quarter. The rubric: if someone wants a new section, the question is “what job does this do for the agency?” Not “which team owns it.”

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. Reports, referrals, and payouts all fold into Earn. Every new feature request runs through the same question.

The dashboard design follows Automattic’s shared design system, converging with WordPress.com and WordPress VIP so agencies move between products without relearning the interface. That alignment is intentional: I coordinate with principal-level designers across the org to make sure patterns we introduce for agencies 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.

For the site, I led a collaboration with Automattic’s Team 51 to define a small but versatile design system, built with reusable patterns on top of automattic.com’s existing components: tabs, carousels, content cards. Each one is flexible enough to handle different content shapes without needing a designer in the loop at every turn.

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 design system, brand guidelines, and image tooling I defined allow my small team (myself and one or two other designers depending on workload) to scale output quickly for whatever stakeholders need.

How I Work

The same JTBD framework that governs the IA also governs copy and PRD definition, so at every level we’re clear about which user job we’re designing for. I built two Claude Code skills to make this repeatable: jtbd-prd-frame for framing features around the user’s goal, and jtbd-copy for writing interface copy through that lens.

I also ship design directly 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.