CliffsNotes design system
I led the Sketch-to-Figma migration and built LitCharts' design system from the ground up. I mentored the cross-functional team on systems thinking while partnering closely with engineering to align design and code. I then leveraged the LitCharts design system to create the CliffsNotes design system, reskinning foundational elements to save design and build time.
Impact
Cut CliffsNotes new feature build time by 20%
Design-to-engineering handoff adopted as org-wide standard
Design system scaled across two products without rebuilding
Challenge
When I joined LitCharts, the design workflow was fragmented: outdated Sketch files, inconsistent component usage, and limited visibility across teams. Three problems surfaced:
How do we establish a single source of truth for design across the org?
How do we build a system that scales across products?
How do we get leadership to invest time and resources in doing this right?
These challenges shaped everything that followed.
Making the Case
I recognized that moving to Figma wasn't just a tool change — it was a strategic investment in speed, clarity, and cross-functional alignment. To secure buy-in, I presented a clear plan outlining why Figma was the right tool for our future, how real-time collaboration would strengthen cross-team communication, and what the efficiency gains of a unified design system would look like.
Leadership approved the transition and, importantly, allocated dedicated time to build the system properly — not as a side project.
Building the LitCharts system
I led the full migration from Sketch to Figma, auditing every component, removing redundancies, and establishing a clean, scalable foundation. From there, I built a modern design system with component libraries, naming conventions, and documentation.
One example of the continuous refinement of this system, I reduced a component set from 84 variants down to 12 by leveraging new Figma capabilities, dramatically simplifying updates and improving usability for the team.
Partnering with engineering
I took the initiative to partner closely with engineering to ensure the design system aligned with the codebase: reviewing GitHub files to understand component structure, aligning naming conventions between design and code, and establishing a shared vocabulary across teams. This collaboration strengthened trust, reduced translation gaps, and made handoff smoother and more predictable.
When the engineering lead proposed integrating our library into Storybook to further improve QA, I became his partner in that effort. Comparing design vs. code side-by-side streamlined QA reviews and became the new standard for how we shipped.
Scaling to CliffsNotes
The true test of a design system is its ability to scale. When work began on CliffsNotes, the team was concerned about build time. Rather than starting from scratch, we strategically reused the fundamental parts of the LitCharts design system: reskinning components to match CliffsNotes’ brand identity. This saved substantial design and development time and validated the system's scalability.
“Reusing the LitCharts design system for CliffsNotes made development 20–30% faster.”