Visual Algorithms • UX/UI Case Study

Designing a Clearer B-tree Deletion Experience

Reducing confusion in a complex tree operation through state visibility, motion design, and rule-based visual guidance.

B-tree deletion is one of the hardest moments for learners because several structural changes can happen at once. Static diagrams often show the result, but not the reasoning or the transition that led there.

This project focuses on making deletion easier to follow by showing exactly what changed, why it changed, and how the tree reorganizes after underflow. The design prioritizes visibility of system state, consistent layout, and clear visual feedback.

Watch Demo

Quick Facts

Project Goal

Make a difficult deletion workflow easier to track through visual structure, motion, and consistent interaction cues.

Audience

CS beginners and visually oriented learners studying balanced search trees.

My Role

UX/UI design, visual system design, instructional flow, animation planning, and implementation.

Tools

Manim (Python), web presentation, caption system, and rule-based visual sequencing.

User Problem

Learners often lose track of what changed during B-tree deletion. They may understand that a key was removed, but not why a borrow or merge happened next, which parent key moved, or how the tree regained balance. The main UX problem is not just content difficulty — it is low visibility of system state during structural change.

UX Challenge

Make hidden state visible

Underflow, parent separators, and sibling relationships are easy to lose in static explanations. The interface needed to make those relationships immediately readable.

Clarify multi-step changes

Deletion can trigger several dependent changes. Users need to see cause and effect, not just the final corrected tree.

Preserve orientation during motion

When keys and nodes move, the layout must remain stable enough that users do not lose their mental map of the tree.

Support rule recognition

The experience needed to help users distinguish between borrow, merge, replace, and root shrink without requiring them to infer the rule from memory alone.

Key UX Decisions

Deletion highlight: the removed key is visually emphasized so the initiating action is never ambiguous.
Underflow signal: a node that drops below the minimum is clearly marked to show the exact moment a repair is required.
Rule callouts: short captions such as Borrow, Merge, Replace, and Shrink reduce the need for users to infer the current operation.
Smooth before/after transitions: motion is used to show what moved rather than simply replacing one tree state with another.
Consistent spatial structure: node layout remains as stable as possible across steps to preserve orientation.

Demo

Interaction Focus

The animation is designed to help users track deletion, detect underflow, and follow the resulting repair action without losing sight of the overall tree structure.

Design Process

Mapped user confusion points around deletion, underflow, and rebalancing transitions.
Converted textbook cases into visual states that could be shown consistently across the experience.
Designed motion cues to reveal which keys and nodes moved during each repair.
Refined pacing and captions so the hardest transitions were visible without overwhelming the user.

Accessibility & Learnability

Consistent positioning reduces visual search during complex transitions.
Short text callouts support comprehension without overcrowding the screen.
Non-color-dependent cues help communicate state changes beyond color alone.
Paced animation gives users time to process cause-and-effect relationships.

Outcome

The final design makes B-tree deletion more legible by showing what changed, why it changed, and how balance was restored. Instead of treating deletion as a sudden structural jump, the experience presents it as a trackable sequence of visible states and guided transitions.