A UX product design and creative-technology case study, turning an abstract, text-heavy certification (the FAA Part 107 drone exam) into something you can see, fly through, and now step inside in VR.
The problem nobody enjoys
To fly a drone commercially in the United States, you need an FAA Part 107 Remote Pilot Certificate. To get it, you pass a 60-question knowledge exam. And the single hardest part of that exam — the part where most people lose points — is airspace: invisible, stacked, three-dimensional volumes of regulated sky, taught almost everywhere as dense paragraphs and flat diagrams.
That’s a UX problem hiding inside a regulatory one. Airspace is inherently spatial, but it’s taught in 2D and prose. Learners are asked to hold a mental model of an “upside-down wedding cake” of controlled airspace, the 400-foot ceiling, line-of-sight rules, and cloud clearances — entirely in their heads, while reading.
I built Airspace Academy to close that gap: a free, source-cited, interactive study tool that teaches Part 107 by showing the rules in a live 3D scene instead of describing them. As a product designer and creative technologist, I owned the whole arc — the research, the information architecture, the interaction and motion design, the 3D engineering, the content accuracy system, the SEO and growth surface, accessibility, and most recently an immersive WebXR mode.
The core product bet: show, don’t tell
The guiding principle was simple and ruthless: if a rule can be shown, never just describe it.
- Controlled airspace? Render the actual volumes and let the learner fly a drone in and out of them.
- The 400 ft AGL ceiling? Draw it as a plane the drone bumps against.
- Visual line of sight and cloud clearance? Visualize the buffer and warn, in 3D, the moment it’s violated.
Every lesson maps to something you can manipulate in the scene. This is scenario-based learning applied to a knowledge exam — the same reason simulators beat textbooks for procedural skills. The learner builds an embodied, spatial memory of the rules, which is exactly what the exam (and real flying) demands.
Three product decisions made it usable, not just impressive:
- Free, with no signup. Most Part 107 prep is a paywalled course ($100–$300) or a wall of text. Removing the account and the price tag removes the two biggest points of friction between a curious learner and their first “aha.” Friction is a UX choice; I chose to spend it elsewhere.
- Source-cited by design. In an aviation tool, a wrong number can get someone violated or hurt. So accuracy is a system, not a vibe: every lesson and practice question cites the FAA rule or eCFR section it teaches, content carries review dates, and unverifiable claims are flagged in the UI rather than guessed. Trust is part of the experience.
- Progressive disclosure everywhere. Short plain-English summary first → “tell me more” → exam phrasing → sources. The learner controls depth. Cognitive load stays low.
The hardest design decision: scale
Here’s the kind of problem that looks like engineering but is really design.
Drone operations happen in hundreds of feet. Controlled airspace spans tens of miles — roughly 75× larger in every direction. There is no single literal scale at which both are legible at once. At true scale, the drone is an invisible speck; the “wedding cake” collapses into a flat disc (real airspace is ~20–40× wider than it is tall, which is exactly why every FAA chart already exaggerates the vertical).
I resolved it the way you resolve most hard product tradeoffs: make the distortion intentional, honest, and documented. The scene uses a deliberate multi-scale model — true vertical and horizontal scales for the things a pilot reasons about (altitude, distance, line of sight), with a documented vertical exaggeration so the airspace structure stays readable, and a plain-English “Scale & accuracy” explainer that tells the learner exactly what’s accurate and what’s illustrative.
The lesson I keep relearning as a creative technologist: the right call is rarely “physically correct.” It’s “correct for what the user is trying to understand.”
Craft details that carry the experience
- Real-time 3D on the open web. The scene runs in vanilla JavaScript and Three.js as a static, dependency-light site — no framework, no build step, no backend. That keeps it fast, durable, cheap to host, and trivially shareable: the whole product is a URL.
- Diegetic, low-chrome interface. Wherever possible the UI lives in the world — tap any object (drone, tower, cloud, runway, even a tree) and a contextual card explains the rule tied to it, with citations. Fewer floating menus, more learning anchored to things.
- Ambient sound that teaches presence. A procedural soundscape (synthesized, no audio files, fully private) adds low traffic and the occasional aircraft overhead, and birdsong that swells as you move near the treeline — small environmental storytelling that makes the scene feel like a real place you’re standing in.
- Honest “example” labeling. Plausible-but-fictional data (airport codes, frequencies, an N-number) is clearly badged as EXAMPLE, so the format is teachable without ever masquerading as real-world fact.
The frontier: a comfort-first VR “training deck”
The newest chapter is immersive WebXR, and it’s where the product principles got tested hardest. VR makes everything more visceral — and more dangerous to usability. So I wrote the brief before the code: success is measured by how fast a first-time user understands what to do, how comfortable it feels, and how much they retain — not by technical flash.
That produced specific, opinionated decisions:
- World-in-miniature, not life-size. You stand on a calm training deck with the entire airspace as a table-top model in front of you. You see everything at once and always know where you are — the number-one orientation goal. (A literal life-size view would have buried the drone and broken “everything visible together.”)
- Comfort is non-negotiable. Locomotion is instant teleport and instant snap-turn only — no smooth movement, no acceleration, no camera animation. No vestibular mismatch means no motion sickness, and no physical walking is ever required. The most comfortable interaction is often the most restrained one.
- Orientation in the first 30 seconds. You spawn facing the model; the drone gently pulses; a single-line welcome appears and politely disappears after your first teleport; your menu lives on your hand where it’s discoverable. One-press “Find drone” and “Return to pilot” mean you can never get lost.
- Show, don’t tell — in space. Point at any volume and a short, plain-language concept appears beside it. No walls of text in a headset, ever.
It’s a foundation, scoped deliberately: nail orientation, comfort, and spatial learning first; layer in full guided lessons next. Restraint is the design.
Accessibility as a first-class requirement
Accessibility wasn’t a final checklist; it was a constraint throughout, across web, desktop, and VR:
- WCAG 2.1 AA targets: full keyboard reachability, visible focus, skip links, live regions for warnings and quiz feedback, and a text-equivalent panel that describes what the 3D scene is currently showing.
- Color is never the only signal — warnings pair an icon and text. High-contrast and reduced-motion modes are first-class toggles. Interaction language even adapts to the device (“tap” vs “click”).
- In VR: seated and standing both work, recenter and handedness are handled, reduced-motion is honored, spatial text is high-contrast and short, and nothing requires you to physically move.
Good learning tools have to work for the widest possible audience. That’s not charity; it’s the job.
Discoverability is part of the product
A learning tool nobody can find doesn’t teach anyone. So I treated growth as a design surface: a clean information architecture, structured data so search engines and AI assistants understand it’s a free, independent Part 107 resource, and a small set of genuinely useful, crawlable guides (airspace classes, sectional charts, weather, LAANC, “how to pass”) that meet learners at the exact query they’re typing. The differentiator — free, interactive, no signup, source-cited — is the same whether you’re reading the homepage or an AI is summarizing it.
Built with vanilla JavaScript, Three.js, and WebXR as a fast, accessible, source-cited static web app — designed, engineered, and shipped end-to-end.
