Ali Mrani Alaoui·Portfolio

Mission Ops Dashboard — A Space Course for Curious 12-Year-Olds

A custom interactive dashboard at the centre of a K-12 space course, with a world map, hotspot events, telemetry, an activity feed, and a 3D orbital globe.

Interactive CourseCustom ComponentsK-12 STEM
Industry
K-12 STEM Course
Timeline
10 weeks
Tools
Articulate Rise 360, Veo 3.1, H5P, Custom code
A space course built for curious 12-year-olds.
An interactive world map at the core of the dashboard.
Hotspots reveal mission events tied to real-world cities.
A custom kit of interactive components for every lesson.
Subtle data visualizations throughout, including a data-stream waveform.
A live-style activity feed layered over the world map.
A 3D globe traces the exact path the satellite takes around Earth.

Project Overview

A K-12 STEM edtech studio that had run a successful chemistry course and wanted to launch a space course built for curious 12-year-olds. They wanted the dashboard to BE the course, not a sidebar to a slide deck, and they needed it to ship into Schoology and Google Classroom without IT involvement.

The brief was a 6-week curriculum delivered as a single interactive dashboard, not a sequence of pages with embedded media. The hero promise — a space course built for curious 12-year-olds — had to drive every design choice, from the typography to the way hotspots reveal mission events.

The mission control screen pairs an interactive world map with hotspots tied to real cities, a custom kit of components, subtle data visualizations, a live-style activity feed, and a 3D globe tracing the satellite's path. Every lesson is a configuration of the same pieces, so the dashboard grows without rebuilds.

The aerospace educator on the team reviewed every hotspot, orbit path, and telemetry label so the dashboard looks like an ops console without lying to students. Lessons are authored as JSON configurations of the same components, not as bespoke pages, so the content team can ship without touching code.

What's Inside

6-week curriculum

Orbital mechanics, satellite ops, mission planning, communications, anomaly response, debrief.

Interactive world map

With mission-event hotspots tied to real cities and per-event briefings.

3D orbital globe

Traces the exact path the satellite takes around Earth.

Live-style activity feed

Event log layered over the world map, with live-feel time-coded events.

Subtle data visualization strip

Data-stream waveform and telemetry cards across the bottom.

Component kit

Data cards, hotspots, mini-maps, event log entries — reusable across all 6 weeks.

What the Client Provided

  • A 40-page space curriculum brief (PDF) authored by the studio's curriculum lead
  • Review notes from the aerospace educator on the studio's failed first prototype
  • Public satellite-orbit data referenced for the orbital globe
  • Loom walkthrough from the studio's head of product walking through the hero promise
  • Brand guidelines and an existing illustration library from the chemistry course

Design and Build Process

01

Hero Promise Workshop

Locked the one-line promise: a space course built for curious 12-year-olds. Every subsequent design choice had to earn its place against that line.

02

Dashboard System Design

Designed the dashboard as a system: world map, hotspots, data cards, event feed, 3D globe, data-stream strip. Every lesson is a configuration of these pieces.

03

Component Build

Built each component in React with strict prop typing so lessons could be authored as JSON without touching code. Content team can ship a lesson without a deploy.

04

Content Validation

Cross-checked every hotspot, orbit path, and telemetry label against authoritative aerospace sources. We dropped two lessons that did not survive review and rewrote the satellite-orbit lesson twice.

05

Classroom Pilot

Piloted with three middle school classes. Cut onboarding from 4 screens to 1 after watching kids skip straight to the map.

Tools and Stack

AI Engine
Anthropic Claude and OpenAI for lesson authoring assist.
AI Video
Veo 3.1 for mission briefing clips and B-roll generation.
AI Images
Midjourney v7 for dashboard hotspot art and texture sources.
Authoring
Articulate Rise 360 for the lesson wrappers, H5P for supporting knowledge checks.
Custom code
Custom-built interactive dashboard with map, hotspots, 3D globe, activity feed, and data viz.
Delivery
Embedded directly into the studio's course website, with SCORM 1.2 + 2004 packages for Schoology, Google Classroom, and LearnDash.

Deliverables

  • Live dashboard (web app)
  • 6 weeks of lesson configurations authored as JSON
  • Reusable component library (map, globe, hotspots, feed, data cards)
  • Lesson authoring guide for the studio's content team
  • Teacher-facing weekly lesson packet (PDF)
  • Embedded directly into the studio's course website, with SCORM 1.2 + 2004 packages for Schoology, Google Classroom, and LearnDash
  • Source files and asset library