AI-powered Educational Innovation platform

Designing Adaptive AI Learning Conversations

I designed adaptive AI learning conversations with LLM-driven response branching and behavior-state design.

  • Role: Product Design Lead
  • Duration: 9-day prep + 48-hour hackathon build
  • Team: 1 Jr. Designer, 3 Engineers
  • My Contribution: End-to-end leadership from research to implementation, Design system development

Key Impact (Data-Driven Results)

  • Winning Performance: Won 1st Place at the KATC Hackathon 2025 among all competing teams.
  • Conversion Optimization: Redesigned authentication flow by introducing Google SSO, reducing sign-up drop-off by ~50% and nearly doubling the rate of users reaching their first session.
  • Scalable Architecture: Built a token-based design system in 9 days, enabling design-to-engineering decisions in under 30 minutes during the high-pressure build.
Teachme_main

Challenges

Design and ship a working AI product in 48 hours — for a topic revealed only at the start of the event. The stakes: top 3 teams get deployed to real users through an NPO channel.

The product had to work, hold up under real use, and feel polished enough to earn user trust in under two days.

The Insight

Most EdTech is consumption-first: watch, read, quiz. The Protégé Effect, a well-documented learning science principle, shows that teaching someone else significantly improves comprehension and retention.

TeachMe flipped the model. The AI plays the student. You do the teaching.

Teachme_insight

Strategic Bet : Build the Foundation Before You Know the Product

The topic was unknown until hour zero. Instead of starting from scratch when it was revealed, I spent 9 days before the hackathon building a flexible, token-based design system.

I interviewed the engineering team first, they were using React with Styled Components, and aligned Figma token naming to their CSS variable structure before writing a single component. When the hackathon started, the color decision took under 30 minutes. I built 4 full variants using Figma variables, the team voted, done.

Design system

Core Design Decisions

1. Student Personas, Different students trigger different explanations

A single neutral AI voice feels like a search engine. Users respond tersely, without depth. I designed a persona system built on two axes: age level and personality type.

  • levels: Elementary school student / Middle or High school student / Adult / Expert in a field
  • Personality types:Warm / Sassy / Jovial / Timid

Each combination produces a genuinely different character, a warm elementary school student asks very differently than a sassy expert. Users naturally calibrated their explanation depth and language to whoever they were teaching. The teaching behavior happened without us instructing it.

The personas were also emotionally reactive. When a user clicked "Wrap up this session?" mid-session, the student avatar visibly showed disappointment. A small detail, but one that made the AI feel less like a tool and more like someone you were actually teaching. Users were less likely to abandon a session.

TeachMe Personas

2. Keyword Transparency, Users set the agenda, the product tracks progress

Users select learning keywords before the session starts, based on an AI-generated list for their topic. During the session, a progress bar tracks which keywords have been covered in real time.

  • This does two things:
  • it gives users ownership over what the session covers, and it makes the AI's evaluation criteria visible upfront.
  • Users know exactly what they are being assessed on, and can see themselves making progress.
TeachMe Keyword Transparency

3. Adaptive Follow-ups, Designing conversation, not script

TeachMe userflow

Most conversational AI follows a fixed script.
Question → answer → next question, regardless of what was actually said.
I worked with engineering to define prompt logic where the AI classifies every user response into one of three categories, then responds accordingly:

  • Match, explanation is correct and covers the keyword
    → AI asks a deeper follow-up
  • Wrong understanding, explanation has errors
    → AI surfaces the gap without saying "you're wrong," asks a clarifying question
  • Unrelated, explanation drifts off topic
    → AI gently redirects back to the keyword

Each path required a distinct UI state. I mapped and designed all three before engineering built them, not after.

The key design principle:

designing for LLM conversation means designing for variability. The AI does not always respond predictably. Define the edge states first. Design the UI to hold in all of them.

TeachMe Keyword Transparency

Iteration

Pivot 1

