Praxis UI Kit
Contextual Learning
What if course content had a contextual AI companion that understands learning design? A Figma UI kit exploring conversational interfaces built for education, not help desks.
42
Components
8
Interaction Patterns
AAA
WCAG Accessibility
100%
Figma Design System
Progress
Module 4 / 6
Objective
Identify aspiration risk factors in aged care
Building on your Module 3 work with thickened fluids — aspiration pneumonia occurs when food, liquid, or saliva enters the lungs. For aged care residents with dysphagia, key risk factors include...
How does this relate to the IDDSI levels we covered? I'm still unclear on Level 3 vs 4.
Good question — I flagged this from your earlier assessment. Level 3 (Liquidised) flows off a spoon but can't be piped. Level 4 (Pureed) holds its shape on a spoon...
A resident on Level 4 diet is coughing during meals. First action?
Client
Self-initiated
Industry
EdTech / eLearning
Service
UI/UX Design, eLearning
Year
2026
The Challenge
AI in learning is being done wrong
Every LMS is rushing to bolt on AI chat. But they're building the same generic help desk interface whether someone's ordering pizza or studying pharmacology. It sounds like compliance box-ticking — except now with a chatbot.
I build training for a living. My hammer is learning content. But not everything is a nail. After years of building compliance training for healthcare — and watching the industry treat training as a regulatory checkbox rather than capability building — I kept seeing the same gap: we measure "training delivered," not "learning achieved." And now AI is making that gap wider, faster.
My litmus test for whether learning content works: can someone apply this Monday morning? No existing AI chat interface was designed with that question in mind.
Context Blindness
Generic AI doesn't know where a learner is in their course journey. It treats every question as if the learner just walked in off the street.
No Pedagogical Intelligence
Current AI chat can explain, but it can't scaffold, detect knowledge gaps, or adapt difficulty. It answers — it doesn't teach.
Poor Learning Affordances
Chat UIs lack visual cues for learning actions — no way to signal "reflect on this", "practise this", "test yourself", or "go deeper".
Accessibility Gaps
Most AI chat UIs fail keyboard navigation, screen reader threading, and cognitive load management. Learners with disabilities are an afterthought.
The Solution
What I designed
Praxis is a 42-component Figma UI kit purpose-built for conversational learning interfaces. Every component was designed with pedagogical intent — grounded in Mayer's Multimedia Principles, Cognitive Load Theory, and Bloom's Taxonomy. Not just how it looks, but how it teaches.
Contextual Awareness Layer
Components that surface course progress, current learning objectives, and prior misconceptions. The AI companion always knows where the learner is and what they've already covered.
Pedagogical Interaction Patterns
Eight dedicated UI states that go beyond "answer mode" — Explain, Practise, Test, Reflect, Go Deeper, Simplify, Socratic, and Summarise. Each mode has distinct visual treatment so learners always know what kind of interaction they're in.
Learning Checkpoint System
Pause-and-reflect prompts and micro-assessments woven into the conversation flow. The companion doesn't just deliver information — it checks understanding at natural breakpoints.
Accessibility-First Design
Full keyboard navigation, screen reader threading with ARIA live regions, cognitive load management through progressive disclosure, and WCAG AAA contrast ratios throughout.
Try It Yourself
Don't take my word for it
This is a live AI demo powered by the Praxis system prompt. Ask questions about aspiration risk management and see how a contextual learning companion actually behaves — eight pedagogical modes, real-time context awareness, and conversation memory.
Course Progress
Current Objective
Identify risk factors for aspiration pneumonia in aged care residents
Covered Topics
Active Mode
Welcome to Module 4. You've done solid work through the first three modules — your dysphagia fundamentals are strong, though I noticed you found the IDDSI levels tricky (60% on that section). No worries, we'll build on that here. Ready to explore aspiration risk factors?
This is a concept demo. Praxis is responding through a pre-configured system prompt — the same approach that would power a production learning companion. Responses are generated by AI and may not always be clinically accurate.
Components
The system
8 Interaction Modes
Each mode has distinct colour coding, icon, and interaction behaviour — learners always know what kind of thinking they're being asked to do.
Contextual Awareness
Learner Profile
Jordan Chen
Personal Care Worker — 3 weeks
Knowledge Map
Misconception Detected
Confusing IDDSI Level 3 and Level 4 — reinforcement queued
Component System — 42 Components, 200+ Variants
Chat Bubbles
AI response...
User query
Checkpoints
Progress
Focus States
WCAG AAA — 3px visible focus ring
The Difference
Before & after
Context Awareness
From zero course awareness to full learning journey integration
Pedagogical Modes
From "answer" to explain, practise, test, reflect, go deeper, simplify, Socratic, summarise
Design Outcomes
- 42 production-ready Figma components with auto-layout and variants
- WCAG AAA compliance across all components — contrast, keyboard nav, screen reader support
- Cognitive load management through progressive disclosure and visual hierarchy
- Learning checkpoint system with micro-assessment components embedded in conversation flow
"Tools serve the craft. Craft doesn't serve the tools. The question isn't whether AI can answer a learner's question — it's whether the learner can apply the answer Monday morning."
Nic Gallardo
On the craft
Skills Demonstrated
Start your project
Need a learning interface that
actually understands learning?
Whether you need a UI/UX design system, an eLearning platform, or a learning experience that goes beyond content delivery — I'd love to help.