Skill 2 Role

Problem

A student-facing learning product can easily become a collection of disconnected pages: courses in one place, assessments in another, certificates somewhere else, and no clear answer to what deserves attention next. The challenge was to make progress feel tangible without turning the interface into a noisy dashboard.

Direction

I treated the product as a connected student LMS prototype rather than a static course catalogue. The experience is organized around a student’s learning rhythm: continue a course, see momentum, prepare for a checkpoint, and understand which skills are becoming useful.

What I built

The prototype includes a dashboard, learning pathway, course detail and lesson views, assessment and quiz flows, certificate preview, profile, mentor, notifications and settings surfaces. Visible controls either change a useful local state, move to a purposeful view, or confirm a simulated action.

The visual language uses clear course progress, daily momentum, achievement badges, role signals and short focus blocks to make the next action legible. The interface is built in React and TypeScript with reusable UI primitives and local state rather than a backend pretending to be complete.

Outcome

A functional UI-only student LMS prototype with course progress, assessments, certificates, search, navigation states, achievement interactions and a role-development narrative. The strongest result is not the number of screens. It is the clearer relationship between what a student does today and what that action unlocks next.

What remains

The prototype still needs real authentication, persistent learner data, content authoring, accessibility QA with actual users and a validated mentor workflow before it becomes a production learning platform.