Jessi Contreras

Benchmark: Creating the Design Practice

Role: Senior Product Designer, Acting Lead

Tools: Figma, FigJam, Jira, Confluence, Useberry, FullStory, AI-assisted workflows (Claude, MCPs, ChatGPT, and more)

Impact: Built the design infrastructure for a full SaaS platform from scratch. 300+ component design system, 46-page knowledge hub, end-to-end accessibility program, and an AI pipeline that multiplies solo capacity.

About Benchmark

  • Benchmark is a privately held email marketing platform founded in 2004, serving small and mid-sized businesses globally. The company launched a fully reimagined product in October 2025, built on modern architecture and a contact-centric model, with a goal of 3,000 paid users by end of 2026 through new acquisition and migration from Benchmark Classic.


This case study covers the infrastructure. For the product that runs on it, read Benchmark: Leading without the title.

Starting From Scratch


When I joined Benchmark, there was no design system, no research practice, no documentation, and no process to build on. Just a product in active development and no designer before me.


  • The job was never just to ship screens. It was to build the infrastructure that makes screens worth shipping.

Rocket Design System


I started building in greyscale. With no confirmed brand direction, greyscale let me define the token architecture, name the variables, and establish the atomic foundation without waiting on decisions that were not mine to make. The system absorbed Benchmark’s original branding first, then the full rebrand when it was ready.


The result is Rocket, a 300+ component design system built on a token layer shared between Figma and code, so design and engineering work from the same 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 figured out implementation, visual balance, and accessibility compliance from scratch. Both themes are live and actively used.


The FE lead describes Rocket as easy to use. A meaningful contrast to the previous platform, where one-off styles and multiple designers made consistency hard to maintain.

Making The Rebrand Work


Benchmark’s rebrand was designed by an external agency. As each direction came through, I reviewed it for accessibility compliance and technical feasibility in the product.


The proposed CTA colors failed WCAG contrast requirements. I flagged the failures, proposed compliant alternatives across four rounds of full UI mockups, and pushed for Google Fonts and PrimeVue icons to keep implementation feasible across a multilanguage platform.


Working with marketing stakeholders, purple was selected as the primary CTA. That purple is now the brand’s primary action color, applied consistently across the product and landing pages. Teal remained in the system as an accent.

Accessibility by Design


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 platform scored 86% and templates scored 91%. 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 FE lead to fold fixes into ongoing releases without disrupting the roadmap or requiring executive sign-off.


  • Accessibility compliance is now required before every new feature ships.

Confluence Design Hub

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.

Growing The Practice


I built file documentation standards including status banners and dev annotations so any collaborator could open a Figma file and immediately understand where work stood.


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.


  • A practice that started with one designer now has a structure that works beyond me.

Building With AI


I integrated AI tooling into my daily workflow before it was a company initiative. I built multiple Claude projects tailored to different parts of the design process.


The ones I feel help me the most:

  • Design Assistant — brainstorming, design review, copy feedback, and gap analysis against PRDs. A second pair of eyes that catches what solo work misses.
  • Jira Tickets — writes and pushes structured FE tickets from my Figma files, connected to Rocket and Storybook for component nomenclature. What used to take 15 to 20 minutes per ticket now takes under 5.



Outcomes

Design infrastructure

  • 300+ component library built from scratch, token layer shared between Figma and code
  • Accessibility compliance now required before every new feature ships, driven by two self-initiated WCAG audits scoring 86% and 91%
  • 46-page Confluence hub serving design onboarding, AI workflows, and engineering QA documentation


Organizational impact

  • 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


AI and practice

  • Three Claude projects built and documented for team adoption
  • • Jira ticket writing reduced from hours to minutes per cycle
  • AI workflows documented in Confluence and adopted independently by the team

The Product Today

Rocket is live, actively maintained, and the foundation every new feature is built on. Accessibility compliance is part of the process, not a checklist at the end. The Confluence hub is growing. The AI tooling is in daily use across the team.


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.