The Thesis: "The algorithm has become the new syllabus." Content creators are accidentally better instructional designers than most instructional designers — because the algorithm taught them what works.
This is a walkthrough of how I built The People's Professors — an interactive nano-learning course that teaches instructional designers to apply five TikTok creator strategies to workplace learning.
Not a deck. Not a report. A real build log, in the aesthetic of the thing it's describing.
Five steps. One very weird capstone. ✨The course started with a provocation: some of the most effective teachers on the planet have zero training in pedagogy. They've never heard of ADDIE. They're reaching more learners in 60 seconds than most corporate training reaches in a year.
They're baristas explaining latte art. Mechanics troubleshooting engines. Gamers breaking down strategy. Between ads for teeth whitening and cat videos.
They are the People's Professors.IDs default to lengthy eLearning modules. Learners disengage. Orgs wonder why retention is low. The format doesn't match how people actually consume information anymore.
TikTok educators teach complex skills in 60 seconds flat. The constraint forces precision. Khlaif & Salha (2021) studied this — it works. The algorithm rewarded what learning science already knew.
Five creator techniques — backed by research, translated for the workplace:
each one earned as a collectible sticker ✨
Grounded in Mayer's Multimedia Principles, Merrill's First Principles, Vygotsky's scaffolding theory, Khlaif & Salha (2021) on TikTok as nano-learning, and Jenkins et al. (2009) on participatory culture.
The zine aesthetic isn't decoration — it's the argument made visible. Zines and TikTok are both grassroots publishing that bypasses gatekeepers. The DIY look connects them intentionally.
readable over decorative. meaningful over random.The medium reinforces the message. A slick, corporate-looking course about democratized education would be self-contradictory. The handmade feel IS the thesis, visually.
Every "messy" element is intentional — rotation tokens, offset shadows, tape pseudo-elements, torn paper clip-paths. Controlled imperfection.
Riso printing colors — saturated, slightly imperfect, limited palette. Used intentionally, not everywhere. Max 2–3 accent colors per screen.
Permanent Marker
Display — headers, annotations, emotional emphasis. Never for body copy.
WORK SANS BLACK
Labels, UI elements, loud statements.
Courier Prime — body copy. Generous line-height. The typewriter feel ties it to zine culture.
Controlled imperfection. Every rotation is intentional.
1.5deg — subtle, almost subconscious tilt
3deg — noticeable, adds energy
6deg — clear intention, hero elements
CSS transform: rotate() + box-shadow offset creates the cut-and-paste collage feel.
Every visual element was designed in Figma before touching Rise. Figma was the translation layer — from design system to actual course assets.
The 5 strategy stickers — custom illustrated PNGs with transparency + drop shadow
The course used three different approaches depending on the moment:
Exact sizing, spacing, and color refs from Figma fed directly into the CSS :root custom properties injected globally via Rise Global Snippets.
Articulate Rise was the course shell. The Mighty extension was the superpower — it injected CSS, fonts, and full custom HTML blocks without breaking Rise's core functionality.
Strategy: Don't fight Rise everywhere. Use Mighty to disrupt key moments — headers, transitions, callouts — while leaving nav and video embeds alone.
CSS variables and Google Fonts imported once, available everywhere in the course:
Four custom interactive components, each a self-contained HTML/CSS/JS block dropped into Rise via Mighty:
Every course has a help button nobody clicks. I wanted something learners would actually want to talk to. So I built The Algorithm — a chatbot character that lives in the bottom corner of every lesson, dressed up as the thing the whole course is about.
It knows the five strategies. It knows the research. It knows which lesson you're on and greets you accordingly. Ask it about Mayer, about nano-learning, about why you're stuck — it has something real to say.
A content database covering all five strategies, foundational concepts (nano-learning, instructional design, participatory culture), and the full research stack — Mayer, Merrill, Vygotsky, Khlaif & Salha.
Each response is written in the voice of The Algorithm — confident, a little irreverent, gen-Z energy with actual substance behind it.
Pure vanilla JavaScript. No API calls, no backend. A keyword-matching engine scans the input against a response database and picks the best match. Typing indicator, message history, suggestion chips — all built from scratch.
It detects which lesson you're on from the page <title> and <h1> and serves a lesson-specific greeting on open.
Because a chatbot with no personality is just a search bar. The Algorithm has opinions.
"What's your favorite snack?"
cheese crackers. no notes. 🧀
"What's your favorite color?"
Pink. Obviously. 👉
"Are you real?" / "Are you a bot?"
part bot, part learning hype machine 🤖
"Tell me a joke."
Why did the instructional designer cross the road? To chunk it into smaller sections. 😂
"Should I..." / "Would you..."
The algorithm says yes. ✨
"Love you" / "ily"
Aww, stop it!
But also... don't stop. 🤖
Why it matters: The chatbot isn't a support tool — it's a learning tool. Every interaction reinforces the course content. Asking "what's a hook?" IS the learning. That's engagement strategy in action.
Features that work perfectly in Rise preview can break in a deployed SCORM package. localStorage, custom JS events, and CSS specificity all behave differently. Test early, test often.
Every feature I simplified ended up better than the complex version I planned. The sticker system, the chatbot, the rubric — all improved when I constrained them. The constraint is the strategy.
The zine look isn't decoration. When learners feel the DIY energy in the design, they understand the thesis viscerally before they read a word. Form and content are one thing.
Describe what you want → test → break → fix → repeat. I built a full design system, interactive components, and a chatbot this way. You don't need to memorize syntax. You need to know what you're trying to make.
The marker blocks technique came from a Mighty "Design with Me" session. Sharing templates in the Code Catalog improved them through feedback. Build in public. The community will make you better.
The real thesis: Anyone can build this. You don't need a CS degree. You need curiosity, iteration, and the willingness to break things until they work.