Folio

Overview

What this is.

Folio is a learning surface: courses, cohorts, and progress that survives a refresh. Built to show education UX without pretending we are a university.

The challenge

What was actually hard.

Progress bars that jump, video players that fight the page, and certificates generated from hope. The real objects are enrollment, attempt, and completion rules.

Objectives

What we optimized for.

1. 01

   A player that respects reduced motion and captions

2. 02

   Progress as a ledger of events

3. 03

   Instructor tools that are not an afterthought

4. 04

   An empty course that still looks like a product

Strategy

The bet.

Learner UI and instructor UI share a model. Completion is a policy, not a frontend counter. Content is structured, not a blob of embeds.

Discovery

What we had to learn first.

Learners skip. Instructors need to see who is stuck. Those two sentences designed the dashboard.

UX

How it behaves.

Continue where you left off. Syllabus as a map. Attempts visible. Mobile is a first layout, not a squeezed desktop.

Design

How it looks when it is working.

Calm, bookish. Display type for module titles, generous reading measure, maroon for 'you are here'.

Engineering

How it is built.

Event-sourced progress (or an equivalent append-only table). Signed media URLs. An instructor export that matches what the UI shows.

Architecture

Boxes we can defend.

Technology

The stack for this study.

Implementation

The work, in order.

1. 01Enrollment and roles
2. 02Content modules
3. 03Progress events
4. 04Player shell
5. 05Instructor overview
6. 06Certificate generation from the ledger

Result

Outcomes — illustrative until measured.

Replace with measured results after a client engagement.

Voice

A quote worth keeping — later.

“Replace with a program lead: learners can resume, instructors can see attempts.”