UX Research • Concept Design

Algorithm Animator

Concept Poster for an Educational UX Tool

This concept poster was created for my graduate Usability Engineering course using a professor-provided LUMA template. It defines an interactive educational tool called Algorithm Animator, designed to help students and educators—especially those from non-computer science backgrounds—understand abstract algorithms through step-by-step animations.

I used a LUMA-style concept poster to explore the problem-solution space visually. The poster format also became a teaching tool: it fits users, problem, value, risks, metrics, and process on one page.

View Poster UXUI-Pedagogy-HCI

What the Poster Shows

User-Centered Framing

Starts with “Who is it for?” to ground the concept in real learner needs (students + educators, CS and non-CS).

Problem + Value Proposition

Clearly defines the pain point (“too abstract”) and the solution (“interactive animations” that break down logic).

Visual Thinking + Communication

Uses simple side-by-side illustrations (textbook vs animation) to teach the power of visual storytelling in UX.

Research + Prototyping Mindset

Notes risks, prototype ideas (step-by-step playback, AI help chat), and success metrics (pre/post tests, feedback).

Iterative Process

Shows a clear loop: Research → Sketch → Prototype → Test → Refine → Launch, aligned with project-based UX teaching.

Concept Poster

Animation

A one-page concept map: users, problem, big idea, risks, prototype plan, success metrics, and process.

How I Use This as a Teaching Assignment

Template for Student Pitches

Students fill the same sections (users, problem, value, risks, metrics, process) to pitch an educational tool idea.

Research Questions

We brainstorm how to test comprehension, what feedback to collect, and what “success” means for learning UX tools.

Low-Fidelity Prototypes

Teams sketch one interaction (step playback, hints, checkpoints) and run quick peer testing for clarity.

Visual Clarity Practice

Students refine one “box” of the poster to communicate complex ideas with minimal text and strong hierarchy.

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: users → problem → big idea → risks → prototype plan → metrics → process.
Visual hierarchy: one concept per panel so readers scan quickly without losing the narrative.
Clarity-first communication: simple language and short phrases reduce cognitive load for mixed audiences.
Teaching-ready format: one-page poster supports presentation, critique, and studio-style discussion.
Accessibility: clean layout + strong spacing improves readability when projected or printed.

Pedagogy

Scaffolded thinking: start with audience + problem before moving to solutions and features.
Three-act structure: what’s the need → what’s the idea → how we validate and iterate.
Active learning: students can remake the poster for a different tool or learner group as an assignment.
Reflection: risks + metrics force students to justify design decisions, not just “make screens.”
Assessment mindset: success metrics encourage measurable learning outcomes (not only aesthetics).

HCI Principles

User needs first: the concept is framed around learners’ pain points (abstractness, comprehension gaps).
Reduce cognitive load: step-by-step animation + chunking supports understanding over memorization.
Feedback + guidance: prototype ideas (AI help, checkpoints) support error recovery and confidence.
Evaluation plan: pre/post checks + user feedback reflect evidence-based iteration.
Usability heuristics: clarity, consistency, and learnability are baked into the concept definition.

Teaching strategy: frame → hypothesize → prototype → test → refine. This trains students to connect UX theory to real educational interaction design.