← All work Case 03 / 07 — Learning Vision
03 / 07
Case study 03 — EdTech · role-based LMS

Learning Vision

Three portals on one platform, for three roles that want opposite things: a learner who wants momentum, a professor who wants control, a supervisor who wants proof.

Outcome Three role-based portals shipped on one shell and one design system — built and running, with the supervisor role deliberately inheriting the professor's layout rather than a fourth codebase.
Product
Learning Vision (AIVision21)
Roles designed
Student · Professor · Supervisor
Role
Sole designer, system + all portals
Deliverable
Built, running prototypes
The problem

A corporate LMS usually solves for the administrator and lets the learner inherit whatever's left. Here the same data — batches, courses, chapters, tests, scores — has to serve three people whose questions barely overlap.

The design problem wasn't three sets of screens. It was one information model expressed at three grains: a student sees her next lesson; a professor sees the batch that's falling behind; a supervisor sees whether the programme is working at all.

Student asks

“What do I do next, and am I keeping up?”

Wants momentum, one click back into the video she left.

Professor asks

“Who's behind, and what do I set next?”

Wants authoring and correction — courses, batches, class tests, feedback templates.

Supervisor asks

“Is this programme actually working?”

Wants roll-ups — batch, student and test reports that survive being exported into a meeting.

One system, three grains

Warm canvas, crimson for identity, colour reserved for the batch.

The canvas is a warm off-white, not the usual cold grey — this is a place people spend an hour learning in, not a console they check. Crimson carries brand and active state. Every other colour in the interface belongs to a specific batch, so a learner recognises “React Batch” by hue before she reads the label.

Surface

#FDF8F4 canvas
#FFFFFF card
#1A1A2E ink

Identity + batch hues

#BD1313 active state
batch colours per enrolment

Type
Poppins

One family across all three portals — weight and size carry the hierarchy, never a second typeface.

Shell

64px icon rail
tooltip on hover, inner scroll

Portal 01 — Student · live prototype

Momentum, not a course catalogue.

This is the real build running below — click the rail: Dashboard, My Learning, Tests, Calendar, Notifications, TutorBot, Profile. Open a batch, take a test, watch a chapter.

learningvision.app/student — live, interactive
Resume beats browse

Every enrolled batch carries its next lesson by name — “Context API Deep Dive”, 13 of 18 chapters — so the dashboard is a way back in, not a shelf to choose from.

Deadlines are dated, not implied

Upcoming events show the days remaining, and a batch ending is styled as a deadline — red — while a test is neutral blue. Urgency comes from the calendar, not from nagging.

TutorBot is marked as AI

The one AI surface in the portal wears a visible gradient dot in the nav. A learner should always know when she's talking to a model rather than her supervisor.

Portal 02 + 03 — Professor & Supervisor

Authoring on the left, evidence on the right.

The professor portal is a six-item rail with three deep authoring flows behind it. Supervisors inherit the same shell with creation removed and reporting promoted.

Professor rail — 6 primary destinations
DashboardAt-a-glance batches, plus create shortcuts
SupervisorsWho runs which batch, activate / deactivate
CoursesAuthor, preview, publish · chapter builder
BatchesCreate, assign students, run and correct class tests
ReportsBatch · student · test, each with a detail view
FeedbackResponses, plus reusable feedback templates
The three flows that carried the weight
Create Batch → assign → configure

A batch is a course, a supervisor, a date range and a student roster picked from a pool. Four decisions that used to live in four unrelated admin pages, sequenced into one form with a live summary.

Class test → submissions → correction

Question authoring, then a correction screen that moves through submissions one student at a time rather than presenting a spreadsheet of ungraded rows.

Feedback templates, not free text

Professors build a reusable template of questions once; every batch reuses it. Comparable feedback across batches was impossible while every round was written from scratch.

The professor and supervisor portals exist as source rather than a runnable page, so this section maps them honestly instead of showing a mock-up of screens you can't click.

Decisions worth defending

Four calls, and what each one cost.

DecisionReasoning · trade-off
A 64px icon rail, not a labelled sidebarBuys back 176px of horizontal room for the learning player and report tables. Costs discoverability — paid for with a hover tooltip on every item, and only viable because the rail never exceeds seven destinations.
Colour belongs to the batch, not the moduleA student is in three batches at once, so hue is the fastest way to tell them apart in activity feeds and calendars. Costs the option of colour-coding by feature — which is the more conventional choice, and the less useful one here.
Supervisor inherits the professor shellSame navigation, creation gated off, reporting promoted. One shell to maintain and a supervisor can be walked through the product by a professor. Costs a purpose-built supervisor experience.
Warm canvas over cold grey#FDF8F4 against the usual #F4F5F7. Learning sessions run long; the warmer field reads as a study surface rather than a dashboard. Costs the instant “enterprise” read some buyers expect.
What I'd change

The student portal is the only one I'd defend as finished. The supervisor portal inheriting the professor shell was a delivery decision dressed as a design decision — it shipped three portals in the time two would have taken, but a supervisor's job is comparison, and comparison wants a layout of its own.

What it proved

Role-based design is mostly restraint. The temptation is to give every role every capability behind permissions; the work is deciding what each role never has to see. That judgement, not the screen count, is what made three portals coherent.

Next case study — 04 of 07
EduVision

Career prep for students 92 days from placement.

Read it →
← Previous: NurtureSync
All work About Email me