Compare the prototype approaches

Six ways to navigate the same speaker-and-tools learning journey. Open a prototype to try its interaction, or select a screenshot to inspect the captured state at full size.

Desktop views

Illustrated encyclopedia with magnetic assembly selected and separate part-making links — **Encyclopedia · parts and making paths**Open prototype ↗

Animation prototype with the current making step, diagram and tool rack — **Animation window · movement and tools**Open prototype ↗

Speaker making step with an alignment fixture, linked parts and progress controls — **Scroll · tools in the making scene**Open prototype ↗

Exploded speaker assembly with its current making step and navigation — **Zoom · three-dimensional making routes**Open prototype ↗

Connected canvas station showing the coil and membrane with making links and a next-step control — **Canvas · connected making stations**Open prototype ↗

Expanded speaker card beneath its collapsed phone ancestor — **Stack · collapse, open and return**Open prototype ↗

Phone-sized views

Phone-sized encyclopedia view of the speaker and a selected part — **Encyclopedia · selected speaker part**Open prototype ↗

Phone-sized coil-to-wire input view with the caller path retained — **Animation window · coil input**Open prototype ↗

Phone-sized speaker scene with the active tool, making step and progress control — **Scroll · making step and scene**Open prototype ↗

Phone-sized exploded speaker assembly with part labels and step navigation — **Zoom · speaker making route**Open prototype ↗

Phone-sized canvas making station with part links, explanatory text and a next-step control — **Canvas · travel between stations**Open prototype ↗

Phone-sized speaker view with its collapsed ancestor and making content — **Stack · speaker and ancestry**Open prototype ↗

The narrow-screen images show phone-sized layouts captured in Chrome. They do not establish native touch or device testing. These are selected prototype states, and stand-in content remains marked in the live prototypes; a still image cannot demonstrate the full animation or return behavior.