Ask LitCharts AI
Lead Product Designer, Design Manager
Direct report, engineers, product managers, CEO
Figma, Adobe, CodePen, Amplitude, Jira, Confluence
14 weeks
Challenge
AI-powered study tools were saturating the market. A Kano survey confirmed our users wanted AI features too. Ask LitCharts AI was the first of four tools on the year's roadmap. Its design needed to scale so all four could ship before the start of the school year and launch 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 year over year revenue
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.
Designing for AI also taught me that the hardest problem isn't the happy path, it's building user confidence when the system behaves unexpectedly. If I were doing it again, I'd have tailored each tool's interaction patterns to its use case, but the shared foundation was the right call under the constraints we had.