Roofr: 2022-Present

🎨 Design System

Project Overview

I built Roofr’s first comprehensive design system to unify our product experience and eliminate design bottlenecks across our product team. This foundational work served the organization for 2.5 years and became the blueprint for our updated system leveraging Figma’s latest variable features. Both systems enabled systematic design thinking and provided the technical foundation for our engineering component library.

Role and Team Size: For the initial DS, I led as the sole designer building components while collaborating with our design team to ensure it met everyone’s workflow needs. For the recent rebuild, I led a team-wide initiative where all designers contributed to the updated system. I guided both projects from research through implementation, collaborating closely with front-end leads to ensure technical feasibility.

🔎 Problem Statement

Design team was recreating similar components for each project, reducing sprint capacity for strategic work
Inconsistent UI patterns across features created maintenance overhead for both design and engineering teams
No shared design language meant lengthy alignment discussions during cross-functional planning sessions
Quality and accessibility standards varied significantly between different product areas

🎯 Goals / Ways of Measuring Success

Primary Metrics:

Component insertion rates across all design files and product initiatives
Design team velocity improvement through reduced component creation time
Component reuse rate percentage across new feature development
Engineering handoff efficiency and reduced back-and-forth iterations

Business Metrics:

Sprint velocity increase organization-wide through standardized design patterns
Reduced design and development overhead
Improved product consistency scores across user experience audits
Time-to-market acceleration for new features using established components

🧑‍🔬 Research Takeaways

I conducted a comprehensive audit of our existing Roofr interface to identify the most frequently used UI elements and inconsistencies across our platform. Through design team meetings, I mapped our primary workflow needs and component usage frequency to prioritize which foundational elements were the most important. Analysis of our current design files revealed that buttons, form inputs, typography, and color applications were being recreated constantly with slight variations, creating both design debt and engineering complexity.

While I referenced established design systems for best practices, the primary research focused on understanding our team’s specific needs and usage patterns.

Component Preview

Basic input form field component

Button component

Hint banner component

Fully dynamic colour variables supporting light and dark mode

Dark and light mode automatically switches based on background

Full screens go from light to dark with a single button

Usage & Analytics

Original design system stats

Component metrics for the original design system I built and maintained

Original design system usage highlights by team over the last year

v2 design system stats, including dark mode variable support

📈 Learnings and Performance

The design system exceeded all adoption expectations. We ended up with 400+ components (keep in mind each icon is also a component) with sustained high usage across the organization. Analytics show 20,000+ weekly component insertions with consistent adoption patterns and infrequent detaching. This is demonstrating how the system became integral to daily workflows rather than optional tooling.

Team Usage

The Roofr team (representing the product designers) is the vast majority of usage, and surprisingly even the Roofr Marketing team (representing the social, graphic, and brand designers) adopted the system with meaningful usage, validating its value beyond core product development.

Components

Individual component performance revealed strategic wins: the Button component alone generated 341,898 yearly insertions across 220 variants, while foundational elements like Tags (83,539 insertions) and Checkboxes (82,240 insertions) proved the core component strategy was sound. The system’s success enabled our recent variable-based rebuild, which now supports instant dark mode switching across all 400+ components with zero additional design work required.

Developer Impact

Front-end developers reported significantly improved consistency in implementation, and the cross-team adoption (including marketing usage) demonstrated the system’s value extended beyond its original product team scope. This work fundamentally shifted our organization from component recreation to systematic design thinking, with the analytics proving the system became essential infrastructure rather than a nice-to-have resource.

Challenges

The biggest challenge was decided which components to focus our effort on while ensuring quality. With the data showing sustained adoption patterns over time it gave the justification to dedicate the entire teams resources towards it to create the newly launched v2 version.

☎️ Detailed Results and Prototypes

I’m happy to share specific adoption metrics, revenue impact data, prototypes, and additional design iterations during a portfolio review call. This includes things like quantitative performance data, A/B testing results, and technical implementation details that demonstrate the full scope and business impact of this initiative.

Contact me