Anjali Patel
Product Design Leader

Ask LitCharts AI

 

Ask LitCharts AI

Led end-to-end design and strategy for LitCharts' first AI tool while mentoring a designer and partnering with engineering, product, and the founding team.

Impact

  1. 75% higher conversion than the company's previous top-performing feature

  2. Built to scale: sped up development time for 3 future teacher-focused AI tools

  3. Contributed to a 40% revenue increase as a core part of the roadmap strategy

  4. New design-to-engineering specs process adopted org-wide

 
 

The 3-fold Challenge

From day one, three questions defined this project. Two came from the design brief. The third came from the Product VP, who was concerned about timelines and proposed trading design quality for speed:

  1. How do we create an AI experience that feels familiar yet native to LitCharts?

  2. Can we build in a way to be able to scale across future AI tools?

  3. Could we protect design quality without slowing down?

These questions shaped everything that followed.

 
 

Research

I led competitive research across ChatGPT, Claude, Perplexity, and education-specific AI tools to understand common UX patterns. These findings shaped our AI brand identity:

  1. Conversational chat interfaces were the norm where the AI entity spoke in the first person

  2. Common logo types ranged from personified entities to sparkle icons

  3. Tool naming also showcased personification, copilot or including AI within the name

We aligned on familiar AI conventions including "AI" in the name and using a sparkle icon for the logo to optimize our users’ understanding of the new tool.

 
 
 

Ideation: Challenging the Brief

Originally the specs called for a single Q&A interface. A running chat interface surfaced as the more familiar and scalable solution. I recognized it, advocated for it , and secured approval to change the specs.

In parallel, I studied micro-interactions and built a motion prototyping toolkit that gave engineering the confidence to commit to motion design as a quality baseline.

I focused my explorations in CodePen around how the chat bubbles slide into the chat area, the ellipsis animation while the AI is thinking, and how the answer populates into the bubble itself.

 
 
 

Strategy: Solving for Speed and Scale

The VP's concern about quality vs. speed wasn't just an immediate problem, it pointed to a deeper one: how do you build AI features fast without rebuilding from scratch each time?

I proposed two things in parallel.

  1. New specs workflow: CSS rules written directly into design specs, so engineers had everything they needed

  2. React components from the start: a scalable system that allowed us to ship faster with the next three AI tools.

One workflow solved the deadline. The other solved the next three.

 
 

Results

Ask AI became the highest-converting feature in LitCharts history, enabling our 2024 roadmap and subsequent AI tools, contributing to 40% revenue growth with retention holding through price increases . The CSS specs workflow became org-wide standard, improving cross-functional collaboration on every build that followed.

“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 Ngyuen, Engineering Manager
 
 

Reflection

The best outcomes came from collaboration. The Product VP raised concerns early creating space to problem-solve together. Engineering's openness to CSS specs made workflow innovation possible. My direct report's eagerness to push past the initial brief is what surfaced a scalable interface. Prototyping early and specifying details upfront meant we shipped faster and better.

 
Top ↑