Maggie HTTN
UX Research & Concept Design

Algorithm Animator

Concept poster for an educational UX tool that combines step-by-step algorithm visualization with an AI tutor for questions, hints, and reflection.

This concept explores a learning flow where a student watches an algorithm evolve (state changes over time), asks targeted questions, and completes a quick “check-your-understanding” task.

View Poster UXUI-Pedagogy-HCI

Project Snapshot

Goal
Design an educational interface that makes complex algorithms learnable through guided visualization + AI support.
Deliverable
A concept poster (Dijkstra example) showing a dual-view interface and a storyboarded learning sequence.
My Role
UX concept + information architecture + interaction flow + visual design of the poster.
Tools
Illustrator / layout tools, algorithm knowledge, UX/HCI principles, storyboard reasoning.

Poster / Concept Layout

Algorithm Animator — concept poster showing an AI tutor interface and a step-by-step Dijkstra storyboard

What the Poster Shows

The concept pairs a simple “academy” interface (animation player + AI tutor prompts) with a storyboard that walks through algorithm steps, showing how the shortest-path tree grows over time.

AI Tutor Interface — UX/UI Concept Mockup (Dijkstra Example)

The interface is designed to support two learning modes: watch (follow the algorithm visually) and ask (get help exactly when confusion happens).

Dual-view layout
One side focuses on controls + prompts, while the other emphasizes the visualization/storyboard. This separation reduces clutter and keeps attention on the “state changes” learners must track.
AI-assisted learning
The chatbot supports clarifications (“What does relax mean?”), real-world context (“Why does this matter?”), and micro-hints when a learner is stuck.
Scaffolded steps
The storyboard breaks the algorithm into labeled steps so students can follow updates (visited nodes, distance table, selected edges) without losing the narrative.
Assessment hook
A simple prompt (e.g., “draw the shortest-path tree”) turns viewing into an action that checks understanding.

How This Concept Supports Teaching UX

  • Learning flow design: from explanation → guided steps → learner task.
  • Information hierarchy: what belongs in the UI panel vs. the visualization area.
  • Human-AI interaction: designing prompts, help states, and safe feedback loops for learning.
  • Design critique ready: the poster makes assumptions visible and testable (great for classroom discussion).

UX/UI • Pedagogy • HCI

A short teaching-focused rationale: what I designed, how I structured learning, and the interaction principles behind it.

UX/UI Design
  • Information architecture: concept → storyboard steps → learner task (assessment hook).
  • Visual hierarchy: the poster uses clear sections so viewers scan intent → flow → outcome quickly.
  • Clarity-first layout: dual-view structure separates “controls/questions” from “visual reasoning.”
  • Consistency: aligns with the same teaching pattern used across your algorithm pages.
  • Accessibility-minded: simplified shapes + readable spacing support fast comprehension in a classroom setting.
Pedagogy
  • Scaffolded learning: label steps so learners track “what changed” each move.
  • Worked examples: the storyboard functions as a guided example before independent practice.
  • Cognitive load: chunking reduces overload (one step = one visual state).
  • Prompted reflection: AI questions encourage explanation, not just watching.
  • Self-check: an explicit task (“extract the shortest-path tree”) confirms understanding.
HCI Principles
  • Mental models: keeps the learner’s model aligned with the algorithm’s state changes.
  • Recognition over recall: step labels + repeated visual patterns reduce memorization burden.
  • Help at the moment of need: AI support reduces frustration when the learner gets stuck.
  • Feedback cues: each step visually shows cause → effect (a decision changes distances/edges).
  • Usability heuristics: clarity, consistency, predictable structure—ideal for classroom critique.

Teaching strategy: scaffold → demonstrate → prompt questions → apply → self-check. This supports beginner confidence while keeping the interface simple and consistent.