Design case study

Redesigning the learner flow — one obvious next step

The in-course experience behind learn.mru.org, which I redesigned end to end during MRU's 2026 platform rebuild. Years of mission pivots had left a site that made learners do the navigating; the redesign gives every screen one job — answer "what should I do next?"

01 The flow, in five steps

"Before" screens come from the Wayback Machine's archive of the Drupal 7 site — some embedded media didn't archive and shows as empty frames.

1 · Coming back

The old site's answer to "where was I?" was a profile page. Returning is now one tap.

Legacy profile page on mobile: a name and a certificate list
Before — the closest thing to a dashboard.
New dashboard on mobile: up next, review queue, streak
After — up next, review, streak, keep exploring.
The new MRU dashboard at desktop width: next lesson front and center, review queue, and streak
The same screen at desktop width.

2 · Starting a course

The old course page greeted everyone with the same green "Start Course." The new one knows where you left off.

Legacy course page on mobile: marketing hero and Start Course button
Before — identical for a first visit or your eightieth lesson.
New course page on mobile: your progress up top with a Next Up card for the current lesson
After — progress up top, "Next up" always current.

3 · The lesson

Cut what competes with learning: the in-lesson course outline is gone — navigation lives on the course page — and every step ends by pointing to the next.

Legacy lesson on mobile: a video above eight stacked accordion menus
Before — the video, then eight menus.
New lesson on mobile: one reading column with a persistent next-step bar
After — one column, one next step.
Video end-screen showing in-course navigation at the stop time
Video end-screens. Videos stop at a set time and show course navigation — not YouTube's recommended videos, which used to pull learners off the site.

4 · The quiz

Every question on one page became one question at a time — and the bottom bar got smarter: "Back to video / Submit" became Previous, Skip, and what's up next by name.

Legacy practice questions on mobile: all questions in one form, with a Back to video / Submit footer
Before — every question, one long form.
New quiz on mobile: one question at a time with a selected answer, Check Answer button, and a persistent navigation bar at the bottom
After — one question, visible progress, next step named.

5 · The interactive

Still third-party embeds until they're rebuilt natively — so the design work focused on getting in and out of fullscreen cleanly, in either orientation.

Legacy interactive on mobile: an empty embed with a troubleshooting link
Before — an embed with a built-in apology: "not displaying correctly? Click here."
New interactive on mobile: a first-class step in the unit
After — clear expand-interactive UI on mobile.
Interactive in fullscreen landscape with a one-tap Exit
Fullscreen landscape — now with a one-tap Exit.

02 The moments between

Progress gets acknowledged — streaks, unit and course completions, confetti on a passed quiz.

Consistency

Daily goal met. Streak extended.

You're on a 3-day streak.

Unit Complete

Unit complete

Introduction is complete.

Course Complete

You completed this course.

Principles of Economics: Microeconomics

View Certificate Start New Course

03 How it was built

There was no mockup phase. I had Codex write a technical-requirements prompt so that what Google AI Studio built would be compatible with the repo; the shell came back in as the design direction, and most of the finessing happened from there, in Codex/Claude Code. A token system, written usage rules, and a CI check that blocks hardcoded styles keep it consistent. There's no before/after metric on this page: the problems were obvious, and we never had learner-level measurement set up on the old site. Now we do — every step of the flow emits events, so we'll know whether these changes actually work. More in the engineering write-up.