Hijinks Design System

Geospan’s platform (roof purchasing map, roof building tool, analytics dashboards) suffered from fragmented documentation — designers and engineers re-built components or misused patterns. I rebuilt documentation as a living product: patterns, components, accessibility notes, token mappings, and decision histories — all searchable and embedded in the design workflow.

Problem

• Component pages were inconsistent, incomplete, and lacked code examples.
• Designers and PMs lacked rationale (why a pattern exists), causing unnecessary forks.
• Onboarding for new designers and engineers was long; reimplementation incidents were frequent.

Roles

• Lead author and system strategist: designed doc templates, ran stakeholder interviews, and implemented the docs site.
• Collaborated with frontend engineers to audit inconsistencies and a product manager to ensure alignment with release cadence.

Solution

• Created a documentation framework: Purpose, Anatomy, Tokens used, Accessibility, Code snippets, Do/Don’t, Decision history.
• Designed onboarding flows and quick-start checklists for common tasks (map styles, vector editing components).
• Built a 3-tier token taxonomy: Core (raw values), Semantic (tokens used by components), Component (overrides/variants).
• Design ↔ Engineering Token Synchronization Pipeline: Implemented an end-to-end token sync workflow to guarantee parity.
• Component Library Modernization: Rebuilt or refactored the top 20 highest-traffic components using semantic tokens
• Accessibility Foundations Baked Into Tokens: Accessibility no longer lived in documentation—it was coded into the system

Process

• Discovery interviews with designers, engineers, and PMs.
• Audit of 40+ existing components and patterns.
• Built docs templates and pilot pages for high-use components.
• Launched with demo/training sessions and an internal adoption metric.

Impact

• Component reimplementations dropped ~60% within two quarters (tracked via pull request review tags).
• Increased consistency in accessibility coverage across components.

Lessons

• Embed docs into the daily tools designers use (Figma, Jira).
• Next Steps: Add analytics to docs pages (what gets viewed / where people get stuck) to prioritize doc improvements.