The Client

An independent educator who creates in-depth learning roadmaps for technical skills (DevOps, Data Science, and 15+ more in the pipeline). Sells them as Notion templates to career-switchers and self-learners worldwide.

The Problem

The original roadmap was a single long-scrolling Notion page. 7 modules. 40+ sub-sections. Every section packed with curated resource links.

The content was thorough. The structure was the bottleneck.

  • No way to track what you’d already finished
  • No sense of how much roadmap was left
  • No timeline for pacing the learning
  • Easy to lose your place after closing the tab
  • Overwhelming to look at on first open

The roadmap worked as a reference. It didn’t work as a study tool. The educator wanted it rebuilt as an actual system.

What I Built

A complete restructure of the roadmap into a tracked, paced, stage-based learning system — while keeping the minimal aesthetic the client wanted.

Key Features

Leveled Architecture

Three toggled levels (Beginner / Intermediate / Advanced) so learners only see what’s relevant to their current stage. No more scrolling past advanced content as a beginner.

Stage-Based Resource Pages

Each sub-section became its own page with a clear learning objective, categorized resources, and a built-in space for personal notes.

Dual-Layer Progress Tracking

Level progress and stage-by-stage progress, both calculated from a single checklist per stage. When a learner checks an item off, the stage, level, and overall progress bars update from that same input — no separate trackers to maintain.

Separate Metrics Dashboard

All progress mechanics (progress bars, Gantt roadmap, checklists) were pulled out of the main view and moved to a dedicated Metrics page. The main roadmap stays visually clean.

Adjustable Timeline Roadmap

A timeline view where the learner sets a start date and all subsequent stages auto-shift based on estimated duration. Turns a static roadmap into a personal study plan.

Embedded Video + Resource Views

Each stage supports embedded YouTube content, categorized free resources, and notes — all in one place so learners never leave Notion.

Minimal Main View, Maximum Tracking Underneath

The homepage shows only the three level progress bars and a simple table of contents. Everything powerful sits one click deeper.

Persistent Two-Column Navigation

Built a documentation-style layout where the full table of contents stays fixed on the left and only the content panel on the right changes when a learner clicks a stage. Clicking between stages keeps the nav visible, so learners can move through the roadmap without the usual back-and-forth of Notion sub-pages.

System Architecture

The Result

  • A flat document became a working study system
  • Learners now see progress at three levels (overall, per-level, per-stage) updating from a single source — one checklist per stage, no separate trackers to maintain
  • The timeline roadmap lets learners plan realistic completion dates
  • The educator now has a reusable template structure she can deploy across all 15+ upcoming roadmaps
  • Same clean aesthetic she loved in the original — just with a real system behind it

Client feedback

“10/10 would recommend. Talented!”