Ask LitCharts AI
Lead Product Designer, Design Manager
Direct report, engineers, product managers, CEO
Figma, CodePen, Adobe, Amplitude, Jira, Confluence
14 weeks
Challenge
AI-powered study tools were flooding the market. I ran a Kano survey confirming our users wanted AI features too. To stay competitive and meet user need, LitCharts needed an AI tool of its own and fast. Ask LitCharts AI was the first of four AI tools for the year's roadmap strategy, all building toward a single goal: launching a new subscription tier.
Results
The responsive design drew on established AI patterns to feel immediately intuitive, while brand-specific elements made it unmistakably LitCharts.
It became the top-converting feature in company history, 75% higher than the previous best.
The component system scaled seamlessly to three teacher AI tools that followed, all shipping on time.
Together they anchored a new Teacher Tier that contributed to 40% YOY revenue growth, with zero change in retention despite price increases.
75%
Increase in conversion over prior top feature
40%
Increase in YOY revenue growth
0%
Change in churn rate and retention
Process
I led end-to-end design while mentoring a direct report, paired with engineering on feasibility, and partnered with product on feature direction:
Research & Analysis: I conducted a competitive analysis across AI giants and education-specific tools and identified common UX patterns.
Ideation: Through exploration, a running chat interface emerged as the more familiar and scalable UX pattern. I made the case and secured approval to change the specs.
Micro-interactions: I studied these in CodePen, building a motion toolkit that gave engineering the confidence to commit to animation as a quality baseline.
Strategy: When the Product VP raised concerns about trading design quality for speed, I proposed two solutions: CSS rules written directly into design specs, and scalable React components to carry all four AI tools without rebuilding from scratch.
Handoff & Delivery: The CSS-in-specs process gave engineering everything they needed to build quickly. The component system meant subsequent tools required no structural redesign, just new UX on an already-proven foundation.
“ The CSS specs helped us create the most responsive feature to date and eliminated the need for javascript to handle responsiveness like some of our legacy features. ”
Alan Nguyen
Engineering Manager | LitCharts
Conclusion
Ask LitCharts AI not only launched on time, but it became the highest converting feature in company history. The feature's component strategy enabled quick iteration of the three AI tools that followed. The all elements of roadmap shipped before the school year leading to 40% YOY revenue growth and zero change in retention despite price increases. None of it would have been possible without cross-functional collaboration.