EngageEdu
An AI-powered browser extension and web platform that detects student disengagement in real time and delivers personalized interventions for both students and instructors.
My Role
• UX Designer
• Competitive Analysis
• System Schema
• Storyboards
• HAX Guidelines
• Visual Language System
• Wireframes
• High-Fidelity Prototype
Timeline
Academic Semester
Team
Yesenia Garcia + Team
Overview
EngageEdu: An AI-powered student engagement detection platform
Existing educational platforms used AI to personalize learning or generate study materials — but none actively identified student disengagement while it was happening. Instead, they reacted to learning outcomes only after performance had already declined. EngageEdu was designed to fill that gap: an AI system capable of recognizing disengagement early enough for students and instructors to intervene before learning suffered.
Problem Statement
Existing AI in education reacts to failure — it doesn't prevent it.
No existing platform actively detected disengagement while it was happening. Instead, they relied on test scores and completion rates — metrics that only surface after learning had already suffered. How can we design an AI system that recognizes disengagement in the moment, giving students and instructors the ability to intervene before learning suffers?
Why should we care about this?
Khan Academy, Quizlet, and Unacademy all use AI effectively — but none detect disengagement while it is happening. They address symptoms, not causes.
No single behavioral signal can accurately represent engagement — meaningful detection requires combining multiple indicators including lesson completion, navigation behavior, and self-reporting.
Engagement detection can feel highly personal and potentially inaccurate — making transparency, user control, and trust essential design requirements.
Solution
A browser extension + web portal for real-time engagement detection
Engagement Summary
The Engagement Summary grouped lessons into Most Engaged, Moderately Engaged, and Least Engaged — allowing users to immediately identify recurring learning behaviors rather than isolated moments. This created a natural foundation for personalized recommendations.
Engagement Status
Rather than triggering automatic interventions, students could confirm or reject AI detections. This kept users in control while allowing the AI to continuously improve through feedback — replacing authority with collaboration.
Web Portal
The EngageEdu web portal became a dedicated workspace where users could review engagement history, access personalized recommendations, explore trends, manage feedback, and view resources — keeping immediate assistance one click away from the browser extension.
Process
Okay but wait....how did we get here?
Competitive Analysis
Phase 1
Comparing Khan Academy, Quizlet, and Unacademy to find the gap
System Schema
Phase 2
Mapping AI inputs, ML decisions, and user outputs
Storyboards
Phase 3
4 intervention scenarios across student + instructor journeys
HAX Guidelines
Phase 4
Applying Microsoft's Human-AI Interaction guidelines
Visual Guide + Wireframes
Phase 5
Color system, typography, and lo-fi wireframes
Reflection & Next Steps
Next Steps: Iteration
Synthesis
Competitive Analysis
Before designing our own solution, we wanted to understand how existing educational platforms were already using AI.
Rather than looking for inspiration alone, we were trying to answer one question: What problems are already being solved — and where does the opportunity still exist? After comparing products including Khan Academy, Quizlet, and Unacademy, a pattern quickly emerged. While each platform successfully used AI to personalize learning, generate study materials, or simplify content creation, none of them actively identified student disengagement while it was happening.
Instead, they primarily reacted to learning outcomes after performance had already declined.
What we learned —
The opportunity wasn't creating another AI tutor.
What we learned —
Platforms reacted to outcomes after performance had already declined.
What we learned —
The insight: design AI that recognizes disengagement early enough to intervene.
Led to: Real-Time Engagement Detection
Led to: Separate Student + Instructor Experiences
Led to: Trust-First AI Design Approach
System Schema
System schema mapping highlighted the core challenge: no single metric could represent engagement.
Because our concept depended on AI recommendations, we first needed to define exactly what information the system would observe before making decisions. Rather than jumping into interface design, we mapped the complete flow between system inputs, machine learning decisions, and user outputs.
What We Discovered
Engagement needed to be inferred through multiple behavioral signals including: lesson completion time, navigation behavior, repeated page visits, exercise completion, optional self reports, and optional computer vision indicators such as gaze and facial expressions. Combining these signals made the AI more explainable while reducing dependence on any single metric. This schema eventually became the backbone of every recommendation shown throughout the product.
Design Impact —
This schema became the backbone of every recommendation shown throughout the product.
Storyboards
Before creating wireframes, we wanted to validate that the product solved realistic classroom situations instead of isolated UI interactions.
We created four storyboards exploring different moments across both student and instructor experiences. Each storyboard represented a different intervention point within the learning journey rather than a different screen.
Storyboard 1 — A student receiving immediate assistance after becoming disengaged
Storyboard 2 — An instructor identifying trends across an entire class
What We Learned
While creating these scenarios, we realized EngageEdu needed to support two very different workflows. Students needed immediate, lightweight interventions during learning. Instructors needed summarized insights that supported planning before or after class. This insight led us to design separate experiences for each user instead of forcing one shared interface.
HAX Guidelines
Rather than treating AI as a black box, we intentionally designed the experience around Microsoft's Human-AI Interaction Guidelines.
Because engagement detection can feel highly personal — and potentially inaccurate — we prioritized transparency, user control, and contextual assistance throughout the experience.
What We Learned
Time Services Based on Context: Instead of interrupting students constantly, EngageEdu waited until inactivity patterns suggested assistance was actually needed. Show Contextually Relevant Information: Recommendations changed depending on the student's current lesson rather than showing generic advice. Make Clear Why the System Did What It Did: Students could see why the AI believed they were disengaged. Encourage Granular Feedback: Students could confirm, deny, or explain detections, allowing the system to continuously improve over time.
Visual Guide
Our visual language was intentionally designed to feel calm, trustworthy, and educational.
Because EngageEdu delivers AI-generated feedback that could sometimes feel critical, we wanted the interface to reduce anxiety rather than amplify it.
Design Decisions
Color System: Blue for trust, Green/Yellow/Red for engagement levels
Typography: Inter for readability during longer learning sessions
Visual Hierarchy
Simple visual hierarchy became increasingly important because both students and instructors were reviewing large amounts of performance information. We prioritized scannable layouts, clear status indicators, and consistent interaction patterns throughout.
Wireframes → High Fidelity
Engagement Status Screen
Web Portal Dashboard
Instructor View
Challenges
How do users trust AI-generated engagement scores?
If students or instructors couldn't understand why the AI made a decision, recommendations would quickly lose credibility. Our solution: instead of presenting conclusions as facts, every notification allowed users to confirm or deny the detection while also explaining why it occurred.
Key Design Challenges
Trust isn't created through accuracy alone — it comes from transparency and giving users meaningful control. We worked through five core challenge areas:
Privacy
False Positives
Teacher Trust
Student Autonomy
Explainability
Instructor Perception
Reflection & Next Steps
Designing trustworthy AI is harder than designing intelligent AI
Initially, we believed the biggest challenge would be detecting disengagement accurately. Instead, we found that designing trustworthy AI experiences was significantly more difficult than designing intelligent ones.
Automation and human control must coexist
The project continually pushed us to balance automation with human control, personalization with privacy, and insight with transparency — never fully sacrificing one for the other.
AI works best as a collaborative assistant, not an authority
By the end of the project, EngageEdu had evolved beyond an AI notification system into a collaborative assistant that supported both students and instructors without replacing their judgment.
Some potential next steps may be to:
• Short-term: Conduct usability testing with students and teachers to validate whether engagement summaries are understandable and actionable.
• Short-term: Evaluate whether users trust AI-generated recommendations and identify opportunities to improve explainability.
• Mid-term: Refine engagement models using real classroom interaction data rather than hypothetical inputs.
• Mid-term: Personalize recommendations based on individual learning preferences and historical engagement patterns.
• Long-term: Integrate directly with learning management systems such as Canvas, Google Classroom, and Khan Academy.
• Long-term: Explore adaptive interventions that evolve over time while preserving transparency and user control.