Trade Compass · Learning Hub · decision sheet

The module screen — three ways to guide a learner

Same content, three different compositions. Nothing here is built on your site yet. Read the three, pick one, and I build only that one.

Why now: you said you feel lost when you go to the learning area. The current page puts the module title first and hides your position and your one next action in the corners. Each direction below fixes that a different way.

What the research actually shows

Two live products captured today, both built around guiding someone through a long path. I checked the design vault first — its eight "learning apps" are App Store listing pages, so they show brand style but no course structure, which is why these are live captures instead.

Sequential, then a choice

Foundation is shown first and alone; the specialisation choice only appears after it, under the line "Then choose a learning path". Each path card carries its course count, and there is exactly one action per card.

THE ODIN PROJECT · /paths

One spine, side branches

A single vertical line is the main order; everything optional hangs off it on dotted links. You cannot get lost in the branches because the spine is always drawn.

ROADMAP.SH · /frontend

Counts before choices

Every card states how big the commitment is — lessons, projects, hours — before you commit to opening it. No card is an empty promise.

ROADMAP.SH · home

Direction A — the path is the page

Your position becomes the loudest thing on the screen: all 11 modules drawn as one strip, the one you are on lit up.

Direction B — one next step, no choices

The screen becomes a single instruction: do this lesson now. Everything else is a list you can see but not wander into.

Direction C — the map never leaves

Two panes: the whole curriculum stays on the left as a tree, the module you picked fills the right. You can see the whole thing you are inside.