● Case study
Founding UX Engineer — diagramming platform.
First and only UX Engineer at a developer tools startup building on top of Mermaid.js — an open-source diagramming library. The role covered the full product surface: designing the dashboard, editor, and core features, while also building the UI foundation from the ground up — design system, Storybook, documentation site, and community.
Scope
Product design, design system, Storybook, docs, community
Stack
SvelteKit, TypeScript, Supabase, Storybook, Argos
Role
Founding UX Engineer
Outcome
23 components, full docs site, company-wide adoption
Product screens aren't shown here under NDA. Public artifacts are being collected and will be linked here.
Context
The startup was building a product on top of Mermaid.js — a well-known open-source diagramming library used across the developer community. I joined as the fourth person on the team and the first UX Engineer, with no existing UI foundation, design system, or documentation.
Early on, the role spanned product design and direction — designing the dashboard, the editor, and the features inside it, while also shaping what got built alongside how. Over time the focus shifted toward engineering delivery, but the product design work informed every system decision that followed.
Why this mattered
A developer tools product needs to earn trust with a technical audience. The UI foundation, documentation, and community all had to reflect that — not just look good, but work the way developers expect things to work.
What I built
The work spanned the full surface of a developer tools product — from the component library to the docs site to the community layer underneath it.
Component library
23 production-ready components for a complete website redesign. Owned the full design system roadmap from foundation to delivery.
Storybook
Demo pages for every component, giving the engineering team a living reference for implementation and reducing handoff friction.
Documentation site
Built from scratch — product tutorials and reference pages for each diagram type, making the product approachable for new users.
Community and open source
Set up and launched the community Discord. Contributed documentation to the Mermaid.js open-source project the product was built on.
Key decisions
The most important calls weren't technical. They were about scope, sequencing, and what it actually means to own a UI foundation at a small startup.
Shape what gets built, not just how it looks
In the early stages, the role meant being involved in product and design decisions alongside engineering — figuring out what to build before figuring out how to build it well.
Treat Storybook as a team artifact, not a personal tool
Demo pages for every component turned Storybook into a shared reference the engineering team could rely on. The goal was reducing the gap between design intent and implementation.
Documentation as product, not afterthought
The docs site was built with the same care as the product itself — structured around how users learn, not just what engineers needed to ship.
Invest in the surrounding ecosystem
Community and open-source contributions were part of the job. Launching the Discord and contributing to Mermaid.js meant the work extended beyond the product boundary.
Outcome
Delivered 23 production-ready components for a complete website redesign. The engineering team had a living reference in Storybook for every component. The documentation site went from nothing to a structured resource covering product tutorials and every diagram type.
Led two company-wide developer sessions on design systems patterns and best practices — turning the system work into shared knowledge, not just shared artifacts.
Open source
Contributed documentation to the Mermaid.js open-source project — extending the work beyond the product boundary and into the ecosystem the startup was built on.