Case study · 3-min skim
MetaRouter
Five years as the platform's only product designer.
MetaRouter is a US data-infrastructure startup. Its control interface is where customers manage the clusters they deploy. I was its first and only product designer, as a contractor from February 2021 and then as Creative Director, and I also led the brand, the website and the explainer video.
- Product design
- Design system
- Prototyping
- Internal tools
- Brand
- Website
- Explainer video
Summary
- Role
- Contractor from Feb 2021, then Creative Director (title) from Nov 2021. First and only product designer for the control interface; design lead for brand and web.
- Team
- Product managers, engineering (close collaboration on the design system and component library), and the Customer, Growth and Marketing teams.
- Timeline
- Feb 2021 – Jun 2026 · 5 years (contractor, then Creative Director from Nov 2021)
- Tools
- Figma · Material Design · React · Storybook · Claude Code · Webflow
- Outcome
- The interface went from no design system or component library to a shared Figma and React library covering hundreds of screens. The marketing site I designed and built was still in use in September 2026, and the explainer video has been in use for more than four years.
- design system and component library
- 0 → 1design system and component libraryFigma + React
- of screens on the shared library
- 100sof screens on the shared libraryby June 2026
- as the one product designer
- 5 yrsas the one product designer2021 – 2026
- the explainer video has been in use
- 4+ yrsthe explainer video has been in useas of Sep 2026
Context
A complex platform with no design system.
When I joined, the control interface was poorly designed and documented, with no design system and no component library.
The design system
One source of truth, from Figma to React.
- 01Material DesignThe base component set
- 02Figma libraryComponents and patterns I designed
- 03React + StorybookBuilt in close collaboration with engineering, so design and code share parts
- 04Claude Code skillMy design guidance, served internally so everyone had the latest version
- 05Control interfaceHundreds of screens
Key decisions
Three choices that shaped the system.
- 01
Build the system on Material Design's base components.
- 02
Share one component library between Figma and React, documented in Storybook.
- Why
- Design and code shared the same parts.
- 03
Package my design guidance as a Claude Code skill and serve it internally.
- Why
- Everyone always had the latest version of the guidance.
One workflow, start to finish
Evidence in, design change out.
Customer feedback, product analytics and session replays, gathered with the customer team, informed design decisions on the control interface.
Collaboration
Embedded with every team that touched the product.
Product
Daily work with product managers on static and interactive prototypes.
Engineering
Prototypes refined together; close collaboration on the design system and component library.
Customer
User feedback, product analytics and session replays, used in design decisions.
Growth
Sales decks that turned complex technical concepts into coherent stories.
Marketing
Website content and narrative, campaign assets, documents.
Internal tools
Tools I designed and built for the team.
MetaRouter Architect
A React Flow tool for designing MetaRouter infrastructure visually.
Brand system as a skill
Brand guidance packaged as a Claude Code skill, with the component library in Storybook.
Cluster tools
An Electron app for managing clusters, using the CLI as its API.
Brand, website, video
The story outside the product, too.
Rebrand
Led the full rebrand, its visual language and an internal design asset library.
Marketing website
Designed and built every page in Webflow; Marketing shaped the content and narrative. Still in use in September 2026.
Explainer video
A fully animated explainer, in use for more than four years.
Outcome and where it stands
The interface went from no design system or component library to a shared Figma and React library covering hundreds of screens. The marketing site I designed and built was still in use in September 2026, and the explainer video has been in use for more than four years.
Five years on one complex product surface, with product managers, engineers and customers in the loop.