Turning a library into a route
A learning product built around sequence and proof rather than around a catalogue of lessons.
- Client
- JoFunction
- Disciplines
- Product design, Web app, Learning design
- Technology
- Next.js, TypeScript, Firestore
- The path — position and next step
- Step view with the work attached
- Dependency graph behind the route
- The path — position and next step
- Step view with the work attached
- Dependency graph behind the route
Overview
CodePath is JoFunction's learning product. It exists to solve a sequencing problem, not a content problem.
The challenge
Learning platforms optimise for breadth because breadth is easy to market. The result is that the learner carries the hardest job — deciding what to do next — at exactly the moment they are least equipped to do it.
Strategy
Make the path the product. Content is subordinate to order: each step declares what it depends on and what it unlocks, so the route can be walked without the learner planning it.
Design
The interface keeps one thing dominant at all times: where you are and what is next. Progress is shown as a route rather than a percentage, including the parts that were skipped.
Engineering
A dependency graph underneath the path lets steps be reordered or inserted without breaking anyone's progress. Completion is tied to work produced, not to pages viewed.
Outcome
A learning product that answers the only question that actually blocks people: what do I do next, and how do I know I am ready for it.
Technology
- Next.js
- TypeScript
- Firestore