CliffsNotes Design System
LitCharts and CliffsNotes are two of EdTech's most recognized literature study platforms. When I joined LitCharts, the design workflow was fragmented: outdated Sketch files, bloated components, and limited visibility across teams. I led the migration to Figma from the ground up and leveraged it to create CliffsNotes' foundational design system.
Lead Product Designer, Design Manager
Direct report, engineers, product managers, CEO
Figma, Storybook, GitHub, HTML / CSS, React
2021 to 2025
Challenge
When I joined LitCharts, the design workflow was inefficient and slowing cross-functional collaboration down. I recognized that moving to Figma was a strategic investment in speed, scalability, and alignment; but first I needed buy-in.
Results
I presented a clear plan to leadership and secured dedicated time to do the sketch-to-figma migration.
The LitCharts design system became the foundation for how the organization designed and built.
When CliffsNotes joined the Learneo family, I leveraged LitCharts' system to build foundational system elements saving build time by 20-30%.
In another step toward tighter design-to-build translation, I paired with a lead engineer on a Storybook integration.
2
Design systems
20%
Time savings
20+
Adoption rate
Process
I led the design systems initiative end-to-end, from securing leadership buy-in to mentoring the cross-functional team on systems thinking.
Sketch-to-Figma Migration: I led the Sketch-to-Figma migration, auditing every component, removing redundancies, and establishing a scalable foundation for LitCharts.
LitCharts Design System: I built a design system with tokens, variables, styles, components, and documentation. This created a source of truth for design across the organization.
Engineering Partnership: When the engineering lead wanted to explore a Storybook integration, we paired on this initiative to improve QA and reduce translation gaps for the team.
Scaling to CliffsNotes: After acquiring CliffsNotes, it came without a design system. To hit the ground running, I strategically reused the LitCharts system's foundations by reskinning components for the CliffsNotes design system and developing new ones as needed. What could have been a full rebuild became a fast, focused adaptation.
“ Reusing the LitCharts design system for CliffsNotes made development 20-30% faster. ”
Jeff Cohen
Senior Engineer | LitCharts
Conclusion
These design systems didn't just improve our products, it changed how the org worked together. Designers, PMs, and engineers shared a common vocabulary, handoff became seamless, and the system proved it could scale when it mattered most.
If I had more time, even though the fast adaptation was the right call, I would have developed CliffsNotes' foundational elements further to differentiate its brand identity at the foundational level. One of the biggest things I learned along the way was to keep up with every major Figma release. Each one was an opportunity to rethink the system.