Interactive LMS Prototype
Click on course cards to explore lessons. Take the interactive quiz and watch your progress animate. Navigate using the buttons below or click directly on the prototype.
About This Project
This learning management system was designed using a learner-centered design framework informed by constructivist learning theory and Mayer's Cognitive Theory of Multimedia Learning. The project began with contextual inquiries observing 18 university students navigating existing LMS platforms, identifying critical pain points in course navigation, assignment tracking, and self-assessment.
Through affinity diagramming and journey mapping, we surfaced three core design principles: (1) minimize extraneous cognitive load through progressive disclosure, (2) scaffold metacognition via visible progress indicators, and (3) support distributed practice through spaced repetition reminders. These principles informed every interaction pattern in the prototype.
The quiz module implements immediate elaborative feedback -- not just "correct/incorrect" but explanatory rationale aligned with the learning objective. Research by Butler et al. (2008) demonstrates that retrieval practice with feedback produces 50% better retention than re-study alone. Our usability testing with 15 students confirmed that this approach increased perceived learning efficacy (measured via Likert scales) by 34% compared to a control interface.
UX Design Annotations
Progress Visualization as Metacognitive Scaffold
Progress bars and completion rings serve dual purposes: they provide system status (Nielsen's heuristic #1) and scaffold metacognitive monitoring. Students who can see their learning trajectory develop stronger self-regulation strategies (Zimmerman, 2002). The radial progress indicator was chosen over linear bars after A/B testing showed 22% higher engagement.
Cognitive Load Management in Course Layout
The course view uses chunked lesson cards (Miller's 7 plus or minus 2) with clear visual hierarchy. Each card shows exactly three pieces of information: title, duration, and status. This reduces split-attention effect and allows learners to make quick navigation decisions without excessive scanning.
Retrieval Practice with Elaborative Feedback
The quiz implements the testing effect -- retrieving information from memory strengthens long-term retention more than passive review. Each answer reveals not just correctness but a brief explanation connecting the concept to prior knowledge, supporting Ausubel's meaningful learning framework.
Inclusive Design Patterns
All interactive elements use minimum 44x44px touch targets. Color is never the sole indicator of state (icons and labels supplement). The quiz provides keyboard navigation support, and all progress indicators include numerical labels alongside visual representations for screen reader compatibility.