CliffsNotes design system
Scaled the LitCharts design system to support multiple products, cutting build time by over 20%.
Role: Product Design Manager
Impact
Championed a strategic shift in tools
Accelerated design and build times
Strengthened cross‑team alignment
Built a scalable, robust design system
Reduced QA time
Improved collaboration cross-team
Modernized workflows
Overview
When I joined LitCharts, our design workflow was fragmented across outdated Sketch files, inconsistent component usage, and limited visibility across teams. This case study walks through how I advocated for a shift from Sketch to Figma, secured buy‑in to invest in a robust design system, mentored teams to adopt it, and partnered with engineering to bring design and code closer together, ultimately creating a system that powered multiple products and significantly improved efficiency.
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
The efficiency gains of a unified design system
Leadership approved the transition and importantly, allocated time for me to build the system the right way, not as a side project.
Migrating & Building the Design 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. I mentored designers and product managers on how to use the system effectively, helping them understand constraints, variants, and how to design with consistency in mind.
As Figma rolled out new features, I continuously refined the system to keep it efficient and easy to maintain. One example: I reduced a component set from 84 variants to just 12 by leveraging new Figma capabilities, dramatically simplifying updates and improving usability for the team. I also ran training sessions and async guides to help designers and PMs stay confident and autonomous when working with the system.
Partnering with Engineering
I took the initiative to partner closely with engineering to ensure the design system aligned with the codebase. This included:
Reviewing GitHub files to understand component structure
Aligning naming conventions between design and code
Mapping Figma components to their coded counterparts
Establishing a shared vocabulary across teams
This collaboration strengthened trust, reduced translation gaps, and made handoff smoother and more predictable. During this process the engineering lead called out an initative of his own, to integrate our library into Storybook to further improve QA and cross‑team visibility. I became his partner in this endeavor since it would allow us to compare design vs. code side‑by‑side which would streamline QA reviews.
Scaling the Design System Across Products
The true test of a design system is its ability to scale. When we began work on CliffsNotes and were concerned about the build time, we strategically decided to reuse the entire LitCharts design system as needed. All we had to do was simply reskin components to match the new brand identity. This saved substantial design and development time and validated the design system’s flexibility and durability. The implementing engineer confirmed that this strategy reduced build time by more than 20%.
“Reusing the LitCharts design system for CliffsNotes made development 20-30% faster.”
Reflection
This initiative was more than a tool migration, it was a cultural shift. I guided the team through new ways of working, mentored designers and PMs on system thinking, and built strong partnerships with engineering. The result was a design system that not only improved our product but strengthened the organization as a whole. See it in action on CliffsNotes!