Plastiq · Senior Director of Design · 2021–2023 · Part two
The system, the site, and the API.
What the organization built once the strategy was set: a design system I inherited incomplete and turned into company infrastructure, a marketing relaunch from my blueprint, and an embedded-payments product. Led by the designers credited on each section; directed and reviewed by me.
- Role
- Senior Director of Design, reporting to the CPTO
- Team
- 10+ incl. two managers: product design, content design, design technology, marketing design
- Period
- 2021–2023
- Part one
- The strategy and the product
Contents
The organization
One design org for product, systems and brand.
A repositioning fails if the product says one thing and marketing another. So marketing design moved into design, a design technologist sat between design and engineering, and two first-time managers were set up to run the biggest surfaces.
Three disciplines, one bar.
Product design
Pay, Accept, Connect, financing, onboarding and compliance.
Design technology
Turned the design system into code, hand in hand with engineering.
Marketing design
Brand and web, moved into design for the repositioning.
Operating model
Two review tracks, never mixed.
Mix them and you end up debating button placement in a strategy meeting, then shipping an incoherent product anyway.
Managers
Structure followed the work.
Omar Tavarez took a junior designer plus a dotted line to our design technologist, the two people the design system depended on. Danny Lopez ran Pay, still the biggest surface. The IC work on this page was led by them; my part was the strategy, the staffing and the bar.
Design system · Athena 2.0
From a component library to company infrastructure.
Every company I’ve joined had a design system that existed but wasn’t finished. Plastiq’s was no different. The job was the same each time: modernize the look, complete the set, get it into code, and build the habit on both the design and engineering teams so it stayed used. Evolution, not a rebrand.
Co-led by Omar Tavarez and Danny Lopez · Design technologist hired and managed by me · Direction and review: me
One system for three products and the web.
The strategy created two new product lines. Without a shared system, each would have invented its own UI.
Audit, alignment, governance
KPIs agreed before anything was drawn.
Every product was audited, starting with the payments app and with who was actually using it, on what. Workshops set the targets: fewer dev hours, faster to market. A governance model let any team contribute.
Foundations
One foundation across three products and marketing.
Eighteen colour ramps, with one owned by each product line: Sky for Pay, Teal for Connect, Stone for the core brand. The same ramps carried into the marketing site.
Components
Start where the pain is.
The layout grid, the payment widget and feedback indicators went first, because they were the highest-traffic fixes.
Making it stick
Engineering built with it, not beside it.
A Storybook-equivalent built with engineering, documentation designers and developers both read, and a pitch that earned volunteer engineers. Faster pickup of global components followed.
Marketing site · Q4 2022 · my most hands-on piece
The repositioning, in public.
A full relaunch ahead of the public offering in three to four weeks. I wrote the brief, the brand strategy and a complete draft of the layout and content architecture; the team carried it to final visuals and copy. WCAG compliant at launch, and still live today.
Brief, layout and content architecture: me · Lead designer: Omar Tavarez · Principal designers: Danny Lopez, Craig Cockerill · Marketing design: Angela Luna-Chavez · Copy: Noah Sanders
The brief
Six things the site had to do.
The COO brought the ask to design directly because of the timeline and the stakes.
- Hold up to investor attention
- Look like a public company
- Speak to a clearer ideal customer
- Grow the paid tier
- "One Plastiq": one suite, one message
- Sharper value props and benefits
The brand
Plastiq means accomplishment.
Brand, product and marketing reinforce one strategy: meaning at the top, features at the bottom. One master brand, three sub-brands, one UI foundation.
The blueprint
Products out of the menu and onto the homepage.
The old site buried products in its navigation. The content architecture I drafted put Pay, Accept and Connect on the homepage as one suite, with the pricing tiers made visible, then became wireframes and a shared module library the growth team could extend.
Launched
"Accelerate your business."
Research and foundations
Product · Plastiq Connect
Card payments inside other companies’ products, under their brand.
Partners embedded the widget in their own checkout. A buyer pays by card; the vendor is paid by wire, ACH or check, as it always has been.
Product definition with the PM, partner conversations and design direction: me · Lead designer: Omar Tavarez · 1 PM, 1 business analyst, 5–7 engineers
Sequencing
Ask how money must arrive before how it’s sent.
The vendor’s accepted method is fixed. Settling it first means the flow never offers a combination that can’t settle. Six steps, held across three rebuilds.
- 01Payer
- 02Recipient
- 03Delivery method
- 04Payment method
- 05Details
- 06Review
Compliance as precision, not quarantine.
Stored cards are masked, and one security statement sits at the edge of the card block. There’s no fenced-off "secure zone".
White-label
Their brand in front. Ours in every footer.
A partner token layer overrides the base palette and type, so nothing gets redrawn. The payer always knows who is processing the card.
Engineering specification
Product · Plastiq Connect
For developers, the failure state is the product.
A partner’s integration team can end a deal in a technical review. The portal existed to prove, fast, that they didn’t have to build this.
Lead designer: Omar Tavarez
Getting started first. Sandbox at the top.
Docs are linked inside each feature and the version is pinned in the footer. Everything aims at the first successful API call.
Every state designed, not just the happy path.
Keys go through none, created, rotated, deleted and expired. The IP whitelist flags the bad row, not the whole list. The same portal works on a phone.
What I took from it
Systems survive when they’re attached to something shipping.
A standalone Connect design system stayed in discovery. The components built inside the shipping widget became the most complete part of the system, and the marketing site outlived the company that built it.
Draft the blueprint yourself; let the team make it good.
The site shipped in under a month because the architecture was done before the first visual was drawn, and the people drawing them were trusted to finish it.
The strategy decided what to build. The system made it consistent. The team made it real.
The full strategy deck and brand work →