EDUCATION · 2021-2024
Programming Hero | Case Study
A gamified learning ecosystem spanning web, mobile and live cohorts, built to teach code to millions without breaking under load.
00 · CONTEXT
Programming Hero teaches programming to a national audience, largely on entry-level Android devices and inconsistent mobile data. The product spans a web app, a native mobile app, live cohort classes and a community layer, all of which had to feel like one continuous learning experience rather than four disconnected tools.
01 · PROBLEM
Teaching programming at national scale meant serving millions of low-bandwidth learners with live classes, assessments and community, on devices that were never the newest.
02 · STRATEGY
We mapped the learner journey into four loops: discover, practise, prove, belong. Each loop became an independent product surface with its own data model and release cadence.
03 · DESIGN
A gamified visual language, streaks, XP, level maps, built on a token-driven design system shared between the web app and the mobile app.
04 · ENGINEERING
Edge-cached content delivery, queue-backed grading workers, and a realtime layer for live classes. Video pipelines transcode to sub-500kbps ladders for rural networks.
05 · CHALLENGES
Traffic that arrives in spikes, not curves
Live class start times pushed tens of thousands of concurrent learners into the same three-minute window. Anything that queried the database on page load fell over first.
Low-end devices, low-bandwidth networks
The median learner had under 2GB of RAM and a metered connection. Heavy bundles, high-bitrate video and chatty realtime channels were all unusable.
Motivation decay
Learners dropped off around week three. The curriculum was fine; the feedback loop was too slow to make progress feel visible.
06 · PROCESS
We split the learner journey into four loops, discover, practise, prove, belong, and gave each an owner, a data model and its own release cadence, so a change to the community layer never blocked a curriculum release.
One token set shared between React and React Native. Streaks, XP, level maps and badges were defined once as primitives, then composed per surface instead of redrawn per platform.
Content moved to edge caches with immutable keys, grading moved into queue-backed workers, and video transcoded into ladders reaching down to sub-500kbps for rural networks.
Every loop emitted funnel events. Completion, retention and drop-off were reviewed weekly and drove the gamification rebuild rather than opinion.
07 · THE SOLUTION
- In-browser code runner with instant test feedback
- Streak, XP and level-map progression shared across web and mobile
- Live cohort classes with realtime chat and hand-raise
- Auto-graded assignments with plagiarism signals
- Offline-tolerant mobile lessons
- Instructor console for cohort health and intervention
08 · ARCHITECTURE
- React web app + React Native mobile on a shared token/design layer
- Node.js services with PostgreSQL as system of record and Redis for hot paths
- Queue-backed grading workers with idempotent retries
- Edge-cached content delivery and adaptive video ladders
- Event pipeline feeding retention and completion analytics
09 · RESULTS
- Millions of active learners across web and mobile
- Course completion up 41% after the gamification rebuild
- Infrastructure cost per learner down 3.2x
10 · WHAT IT TAUGHT US
Scale here was never about raw throughput, it was about removing work from the critical path. Every second saved before first render translated directly into completion rate on slow networks.
11 · STACK
RELATED CASE STUDIES
RELATED READING
The interface is the product
Users never see your architecture. They see the two seconds between intent and result, and they judge the entire company on it.
Designing for the empty state
Every product is at its worst the first time someone opens it. Most teams design that screen last.
The anatomy of a homepage that converts
Section order, proof placement and the single decision each block of a page should help a visitor make.