Learning tree -
Visualizing K3-K9
Mastery Paths
Designing a Hierarchical Progression System to Bridge Learning Gaps
project overview
project overview
project overview
Learning Tree is a system designed to visualize students’ learning journeys and skill development, transforming fragmented practice and answer data into a coherent, trackable learning path. Abstract learning progress is represented as a tree structure, allowing teachers to see where they are, what they’ve mastered, and what comes next.
At the same time, it enables teachers to quickly identify learning gaps and understand overall class progress. In this project, I defined core use cases grounded in real educational contexts, structured information hierarchy and interaction logic, and balanced playfulness with pedagogical rigor so learning progress becomes more than just data, but a growth experience that is understandable and motivating.
Learning Tree is a system designed to visualize students’ learning journeys and skill development, transforming fragmented practice and answer data into a coherent, trackable learning path. Abstract learning progress is represented as a tree structure, allowing teachers to see where they are, what they’ve mastered, and what comes next.
At the same time, it enables teachers to quickly identify learning gaps and understand overall class progress. In this project, I defined core use cases grounded in real educational contexts, structured information hierarchy and interaction logic, and balanced playfulness with pedagogical rigor so learning progress becomes more than just data, but a growth experience that is understandable and motivating.
Learning Tree is a system designed to visualize students’ learning journeys and skill development, transforming fragmented practice and answer data into a coherent, trackable learning path. Abstract learning progress is represented as a tree structure, allowing teachers to see where they are, what they’ve mastered, and what comes next.
At the same time, it enables teachers to quickly identify learning gaps and understand overall class progress. In this project, I defined core use cases grounded in real educational contexts, structured information hierarchy and interaction logic, and balanced playfulness with pedagogical rigor so learning progress becomes more than just data, but a growth experience that is understandable and motivating.
Problem
The lack of transparent tracking makes learning gaps nearly invisible, leaving both students and teachers without a clear roadmap for improvement.
The lack of transparent tracking makes learning gaps nearly invisible, leaving both students and teachers without a clear roadmap for improvement.
The lack of transparent tracking makes learning gaps nearly invisible, leaving both students and teachers without a clear roadmap for improvement.
project type
project type
project type
from 0 to 1
from 0 to 1
From 0 to 1
year
year
year
2025 (shipped)
my role
my role
my role
design lead and PM
design lead and pm
Design Lead and PM
duration
2 weeks
2 weeks
2 weeks
Co-designing with educators to transform complex learning standards into intuitive, branching progression maps.
Co-designing with educators to transform complex learning standards into intuitive, branching progression maps.
Validating the 'Learning Tree' logic through teacher workshops to ensure pedagogical accuracy and clarity.
Validating the 'Learning Tree' logic through teacher workshops to ensure pedagogical accuracy and clarity.
Pedagogical Alignment & Data Strategy
Pedagogical Alignment & Data Strategy
To ensure the Learning Tree is both accurate and intuitive, I conducted deep-dive workshops with educators to deconstruct diverse learning standards. A key challenge was addressing data inconsistency—specifically the 'learning gaps' where certain standards lacked predefined difficulty levels (Easy/Medium/Hard)."
"To prevent user confusion and maintain a high level of trust, I strategically curated the information hierarchy, opting to hide incomplete data points. This ensured that the resulting visual roadmap provides a clear, reliable, and actionable path for teachers, rather than overwhelming them with inconsistent metadata.
To ensure the Learning Tree is both accurate and intuitive, I conducted deep-dive workshops with educators to deconstruct diverse learning standards. A key challenge was addressing data inconsistency—specifically the 'learning gaps' where certain standards lacked predefined difficulty levels (Easy/Medium/Hard)." "To prevent user confusion and maintain a high level of trust, I strategically curated the information hierarchy, opting to hide incomplete data points. This ensured that the resulting visual roadmap provides a clear, reliable, and actionable path for teachers, rather than overwhelming them with inconsistent metadata.
To ensure the Learning Tree is both accurate and intuitive, I conducted deep-dive workshops with educators to deconstruct diverse learning standards. A key challenge was addressing data inconsistency—specifically the 'learning gaps' where certain standards lacked predefined difficulty levels (Easy/Medium/Hard)." "To prevent user confusion and maintain a high level of trust, I strategically curated the information hierarchy, opting to hide incomplete data points. This ensured that the resulting visual roadmap provides a clear, reliable, and actionable path for teachers, rather than overwhelming them with inconsistent metadata.
Contextual Interactions for Actionable Teaching
Contextual Interactions for Actionable Teaching
While teachers need a high-level overview of class performance to identify general trends, they also require immediate access to individual student data to provide targeted support.
The Solution: I implemented an interactive hover layer that bridges the gap between macro and micro views. While viewing the overall class progress on a specific standard, teachers can simply hover to reveal detailed standard descriptions and identify specific students within that group. This seamless transition allows educators to maintain their flow of analysis while gaining the granular insights necessary for personalized instruction.
While teachers need a high-level overview of class performance to identify general trends, they also require immediate access to individual student data to provide targeted support. The Solution: I implemented an interactive hover layer that bridges the gap between macro and micro views. While viewing the overall class progress on a specific standard, teachers can simply hover to reveal detailed standard descriptions and identify specific students within that group. This seamless transition allows educators to maintain their flow of analysis while gaining the granular insights necessary for personalized instruction.
Hierarchy & Progressive Disclosure - Deconstructing Academic Data from Macro to Micro
Hierarchy & Progressive Disclosure - Deconstructing Academic Data from Macro to Micro
To prevent information overload for educators, I architected a hierarchical data structure that follows the principle of progressive disclosure. Instead of presenting all data at once, the system deconstructs the curriculum in three logical steps:
Macro Level (The Tree): Teachers first see the high-level distribution of student performance across different learning domains.
Mid Level (Standard Drill-down): Clicking a specific standard node reveals a deeper layer, including its pedagogical description and the precise "Depth of Knowledge" required.
Micro Level (Actionable Details): The final layer provides specific student practice history and AI-generated questions, turning abstract standards into actionable classroom insights.
To prevent information overload for educators, I architected a hierarchical data structure that follows the principle of progressive disclosure. Instead of presenting all data at once, the system deconstructs the curriculum in three logical steps:
Macro Level (The Tree): Teachers first see the high-level distribution of student performance across different learning domains.
Mid Level (Standard Drill-down): Clicking a specific standard node reveals a deeper layer, including its pedagogical description and the precise "Depth of Knowledge" required.
Micro Level (Actionable Details): The final layer provides specific student practice history and AI-generated questions, turning abstract standards into actionable classroom insights.
Math/reading tree