EduCare: AI EdTech Command Center for Personalized Learning - @ Google AiStudio - Live Demo

Project Overview

The EduCare AI Edtech SaaS Dashboard was developed to serve as the central intelligence hub for an adaptive learning platform. Built with React, TypeScript, and Tailwind CSS, the dashboard provides students, educators, and administrators with a 360-degree view of learning progression, behavioral habits, and AI-driven insights, replacing static reports with dynamic, actionable data visualizations.

Technology Stack: React (with TypeScript), Tailwind CSS, D3.js/Recharts, Internal AI Model API Integration 

My Role: Lead Front-End Architect, Data Visualization Specialist, UX/UI Designer

1. The Problem: Generic Learning Paths and Data Overload

In the modern education landscape, educators are drowning in raw data (quiz scores, time spent, assignment completion) without the tools to convert it into personalized learning strategies. The core challenges were:

• Lack of Contextual Insight: Existing systems provided grades but failed to identify the root cause of low performance (e.g., a specific knowledge gap, time management issues, or engagement fatigue).

• Inefficient Teacher Intervention: Teachers spent excessive time manually cross-referencing disparate data points, delaying timely intervention for at-risk students.

• Low Student Self-Efficacy: Students lacked a clear, digestible view of their own progress and next best steps, leading to passive consumption rather than proactive engagement.

The mandate was to leverage AI to distill complex learning data into three clear outputs: performance, predictive risk, and personalized tasks.

2. The Solution: Predictive and Prescriptive Learning Intelligence

The EduCare dashboard was architected as a fast, responsive Single Page Application (SPA) designed for multi-stakeholder use (Student, Teacher, Admin).

• AI-Driven Mastery Scoring: Implemented rich visualizations (e.g., radar charts and sunburst diagrams) to map performance against specific competencies, showcasing not just what a student scored, but their current Mastery Level and identified Knowledge Gaps.

• Study Habit Analysis: Integrated custom charts to visualize behavioral data (time-on-task, study session consistency, content consumption patterns), allowing the AI to flag potential burnout or disengagement early.

• Predictive Risk Flagging: A prominent KPI card uses the AI model's output to assign a "Performance Risk Index," enabling teachers to instantly view and filter students who are statistically likely to fall behind in the next assessment.

• Adaptive Recommendation Engine: The dashboard serves up the AI’s prescriptive recommendations (e.g., "Review Module 3.2 on Supply Chain Fundamentals" or "Schedule 15 minutes of spaced repetition practice"), turning data analysis into an actionable to-do list.

3. The Design Process: The 360-Degree User Perspective

Our design methodology focused on delivering specialized data views for each user group while maintaining a consistent design system (facilitated by Tailwind CSS).

• Persona-Specific Dashboards:

  • Student View: Focused on motivation and clear next steps ("What should I do now?").

  • Teacher View: Focused on class-wide segmentation and intervention ("Who needs help and why?").

  • Admin View: Focused on longitudinal course efficacy and platform usage metrics.

• Data Translation: We employed TypeScript for strict data typing to ensure the mathematical accuracy of all performance metrics. A key design challenge was translating complex statistical scores (like the "Z-Score of Engagement") into simple, intuitive visual elements.

• Mobile-First Responsiveness: Given the high likelihood of student access via tablets and phones, the Tailwind CSS framework was critical in ensuring the dense data visualizations remained clean, legible, and fully responsive across all device breakpoints.

4. The Final Product: A Lift in Engagement and Performance

The EduCare AI Dashboard successfully centralized and personalized the learning experience. The tool provided clarity to students about their learning journey and efficiency to educators, shifting intervention from reactive grading to proactive coaching. Within the pilot program, data showed a:

• 15% Increase in Student Platform Engagement due to clearer, personalized goals.

• 12% Lift in Average Module Completion Rates for at-risk student groups.

• 20% Reduction in Teacher Preparation Time spent analyzing individual performance reports.