Deepfakes Media Literacy Case Study | Pure Experience Design

The work

A learning module that teaches students to question what they watch — one screen, one idea at a time.

Misinformation moves fast, and deepfakes make it convincing. Designed and built for the MIT Center for Advanced Virtuality, this module slows it down in three connected parts: what misinformation is, how deepfakes are made and spotted, and In Event of Moon Disaster — the Center’s award-winning deepfake of Richard Nixon.

3

Connected parts: misinformation in context, Deepfakes 101 and Apollo 11 revisited.

53

Screens, each holding one idea, with its sources and a progress count.

4

Educator resources — a bibliography, a syllabus and two design prompts — for teachers to adapt.

I

One idea per screen

Long reading becomes a sequence. Each screen pairs a single idea with its image, the reference right under the claim, and a count (15 of 25) so a student always knows how far there is to go. Most screens carry a live animation made for the idea it explains.

Hollywood magic Part II · screen 6

II

Every part has its own world

Each part opens on a full-screen animation that sets the subject before a word is read.

Misinformation in Our Midst Part I cover Move the pointer

Deepfakes 101 Part II cover Move the pointer

III

One switch, two themes

The module opens dark so the animation can lead. A student who would rather read on a light page flips one switch in the header, and every screen after it follows.

Part II, screen 6, Hollywood Magic, in the dark theme: a black header with the white MIT mark and a sun switch, the text over asteroids and the Earth, and a black footer with a teal Part II label and a teal Continue button. — Theme switch

The same screen with the light header and footer: a white header with the black MIT mark and a moon switch, and a pale gray footer with an MIT red Part II label, an MIT red progress bar and an MIT red Continue button. — Theme switch

IV

Deepfake: deep learning + fake

The technology is explained in plain words before it is judged: what deep learning is, how a network learns a face and why that makes a convincing fake. Beside the text, an autoencoder runs: a face is compressed through the layers of a network and rebuilt as someone else.

Autoencoder Part II · screen 3 Move the pointer to tilt the layers

Face swap Part II · screen 15 Move the pointer to turn the head

V

The case study is a deepfake

Part III turns to In Event of Moon Disaster, in which a synthetic Nixon reads the speech prepared in case Apollo 11 failed. Students watch it closely, then see how it was made. The stakes are on-screen: in the project’s online quiz, 49% of visitors believed Nixon’s altered face was real, and 65% believed his voice.

Part III, screen 1 of 10: the introduction to In Event of Moon Disaster above a photograph of the Apollo 11 landing, beside archival footage of Richard Nixon at his desk, a face-tracking mesh locked onto his face.

Keeping alert Part III · screen 8 Move the pointer

VI

Every video captioned, line by line

Auto captions aren’t enough for MIT: they don’t meet the ADA. All 13 YouTube and Vimeo videos now have accurate, proofread captions. Under each video, a transcript shows five lines at a time and highlights the one being spoken; a click on any line jumps the video there. A second panel describes what’s on-screen. The captions come from a free tool built on Whisper, OpenAI’s open-source speech-recognition model. It captions a whole folder in one go, re-checks quiet passages and filters out phrases Whisper invents. A proofread-and-apply step keeps the timing.

Part I, screen 12 of 18: a 1943 government film under an open Captions panel, five lines of the transcript with the spoken line highlighted in teal, and an open Video description panel describing the film’s title card and scenes.

Each idea gets motion made for it.

Deepfakes in elections Part II · screen 11 Move the pointer

An increasing threat Part II · screen 12 Move the pointer

Digital forensics Part II · screen 18 Move the pointer to scan

Motion, by the numbers

Motion made by hand, with no animation library.

61

Pieces of live motion: 38 custom animations, 18 photo-animation styles, 4 stylesheet sequences and a video background.

60/68

Pages with an animated background. The rest use subtle text and panel motion.

8,400

Lines of JavaScript with no outside libraries, plus about 1,550 lines of styling.

11

Custom-made assets, from a 3D face image and wing cut-outs to a cleaned-up engraving and a TV-screen mask.

Accessibility

MIT asks for WCAG 2.1 AA on all of its digital content, and for captions that are accurate and synchronized. The module goes to WCAG 2.2 AA, on desktop and on phones. Its captions, transcripts and video descriptions were generated to adhere to the requirements. Learn more about MIT’s digital accessibility guidelines (opens in a new tab)

Brand guidelines

Dark by default, MIT red in the light.

The module opens dark so the animation can lead: DIN Condensed titles in teal, teal for links and the way forward, amber for key terms and Roboto Mono for every word a student reads. A switch in the header turns the header and footer light, in MIT’s own red and grays, and the choice is remembered on every screen.

Typefaces

Display face

DIN Condensed

700

Text face

Roboto Mono

400
600

Dark theme · the default

Ink Grounds On white 19.67:1 AAA #0B0B0C
Paper Body text On white 1.19:1 Fail With ink 16.52:1 AAA #ECEBEA
Muted References, the screen count On white 1.97:1 Fail With ink 10:1 AAA #BCB8B6
Teal Titles, links, the Part label On white 2.28:1 Fail With ink 8.65:1 AAA #3DBDBF
Deep teal Continue, in white type White text on the button 7.42:1 AAA #0F5F61
Amber Key terms, focus rings, the lockup On white 1.53:1 Fail With ink 12.84:1 AAA #FFC94A

Light header and footer · MIT

MIT Dark Red The Part label and Continue in white type; focus rings White text on the button 11.89:1 AAA #750014
Deeper red Continue on hover White text on the button 14.57:1 AAA #5A000F
Ink Titles, Previous On white 15.75:1 AAA #212326
Black The MIT mark, the switch, the count On white 21:1 AAA #000000

In use

Type · DIN Condensed and Roboto Mono

Hollywood Magic

Deepfakes can look similar to, but are ultimately different from, a lot of Hollywood computer-generated imagery (CGI).

The module consists of three interconnected sections.

Title · DIN Condensed: Bold 40, teal
Body · Roboto Mono: Regular 17.5 / 1.85
Lead · Roboto Mono: Bold, teal
Count · Roboto Mono: 12 · caps · +1.44px

Footer and theme switch

‹ PreviousPart IIDeepfakes 101· 15 of 2515 / 25Continue

DarkLight

Motion

Quiet, slow and always explaining something. The motion runs behind one idea per screen, eases instead of snapping, and stops the moment it isn’t needed.

Ease toward the pointer

Layers follow the pointer and never snap: each frame closes part of the gap, so they glide and settle. Off the canvas, they drift home.

Breathe to a level

Screens, lights and readouts don’t switch; they swell or fade toward a new level, slower than the pointer.

One signal at a time

Change travels: a pulse leaves a lit screen along a line and switches the next one on. One idea moving, never a burst.

Settle to still

Every animation has a finished frame. Reduced motion shows it; off-screen or in a hidden tab, the animation stops.

Scope

UX strategy and information architecture
Screen-by-screen reading experience
UI and visual design
WordPress development on WP Engine
Canvas animation and motion design
Accessibility to WCAG 2.2 AA, with captions, transcripts and video descriptions
A light and dark theme in MIT’s colors
SEO: page titles, structured data and llms.txt

Teaching students to see through deepfakes.