Patrick Mullin

Enterprise products, the teams behind them, and the systems underneath.

In ad tech since 2000, managing since 2010. DoubleClick Ad Exchange, Google Ad Manager, Google's Ads Design System, and Harbor at The Trade Desk.

  • Kokai, before The Kokai campaign overview screen before the migration. A blue accent runs through the buttons, tabs and active underline; the four Settings Snapshot cards are white with thin borders and right-aligned values; budget pacing is shown as a donut.
    Zuma, after The same campaign overview screen after the migration to Zuma. The accent is black; the Settings Snapshot cards are filled gray with ruled rows and labels above values; the header's status values are set in pills; budget pacing is shown as a vertical bar.

    Harbor 2.0, The Trade Desk. The campaign overview before and after the Zuma migration. Read the Harbor overview

  • Data tables 12
    Buttons 11
    Tooltips 10
    Cards 9
    Chips 8
    Dialogs 8

    Ads Design System, Google. Fifteen specs defined one component before the audit. Read the Ads overview

  • The Color foundation page, carrying a Design 1.1.0 badge and a Built 1.1.0 badge. A specification note states that every text role passes 4.5 to 1 on its surfaces and that border-control passes 3 to 1, the WCAG AA thresholds. Four primitive scales follow, Green, Slate, Amber and Red, each running nine steps from 100 to 900 with its hex value shown.

    Planchet. The primitive color scales behind a one-user app. Read Planchet

    • Design system governance.

      The people and the processes that control decision-making, contribution, adoption, support, enhancements and workflows

      • Design system product

        • Guidelines.

          Best practices and standards

          • Visual language.

            Foundational styles

          • UI guide.

            Components, patterns

          • Content guide.

            Editorial content strategy

        • Resources.

          Toolkits and libraries

          • Design toolkits.

            Figma libraries, templates

          • Engineer toolkits.

            Storybook, code samples, snippets

    Harbor Design System, The Trade Desk. What the system is made of. Read the Harbor overview

  • The top of the Adjustmint marketing site home page in two directions, side by side at the same width. Both show the same headline, phone screenshot and problem section. The left is white throughout. The right sets the hero on a near-black band and the problem section on a pale mint one.

    Adjustmint. Two directions for the marketing site, built and compared. Read Adjustmint

Work

Case studies. Two need a password, which I will send if you ask.

    • Design system governance

      • Design system product

        • Guidelines

          • Visual language

          • UI guide

          • Content guide

        • Resources

          • Design toolkits

          • Engineer toolkits

    The Trade Desk

    Harbor Design System overview

    From four competing button styles to a single source of truth.

  • Data tables 12
    Buttons 11
    Tooltips 10
    Cards 9
    Chips 8
    Dialogs 8

    Google

    Ads Design System overview

    Delivered two quarters early after the deadline moved six months in.

  • Useful
    4.71out of 5
    Easy to use
    4.92out of 5

    Google

    Density and Accessibility overview

    Breaking a deadlock between data density and accessible click targets.

  • A detail of the Zuma campaign overview: four metric tiles reading Decision power 85, Relevance 109x, Flight budget $129,111 and Flight spend to date $77,466, each with a status pill under it, above a Create ad group button.

    The Trade Deskpassword

    Harbor 2.0

    A migration to a new visual language in two months, with zero consumer-facing breaking changes.

  • Part of Planchet's primitive color grid: four scales, green, slate, amber and red, each stepping from 500 to 900 with its hex value printed on the swatch.

    Side project

    Planchet

    A design system for an app with one user, run like one with a thousand.

  • The top of the Adjustmint marketing site home page in two directions, side by side at the same width. The left is white throughout. The right sets the hero on a near-black band and the problem section on a pale mint one.

    Side project

    Adjustmint

    Know what you can actually spend, not what the bank says.

    • Color
    • Type
    • Space

    The Trade Deskpassword

    AI Prototyping Tool

    Prototypes that inherit the design system instead of drifting from it.

  • More work

    Earlier Google work, the design system management tool, and more side projects.