Benchmark: Creating the Design Practice
Built the design infrastructure for a full SaaS platform from scratch: design system, accessibility program, documentation hub, and AI-assisted workflows.
Benchmark is an email marketing platform founded in 2004, serving small and mid-sized businesses globally. We launched a fully reimagined product in October 2025, built on modern architecture and a contact-centric model.
Read Benchmark: Owning Product Design End-to-End for the story on product, research, and cross-functional operating model.
Infrastructure before interfaces.
When I joined Benchmark, there was no design system, no research practice, no documentation, and no process to build on.
The challenge was not simply designing features. It was creating the systems, standards, and processes that would allow the product to scale.
My job was never just to ship screens. It was to build the infrastructure that makes screens worth shipping.
Built in greyscale. Rebranded without rebuilding.
I started in greyscale. With no confirmed brand direction, it allowed me to define the token architecture, establish naming conventions, and build the atomic foundation without waiting on decisions outside my control. The system supported Benchmark's original branding, then adapted to the rebrand without requiring a rebuild.
The result is Rocket, a 300+ component design system built on a shared token layer between Figma and code, giving design and engineering a single source of truth.
The hardest part was dark mode. I had never designed it before and had no one to learn from inside the team. I worked through implementation, visual balance, and accessibility compliance from scratch. Today, both themes are live and actively used.
Beyond supporting the product, Rocket also improved day-to-day collaboration with engineering by making patterns easier to reuse and maintain.
The proposed CTA colors failed WCAG. Purple was chosen instead.
Benchmark's rebrand was designed by an external agency. As each direction came through, I reviewed it for accessibility compliance and technical feasibility within the product.
When the proposed CTA colors failed contrast requirements, I identified compliant alternatives through four rounds of full UI mockups. I also advocated for Google Fonts and PrimeVue icons to keep implementation feasible across a multilingual platform.
Working with marketing stakeholders, purple was selected as the primary CTA color and is now used consistently across the product and marketing site. Teal remained in the system as an accent.
Accessibility was not on the roadmap. I put it there.
With no formal mandate, I scoped the audits, ran them independently, and brought findings to the team with a clear path to fix them.
I ran two self-initiated WCAG 2.2 Level AA audits covering the full platform and all MVP email templates. The gaps were in interaction: keyboard navigation, focus states, ARIA labels, and screen reader behavior across key pages.
Getting fixes shipped meant working incrementally. I aligned with the frontend lead to fold fixes into ongoing releases without disrupting the roadmap or requiring executive sign-off.
Scaling knowledge before scaling the team.
I built the design hub before the team needed it, not after.
- Wave 1 covered file organization, Figma structure, and onboarding guides for designers and FE developers.
- Wave 2 added the new AI tooling layer, including step-by-step guides for setting up Claude projects linked to Google Drive reference files.
- The hub now spans 46 pages and serving as the team's design documentation hub for onboarding, AI workflows, and engineering QA.
When a second designer joined the team, the hub became their onboarding resource. Engineering stores QA tests there too, and the new designer used the AI workflow docs to set up their own Claude projects independently.
From solo practice to shared standards.
Documentation standards, status banners, and developer annotations gave collaborators immediate visibility into the state of a design file.
I walked the new designer through Rocket, file organization, flow structure, and how to communicate design decisions to developers and stakeholders. The standards took hold. Collaborators now navigate their files without friction, and the new designer works within the same documentation system independently.
Built into the process, not added on.
I integrated AI tooling into my daily workflow before it became a company initiative, building Claude projects tailored to different parts of the design process.
Design Assistant: Supports brainstorming, design reviews, copy feedback, and gap analysis against PRDs. A second set of eyes that helps catch what solo work can miss.
Jira Tickets: Generates structured frontend tickets from Figma files, connected to Rocket and Storybook for consistent component nomenclature. What once took 15-20 minutes per ticket now takes under 5.
An engineer used the coded version of Rocket + AI tools to build a full feature independently. The UI had gaps that needed design input, but the design system gave enough structure to ship something functional. That is what good infrastructure is supposed to do.
- 300+ component design system built from scratch with shared Figma and code tokens
- Accessibility compliance embedded into delivery, driven by self-initiated audits scoring 86% and 91%
- 46-page Confluence hub supporting onboarding, AI workflows, and engineering QA
- Purple CTA adopted as Benchmark's primary brand action color, chosen from accessibility-compliant alternatives I proposed
- A second designer onboarded, equipped, and working independently within the practice I built
- An engineer outside the design team shipped a full feature using Rocket's coded components and AI tools
- Three Claude projects built and documented for team adoption
- Jira ticket writing reduced from hours to minutes
- AI workflows documented in Confluence and adopted independently by the team
Rocket is live and continues to support every new feature shipped. Accessibility is embedded into the delivery process, the Confluence hub remains an active team resource, and AI workflows are used across design and engineering.
What started as one designer with no infrastructure is now a design practice with standards, documentation, and tools that work without me in the room.
