Ask LitCharts AI
Led design strategy for LitCharts' first AI tool: the highest-converting and most responsive feature in company history.
Role: Product Design Manager (player-coach)
Impact:
Highest-converting and most responsive feature to date
Established new design-to-engineering workflow adopted org-wide
Became proof point for continued investment in AI-powered features across the platform
Overview
LitCharts needed an AI-powered study tool to support our planned Teacher Tier launch, but we had tight timelines and concerns about whether we could ship quality work fast enough. This case study shows how I led the design end-to-end while mentoring a mid-level designer, navigated strategic constraints, and established new workflows that changed how our org approached design-to-engineering handoff.
The 3-fold Challenge:
How do we design an AI chat experience that feels familiar while still feeling native to LitCharts?
How do we build interaction and visual patterns that could be reused across 3+ future AI tools without redesigning from scratch each time?
Prior to the project beginning, my Product VP raised concerns about timeline. He proposed reducing design quality to move faster, but could we meet our deadlines without having to sacrifice design quality?
Research: Understanding the AI Landscape
I researched common AI interaction patterns across ChatGPT, Claude, Perplexity, and education-specific tools to understand user expectations. Key findings:
Users expect conversational, chat-based interfaces for AI
Typing animations signal "thinking" and make AI feel responsive
Clear attribution and sourcing builds trust in educational contexts
I worked on defining the AI voice and tone, naming conventions, and how the tool would fit within LitCharts' existing brand identity. We wanted it to feel helpful and approachable, not robotic or overly formal. Lastly my direct report analyzed where the AI tool should live on the site and with my guidance we solidified a future proof information architecture direction. This ensured we were designing for the system, not just one feature.
Key insights: Straightforward naming, logo patterns, and conversational interfaces with micro interactions that personified the entity.
Ideation & Prototyping: Challenging the Brief
Initial Product Specs: Product originally spec'd a single question-and-answer interface. They were open to motion design, but we not heavily invested in it.
Design Exploration: I framed the design exploration for my direct report to start with the UX requirements from the product specs, but iterate on alternative approaches based on our research. In parallel, I explored micro interactions to elevate our designs.
Strategic Pivot: A running chat interface emerged as the clear winner within my direct reports UX explorations since it aligned with familiar AI patterns like ChatGPT. I advocated for this to the Product VP and secured approval to change the product specs. In parallel, I studied and prototyped micro interactions which provided a toolkit for engineering to confidently say it was feasible. This convinced the cross-functional team to invest in motion design as a quality baseline.
Solving the Timeline Problem: CSS Specs
To meet our deadline without sacrificing quality, I proposed a new workflow: specifying CSS rules directly in design specs for engineers as well as exploring interaction design elements myself in CodePen in collaboration with engineering. Once the designs were in the implementing engineers hands they had everything they needed to execute: CSS rules, motion design libraries, and functioning preliminary prototypes to draw from.
“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.”
Impact & Reflection
Highest-converting and most responsive feature in company history (+75% vs. previous best), enabled 3+ additional AI tools, contributed to 50% LTV increase.
CSS specs became org-wide standard, improved cross-functional collaboration and morale, improving subsequent AI builds and the overall Teacher Tier build for the year. This is how our UX foundations fit into the bigger picture for the year:
Key learnings:
Prototyping early and specifying implementation details upfront meant we shipped faster and better.
Challenging specs and advocating for chat-based interaction created better scalability and empowered my report to think more strategically moving forward.
CSS specs solved one timeline problem, but improved every project that followed becoming an org-wide standard, improving cross-functional collaboration and morale.
This project taught me that the best outcomes come from collaboration, not individual heroics. Product's willingness to raise timeline concerns early created space for us to problem-solve together. Engineering's openness to experimenting with CSS specs made the workflow innovation possible. And my direct report's eagerness to explore beyond the initial brief reminded me that trust unlocks better design thinking.
Looking back, I'm grateful we had a team willing to try new approaches under pressure. The CSS workflow and chat interface weren't brilliant strokes of genius, they were the result of iterating together, staying open to feedback, and focusing on what would actually serve users and the team.