// context_&_my_role
| company | Rover — the world's largest network of pet sitters and dog walkers, with consumer products across iOS, Android, and web |
| team | Design team of 8 |
| my title | Lead Product Designer, Design Systems |
| tenure | Nov 2018 – Feb 2022 |
| contribution scope | Vision, roadmap, and tooling ownership; cross-platform token architecture; accessibility standards; documentation site design and content |
| link | view docs → |
// the_problem
Rover had grown rapidly across three platforms, React, iOS, and Android, with separate design and engineering teams working in silos. There was no shared visual language, no token system, and no documentation. Color palettes diverged across platforms. Typography was inconsistent across codebases. Design decisions were made independently per platform, creating a fragmented user experience and compounding maintenance costs with every new feature shipped.
The opportunity was to build Rover's first design system from scratch, not just a component library, but the connective tissue that would unify every product surface under a shared language.
// system_architecture
Component Taxonomy
Kibble was designed as a cross-platform system with a shared token foundation and platform-specific implementations. Primitive tokens (color, spacing, typography) were defined once and mapped to platform-native values using Style Dictionary, allowing a single visual language to express correctly across React, iOS, and Android.
Tooling & Workflow
Figma served as the design source of truth. Storybook was used for component documentation and visual testing. The public documentation site (rover.com/design-system) served as the shared reference for both designers and engineers across all three platforms.
Governance Model
As system owner, I held the vision and roadmap, aligning engineering and design leadership on priorities. Accessibility (WCAG AA) was established as a baseline requirement for all new components, not a retrofit, but a system-level constraint from the start.
// contributions
- Unified the color palette across all 3 platforms — introduced design tokens to create a single, accessible color system shared across React, iOS, and Android, with a focus on WCAG-compliant color-contrast pairings
- Implemented product-wide custom font & typography components — reduced typographic disparity across codebases and significantly improved design-to-engineering handoff efficiency
- Authored the documentation site — designed and wrote the content for the first iteration of Rover's design system docs, published at rover.com/design-system
// reflection
What worked: Starting with tokens before components. Getting the color and typography primitives right first meant every subsequent component had a stable, accessible foundation to build on. The cross-platform token model also meant the platform team could implement correctly without constant design oversight.
What I'd do differently: Invest in contribution tooling and governance earlier. As the system grew and more teams wanted to build on it, the intake and review process became a bottleneck. A more structured contribution model from the start would have scaled better as the team expanded.