Voice to chat at hour 4.

Engineering flagged voice integration was out of scope. Moved to text chat.
Cost with the pre-built system: 2 hours.

Pivot 1

Photo to illustration mid-build.

The student photo created an uncanny valley effect, the AI felt too human. Replaced with a simple illustration. Cost: under 1 hour using component variants.

Pivot 1
Voice to Chat
Pivot 2
Photo to Illustration

User Testing

Ran a testing session during the build. Four findings, four immediate actions:

The Feedback Dashboard

After the core chat was working, internal review revealed a gap: there was no accumulation. No reason to come back.
I designed a session feedback dashboard showing four signals on a 1–10 scale, visualized as a chart:

  1. Understanding, how accurately did the user explain the concept
  2. Learning Achievement, how many keywords were successfully covered
  3. Satisfaction, how well did the AI student respond throughout
  4. Passion and Attitude, engagement and persistence through the session
Plus

per-keyword summary, mistake correction, and review materials. Feedback tone adapted to the persona, a warm elementary student gave encouraging feedback, an expert gave detailed critical analysis.

Three-phase product roadmap I defined:

  1. Phase 1 (shipped): Per-session feedback, 4-factor score, chart visualization
  2. Phase 2: Per-keyword scoring → diagnose weak areas → recommend next persona or topic → score cycle with next action
  3. Phase 3: Gamification, real-time achievement tracking, hint cycle, competitive factors, per-keyword analytics (questions asked, answer quality average, correct/incorrect ratio)

Engineering Handoff

At hour 20, the engineer flagged the Figma JSON token export did not match their Styled Components structure.

Rather than asking engineering to adapt, I updated the token naming in Figma to match their system and re-exported. Fixed in one sync.

Learning:

Token naming alignment must happen before building the system, not after.

Teachme_pivot 1
Teachme_pivot 2
Teachme_pivot final

Reducing Sign-Up Friction

After the hackathon, the team continued developing TeachMe. One of the first product problems we tackled was a painful drop-off at sign-up, users were abandoning before they ever experienced the product.

Two design decisions:

Decision 1

Add Google SSO The simplest friction reduction: one click instead of a form. I designed the updated authentication screens to include Google sign-in alongside email, keeping both paths clearly visible without one overshadowing the other.

Decision 2

Try first, sign up later (designed, proposed for next sprint) I designed a guest flow that let users start a teaching session without an account, then prompted sign-up at the natural value moment, when they wanted to save their feedback report. This was designed and prototyped but not implemented before the product went offline.

Adding Google SSO reduced sign-up drop-off by ~50% and nearly doubled the rate of users reaching their first teaching session.

TeachMe Signup

Note: Sample sizes are small. These numbers are directional, not statistically significant. The pattern is consistent with broader research on SSO adoption reducing authentication friction.

The broader design principle:

Authentication is not an engineering concern dropped at the start of a product. It is a UX decision that determines how many people ever experience what you built. The moment you ask someone to commit, and what you ask them to commit to, is a product design choice with measurable consequences.

Outcome

My leadership in aligning teams and leveraging data delivered a 47% ticket drop, zero churn, and a 4.8/5 rating.These results not only solved a design problem but also strengthened our competitive positioning.

50%

reduction in drop-off rates

1st

Won 1st with most votes

star

Data-driven decision-making (50% reduction in drop-off rates following the implementation of Google SSO)

1st place, most votes. Judges specifically cited the consistency of AI interactions and recognized the team for innovation.

The harder outcome:

the NPO launch did not happen due to an organizational issue. Post-hackathon, API costs became unsustainable without funding. The product went offline.

A well-designed product still did not reach users because the infrastructure was not ready. Release conditions, cost sustainability, and gradual rollout are part of the product design problem, not separate from it.

What I'd Do Differently

Note: The live product is currently offline following the hackathon due to API infrastructure costs.

Thank you!

TOP
Loading...