01 · introduction

Bridging design, engineering, and accessibility at scale.

Product designer specializing in design systems, accessibility, and enterprise SaaS. Known as a trusted accessibility resource, I help teams align design, engineering, and implementation around shared standards. 11 years in enterprise B2B software.

"He's very precise, calm, considered, accurate — which is all the traits you need when trying to figure out how to make a design system work for such a plethora of products that we have."

- My design director

selected work

02 · selected work

Four projects, one through-line: things that scale and stay legible.

i.

Acquia GEL - design system from 0 to 1

We had two design systems: one was inaccessible, one was inflexible. A new, unified system was needed for consistent and accessible design across our product suite. I led the design side, working closely with engineering, to craft a full system of components, tokens, and documentation. We focused on consistency between Figma and code as well as usability by AI.

  • WCAG AA conformance across all products
  • Consistent look and feel across products
  • Faster design and implementation
View key decisions and project details

My Role

Led design strategy, component architecture, accessibility, and governance in partnership with engineering.

Constraints

  • Built on top of an existing third-party component library
  • Had to meet WCAG AA requirements
  • No dedicated team to create or maintain

Challenges

  • How to optimize an off-the-shelf component library for our established requirements
  • Keeping momentum in an environment that struggled to prioritize the design system
  • Generally figuring out how to establish our first company-wide design system with two people

Key Decisions

  • Wrapped all components coming from third-party library
    • Enables consistent add-ons and improved accessibility
    • Simplifies future updates
  • Prioritized parity between Figma and implementation
    • Improves designer-engineer communication
    • Minimizes friction during hand-off
  • Structured documentation and Figma for both human and AI consumption
    • Maximizes speed and versatility

Results

  • 52 production-ready components
  • Used in 10+ products by 8 designers and dozens of engineers
  • Shared Angular and React implementation strategy
  • Improved accessibility consistency across products

ii.

Acquia Cloud Platform MEO - saving million$ in annual revenue

We have numerous customers requiring FedRAMP compliance, and our old system was set to fall out of compliance. I led the design initiative to modify our legacy platform in a way that would allow customers to migrate and maintain FedRAMP compliance. In addition to a whole new architecture, this process created entirely new features and workflows for users, powering scalable website management.

  • Enabled management of hundreds of sites in a single workflow
  • Preserved millions of dollars in annual recurring revenue
  • Enabled sunsetting an outdated product
View key decisions and project details

My Role

Led information architecture and UX design for a new FedRAMP-compliant workflow. Partnered on feature definition, business logic, and product requirements.

Constraints

  • Built within an existing product framework and design system
  • Designed to migrate customers from a sibling product without alienating current users

Challenges

  • Meeting minimum functional requirements on time to allow customers to migrate
  • Designing for the vastly different use cases and roles of our customers
  • Communication and decision making across 5 engineering teams

Key Decisions

  • Balanced technical accuracy with simplicity/clarity in UI presentation
    • Allows users to understand how to do their job without adding confusing details
    • Avoids constraining future features to the assumptions of the initial MVP
  • Separated infrastructure configuration from deployment workflows
    • Enables users to make changes independently without risking production outages
  • Defined the information architecture and terminology for new concepts
    • Improved clarity for users migrating from legacy workflows
    • Created a foundation for consistent communication across teams

Results

  • Retained 17 customers, providing millions of dollars in revenue
  • Simplified and scalable architecture for the product into the future
  • Enabled meaningful integration with other products

iii.

Two design systems - made harmonious

I worked to update and bring two designs sytems into alignment. This included: refactoring Figma components to improve structure and responsiveness, matching variables to implemented CSS, adding missing components, and filling in documentation. I also acted as an advocate across the company for broader awareness and adoption of the design systems.

  • Unified design system used across 7 products and 9 engineering teams
  • Improved alignment between Figma and code
  • New governance process
  • User-friendly Figma components

iv.

Content Hub - making filtering usable

The design for filtering was limited in function and unintuitive to use. Starting with exploratory designs from another designer who left, I worked with Product to define requirements, conduct testing, and deliver an all-new design for filtering that solved user and business needs.

  • Redesigned a one-off UI to use the design system
  • Added clarity to the filtering process
  • Designed filter feature to meet accessibility standards

03 · My Pillars

Three threads, braided.

a.

Design systems

Tokens before components. Governance before either. I treat a system as a real product. 

// tokens/color.json
{
  "color": {
    "ink":    "#1B1B20",
    "paper":  "#F2EDE4",
    "accent": "#C8421E"
  }
}

b.

Accessibility

I've become a trusted resource in accessibility for a company of 1,000+ employees, providing guidance on both strategy and execution. 

<button
  type="submit"
  aria-describedby="err-email"
  data-loading="false">
  Send
</button>

c.

Code-savvy design

I won’t replace your front-end dev, but I’ll happily open a PR. Comfortable working with engineers in code and offering solutions. 

export function Field({ label, error }) {
  return (
    <label className="field">
      <span>{label}</span>
      <input aria-invalid={!!error} />
    </label>
  );
}

04 · ui work

Redesigning the app picker

Demonstrates interaction design and visual design beyond system work.

Design Progression

1. Original app picker menu
Original design of the navigation menu
2. Design left by another designer, given to me
Partial redesign of the app picker left off by another designer
3. My final redesign
Final redesign of the app picker menu

Final Redesign

Interactive prototype demonstrating the navigation menu interactions

05 · contact me

Looking to level up
your design system?

Email me