Visual Algorithms • UX/UI Case Study

B-tree Insertion Visualization

Animation-first learning experience that explains how insertion works and why splits happen.

This project turns B-tree insertion into a clear, step-by-step visual narrative. Instead of jumping from code to a final tree, learners see each decision: where the key goes, when a node overflows, and how a split rebalances the tree.

Designed with HCI/UX principles (clarity, progressive disclosure, consistent feedback) so beginners can build a correct mental model before writing code.

Watch Demo

Quick Facts

Goal

Help beginners understand insertion + splits through visuals and short explanations.

Audience

CS beginners + non-CS learners studying data structures.

My Role

UX/UI design, visual storytelling, animation planning, implementation.

Tools

Manim (Python), web page design, captions + instructional flow.

Problem

Many students can memorize “insert then split,” but still don’t understand when a split happens and how the tree changes. Textbook diagrams often skip intermediate states, making it hard to form a correct mental model.

Solution

A step-by-step visualization that reveals insertion states in a consistent sequence:

Locate the target leaf (highlight path)
Insert the key (animated placement)
Detect overflow (clear warning state)
Split (promote median, redistribute keys)
Repeat upward when needed (progressive disclosure)

Key UX/UI Decisions

Progressive disclosure

Learners see one decision at a time to avoid cognitive overload (especially during splits).

Consistent visual language

Same highlight rules across steps: active path, active node, inserted key, promoted key.

Short teaching captions

Captions focus on “why this step happens” instead of repeating the algorithm text.

Accessibility-minded

Clear hierarchy, readable sizes, and avoiding color-only meaning (use shape/position + labels).

Demo / Media

Animation

This animation shows how keys are inserted into a B-tree while maintaining balance through node splitting and key promotion.

Process

Storyboard each insertion step (states + captions).
Define visual rules (highlight logic, typography hierarchy, spacing).
Animate with consistent transitions (insert → overflow → split).
Refine pacing based on where beginners get confused (especially root split).

Outcome

The final experience supports “mental model first” learning: learners can explain the reason for splits and predict the next tree state. This becomes a bridge to code implementation (pseudo-code + real code can be shown side-by-side in later iterations).

Next Steps

Add a “Try it” mode with predefined key sequences (beginner-friendly).
Add checkpoints (quick questions) to confirm understanding before continuing.
Optional AI helper: “Why did we split here?” with short, context-aware explanations.