Product strategy

Learnova — Where Learning Evolves.

A learning platform built like a SaaS product, not a school portal. Everything below — every color, every screen, every transition — is derived from a single token system, so what you see here is what engineering ships.

The design thesis

Most education software makes the learner feel like a record in a database. The whole product is organized around a different idea.

The unit of the product is not the course. It's the next fifteen minutes.

People don't abandon courses because the content is bad. They abandon them because re-entry is expensive — they've forgotten where they were and what came next. So the progress rail — the vertical spine that shows where you stopped and what's one step away — is the signature element of the system. It appears in the hero, in the dashboard, in the player sidebar, and on mobile. Wherever a learner lands, the rail answers the only question that matters: what do I do next?

Principles

Four rules that settle arguments during build.

01

Progress is the interface

Every surface shows state and the single next action. No screen is a dead end.

02

Quiet chrome, loud content

Navigation recedes. Lessons, charts, and student work carry the color.

03

Motion explains, never entertains

Animation shows causality — a bar filling, a card promoting. If it can be removed without losing meaning, remove it.

04

Teaching is a business

Instructors get revenue, retention, and drop-off — the numbers an owner actually checks.

Who we're designing for

Three personas, three different definitions of success. Each drives a distinct surface.

AO
Amara, 26Career switcher · Lagos

Studies in 20-minute blocks on a commute. Has three half-finished courses.

Needs

Zero-cost re-entry. Offline lessons. Proof she can show a hiring manager.

Success: finishes a track and gets the certificate.
DK
Daniel, 41Independent instructor · Berlin

Teaching is his income. He rebuilds a module when the data says students quit there.

Needs

Revenue clarity, drop-off by lesson, fast payouts, no cut in course quality.

Success: completion rate climbs, refunds fall.
PR
Priya, 38Head of L&D · 900-person firm

Answers to Compliance. Buys seats, not courses.

Needs

Learning paths, an audit-ready report, SSO, and one screen showing who's behind.

Success: 100% compliance before the deadline.

Information architecture

Five zones. A user only ever sees the zones their role unlocks — the shell is identical, the sidebar changes.

Public
learnova.com
├── Home · About · Features · Pricing
├── Catalog ─── /category ─── /course/:slug
├── For Schools · Enterprise
├── Blog · Resources · Help Center
├── Careers · Contact · Legal
└── Search · 404
Authenticated
/app
├── learn/     Dashboard · My courses · Calendar
│              Assignments · Certificates · Wishlist
├── course/:id Player · Notes · Discussion · Quiz
├── teach/     Studio · Builder · Students · Revenue
│              Reviews · Coupons · Payouts
├── org/       Team · Paths · Compliance · Reports
└── admin/     Users · Catalog · Payments · Flags · Logs

The two journeys that decide the business

Everything else is secondary to these.

Journey AAmara returns after 9 days away

Re-entry

Push notification names the lesson, not the course. Deep-links straight into the player at 04:12.

Recall

Player opens with her last note pinned above the video. No re-watching to find her place.

Momentum

Lesson ends; the rail auto-advances and shows a 6-minute next step. Streak restored.

Proof

Module complete → certificate generated → one-tap share to LinkedIn.

Design consequence: notifications must carry lesson-level deep links, and notes must be timestamped to the second.
Journey BDaniel finds out why students quit

Signal

Studio flags one lesson: completion drops from 84% to 31%.

Diagnose

Drop-off curve shows 60% exit at 07:40 — where the code demo starts.

Fix

He splits the lesson in the builder and adds a starter file. No re-upload of the course.

Verify

Two weeks later the same chart is checked. Completion back to 79%.

Design consequence: analytics are per-lesson and time-indexed, never per-course averages.
Foundations

Design system

Every value here is a live CSS custom property in this file. Change one token, and every screen in this prototype updates.

Color

Blue carries every action; cyan is reserved for live and in progress — it never appears on a static element. That restriction is what keeps the accent meaningful.

Primary#2563EB
Secondary#0F172A
Accent · live#06B6D4
Background#F8FAFC
Success#10B981
Warning#F59E0B
Danger#EF4444
Surface#FFFFFF

Neutral ramp

50
100
200
300
400
500
600
700
800
900
Body text uses 700 on 50 (11.6:1). Secondary text uses 500 on surface (4.76:1). Both clear WCAG AA. Neutral 400 is never used for text — only borders and disabled states.

Typography

Poppins for headings — geometric, warm, slightly optimistic. Inter for body — the most legible face at 14px in a data table. JetBrains Mono for anything a machine produced: timestamps, IDs, durations, code.

display / Poppins 700
clamp 2.6–4.25rem · lh 1.15
Where learning evolves
h1 / Poppins 600
clamp 2–3rem
Continue where you left off
h2 / Poppins 600
clamp 1.6–2.25rem
Featured this week
h3 / Poppins 600 · 22px
Module 3 — State management
h4 / Poppins 600 · 18px
Lesson complete
body / Inter 400 · 16px · lh 1.6
Learners retain more when the next step is one tap away, not one search away.
sm / Inter 400 · 14px
tables, cards, UI
18 lessons · 4h 20m · Updated June 2026
micro / Inter 700 · 11px
uppercase · ls .1em
Enrolled · 1,204 students
mono / JetBrains 500 · 13px
machine output only
04:12 / 18:37 · cert_9f2a71 · +12.4%

Spacing, radius, elevation

Spacing — 4px base

--s1 · 4px
--s2 · 8px
--s3 · 12px
--s4 · 16px
--s6 · 24px
--s8 · 32px
--s12 · 48px
--s16 · 64px
--s24 · 96px
Card padding = 24. Section rhythm = 96 desktop / 48 mobile. Nothing between 4 and 8 exists.

Radius & elevation

sm 6
md 10
lg 14
xl 20
2xl 28
e1 · rest
e2 · hover
e3 · popover
e4 · modal
Shadows are always neutral-900 at low alpha, never black. Elevation only ever moves one step on hover.

Motion

Four durations, two easings. Hover any tile.

  • --dur-1 · 120msButton press, checkbox, toggleease-out
  • --dur-2 · 200msHover, focus ring, color shiftease-out
  • --dur-3 · 320msCard elevation, accordion, tooltipease-out
  • --dur-4 · 520msView transition, scroll reveal, progress fillease-out
  • Stagger60ms between siblings, capped at 6 items--dur-4
  • Reduced motionAll animation and transition disabled; opacity states resolve instantly@media

Accessibility contract

  • ContrastAll text ≥ 4.5:1; large text and UI borders ≥ 3:1WCAG AA
  • Focus3px primary ring at 35% alpha, never removed — visible on dark surfaces too:focus-visible
  • Hit target44×44px minimum on touch; 32px minimum on pointer--s10
  • Color independenceStatus is always icon + text, never color alone (see badges)—
  • KeyboardEvery view, tab, and accordion reachable by Tab / Enter / Arrowtabindex
  • VideoCaptions required for publish; transcript is a first-class panel, not a downloadWCAG 1.2.2
Library

Components

Live and interactive — click, hover, tab through. Nothing here is a screenshot.

Buttons

Labels name the outcome. The button that says Publish produces a toast that says Published — the verb never changes mid-flow.

Inputs & forms

Badges & avatars

◆ Enrolled ✓ Completed ◷ Due in 2 days ! Overdue ● Live now Draft
AO
DK
PR
+9
12 learners in this cohort

Cards

Intermediate◈

Systems design from scratch

DK
Daniel Kessler
★ 4.9(2,431) · 18 lessons · 4h 20m
$89Bestseller
Beginner◐

Product analytics for non-analysts

PR
Priya Raman
★ 4.7(864) · 12 lessons · 2h 05m
$49● Cohort live
In progress62%

Advanced React patterns

Next: Compound components — 6 min

Tabs, accordion, tooltip, toast

Build a production system end to end. Written for engineers who've shipped features but never owned an architecture.

Tooltips: 320ms, 8px above
Can I download lessons for offline?

Yes. Every lesson on a paid plan downloads at up to 1080p and stays available for 30 days offline.

What happens if I cancel mid-course?

You keep access to any course you've already enrolled in. Only new enrollments stop.

Do certificates expire?

No. Certificates carry a permanent verification link that any employer can check.

Tables

StudentCourseProgressLast activeStatus
AO
Amara Okafor
Systems design
2h ago◆ Active
JM
Jonas Meyer
Advanced React
1d ago✓ Completed
LN
Lina Novak
Product analytics
23d ago◷ At risk

Empty, loading, error, success

◈

No courses yet

Pick something you've been putting off. The first lesson is usually under ten minutes.

Skeleton — shape matches the real card, so nothing shifts on load.
!

Video won't load

The connection dropped at 04:12. Your progress is saved.

✓

Module complete

Certificate is ready. Next module unlocks now.

L
Learnova
● Spring cohorts now open

Pick up exactly
where you left off.

Learnova remembers the lesson, the timestamp, and the note you wrote — so a nine-day gap costs you nothing. Courses from instructors who ship, not lecture.

AO
DK
PR
JM
2.4M learners · avg. rating ★ 4.8
◈
Systems design from scratchModule 3 · State management
● Resuming
  • Why systems fail08:12
  • Load, latency, limits14:40
  • Designing the write path11:26
  • Caching without lying04:12 / 18:37
  • Queues and back-pressure16:05
  • Capstone — design a feed42:00
62%
Your last note: "TTL vs. invalidation — ask about this"
Trusted by learning teams at NorthwindCobaltMeridian HealthFieldstoneApertureHalcyon
0
Learners worldwide
0
Courses published
0
Completion rate — 3× the industry average
$0
Paid out to instructors
Catalog

Courses people actually finish

Ranked by completion rate, not by ad spend.

Intermediate◈

Systems design from scratch

DK
Daniel Kessler · Staff Eng
★ 4.918 lessons · 4h 20m
$8992% finish
Beginner◐

Product analytics for non-analysts

PR
Priya Raman · Head of L&D
★ 4.712 lessons · 2h 05m
$49● Cohort live
Advanced◆

Design systems that survive handoff

JM
Jonas Meyer · Design Lead
★ 4.822 lessons · 5h 40m
$119New
Platform

Built around the moment you come back

Not around the moment you enroll. That's the part every other platform gets wrong.

◷

Resume, to the second

Close the tab mid-sentence. Open it on a phone three days later. The player restores position, playback speed, notes, and the transcript cue you were on.

04:12 / 18:37
"TTL vs. invalidation"
◎

Notes that stay with the frame

Type a note and it pins to that timestamp forever. Search your notes across every course.

✓

Verified certificates

Every certificate carries a public link an employer can check in one click.

◇

Offline lessons

Download up to 1080p. Progress syncs the next time you're online.

◈

Live cohorts

Optional weekly sessions with the instructor. Recorded if you can't make it.

How it works

From first lesson to hireable proof

Choose a track

Answer three questions. We build a path from courses that people at your level actually finish.

Learn in small blocks

Lessons average nine minutes. The rail always shows exactly one next step.

Prove it

Graded assignments and a capstone reviewed by the instructor, not a script.

Show it

A verified certificate and a public portfolio page built from your capstone.

For instructors

Teach like it's a business, because it is

You get the numbers an owner checks: revenue, refunds, and the exact second students quit a lesson. Then you fix that lesson without republishing the course.

  • Per-lesson drop-off curves, time-indexed
  • Payouts every two weeks, 85% revenue share
  • Curriculum builder with drag-and-drop and drafts
  • Coupons, bundles, and cohort pricing
Payout · next cycle
$14,280
Last 7 months+24% MoM
Security & Compliance 2026 ◷ Due in 9 days
AO
Engineering
96%
SL
Sales
71%
OP
Operations
42%
For teams & schools

One screen that tells you who's behind

Assign a learning path, set a deadline, and stop chasing people over email. Compliance reporting is export-ready the moment an auditor asks.

  • SSO / SAML, SCIM provisioning
  • Learning paths with prerequisites and deadlines
  • Audit-ready exports — CSV, PDF, API
  • Role-based permissions down to the department
Testimonials

What changed for them

I'd started this course twice before and quit twice. The difference was that reopening it never felt like starting over. I finished in five weeks.

AO
Amara OkaforBackend Engineer, Cobalt

The drop-off chart told me students were leaving 7 minutes into one lesson. I split it in two. Completion went from 31% to 79%.

DK
Daniel KesslerInstructor · 41k students

We hit 100% compliance eleven days before the deadline. That's the first time that's happened in six years.

PR
Priya RamanHead of L&D, Meridian Health
Pricing

Straightforward plans

Cancel anytime. Courses you've already enrolled in stay yours.

Free

$0
See if it sticks.
  • Full access to 400+ free courses
  • Progress tracking and notes
  • Community discussion

Pro

$29 / month
For people who intend to finish.
  • Entire catalog — 12,400 courses
  • Verified certificates
  • Offline downloads up to 1080p
  • Graded assignments and capstones
  • Live cohort sessions

Teams

$19 / seat / mo
Five seats minimum.
  • Everything in Pro
  • Learning paths and deadlines
  • Compliance reporting and exports
  • SSO, SCIM, and audit logs
  • Dedicated success manager
FAQ

Questions worth asking

What happens to my courses if I cancel?

Anything you enrolled in while subscribed stays accessible, including certificates. You only lose access to new enrollments and offline downloads.

Are the certificates worth anything?

Each one carries a permanent verification URL showing the course, the assignments you passed, and the date. Employers can check it without an account. We don't claim accreditation we don't have.

How much do instructors keep?

85% of revenue on direct sales, paid every two weeks. Subscription revenue is split by watch time across the catalog.

Does this work on a slow connection?

Yes. Video adapts down to 240p, and any lesson can be downloaded on Wi-Fi and watched later. Progress syncs when you reconnect.

Can we self-host for compliance reasons?

Not currently. We offer data residency in the EU, US, and Singapore, plus SOC 2 Type II and an annual pen-test report on request.

Good evening, Amara

Pick up where you left off

Caching without lying

Systems design from scratch · Module 3 · 14 min left
62% complete · 11 of 18 lessons Your note: "TTL vs. invalidation — ask about this"
Courses in progress
3
1 finishing this week
Learning streak
12 days
Personal best
Hours this month
14.2
+3.1 vs. last month
Certificates earned
4
2 verified by employers

Minutes learned

180120 600 W1W2W3 W4W5W6W7

Due soon

2 open
Capstone — design a feed! 2 days
Systems design · graded by Daniel
Quiz — cache strategies◷ 6 days
10 questions · 15 min
Live cohort session● Thu 18:00
Q&A with the instructor · recorded

My courses

◆ In progress62%

Systems design from scratch

Next: Caching without lying — 14 min

◷ Stalled 23 days14%

Product analytics for non-analysts

Next: Defining an activation event — 8 min

✓ Completed100%

Advanced React patterns

Certificate issued 12 June 2026

Systems design from scratch ● Cohort live Thu
11 / 18
62%
▶
04:12Caching without lying18:37

Caching without lying

Module 3 · Lesson 11 · Daniel Kessler
So the honest version of a cache is: it's a promise you might break. The question is how loudly you break it.
Time-to-live is the lazy answer. It's fine when staleness is cheap — a follower count, a view count. It is not fine for a balance.
Invalidation is the honest answer, and it's harder, because now the write path has to know about every read path.
Here's the pattern I use. Write through, invalidate on commit, and accept a small window where a reader sees the old value.

Studio

◷ Needs attention
Completion on "Queues and back-pressure" fell to 31%60% of learners exit at 07:40 — right where the code demo starts.
Revenue · 30d
$14,280
↑ 24% vs. previous
New enrollments
1,842
↑ 12%
Completion rate
74%
↓ 6% — see alert above
Refunds
0.8%
↓ 0.3%

Revenue

Direct sales + subscription watch-time share
↑ 24% MoM
$16k$12k $8k$4k JanFebMar AprMayJunJul $14.3k

Where learners are

74% complete
  • ● Completed74%
  • ● In progress18%
  • ● Stalled 30d+8%

Students

StudentCourseProgressLast activeStatus
AO
Amara Okafor
Systems design
2h ago◆ Active
JM
Jonas Meyer
Systems design
1d ago✓ Completed
LN
Lina Novak
Systems design
31d ago◷ Stalled
TB
Tobi Balogun
Systems design
4h ago● Just enrolled
Responsive

Mobile

Not a narrower desktop. The sidebar becomes a bottom bar, the rail collapses to a single next-step card, and the player puts the transcript above the fold because that's what people read on a train.

Evening, Amara
12-day streak 🔥
AO
Next up · 14 min
Caching without lying Systems design · Module 3
3
In progress
14.2
Hours · mo
4
Certificates
Due soon
Capstone — design a feed2 days
Quiz — cache strategies6 days
Dashboard — one next step, always
▶
Caching without lying
Lesson 11 of 18 · 04:12 / 18:37
Time-to-live is the lazy answer. It's fine when staleness is cheap.
Invalidation is the honest answer, and it's harder.
Write through, invalidate on commit, accept a small window.
Player — transcript above the fold
All Engineering Design Data
Intermediate◈

Systems design from scratch

DK
Daniel Kessler
$89★ 4.9 · 92% finish
Beginner◐

Product analytics for non-analysts

PR
Priya Raman
$49● Cohort live
Catalog — completion rate, not ad rank

Responsive rules

  • ≥ 1080pxFull shell: persistent sidebar, 3-up grids, player sidebar docked rightdesktop
  • 860–1080pxSidebar persists; grids drop to 2-up; player curriculum moves below the videotablet
  • < 860pxSidebar → bottom bar (5 items max); all grids 1-up; type scale steps down one levelmobile
  • Touch targets44×44 minimum everywhere below 860px, including transcript cues--s10
  • The railCollapses to a single "next up" card — the six-lesson rail is desktop-onlysignature
Engineering

Developer handoff

What to build first, what's already decided, and how the ~90 screens in the brief derive from what's here.

Token contract

Ship these as the single source of truth. Design does not hand over hex values in a spec doc — it hands over this file.

--primary #2563EB   --secondary #0F172A   --accent #06B6D4
--bg #F8FAFC        --surface #FFFFFF
--success #10B981   --warning #F59E0B     --danger #EF4444
--n50 … --n900      10-step neutral ramp

--font-display Poppins 500/600/700
--font-body    Inter 400/500/600/700
--font-mono    JetBrains Mono 400/500

spacing  4 8 12 16 20 24 32 40 48 64 80 96 128   (4px base)
radius   6 10 14 20 28 999
elevation e1 rest · e2 hover · e3 popover · e4 modal
motion   120 / 200 / 320 / 520ms · ease-out cubic-bezier(.16,1,.3,1)

What the brief lists vs. what's built

Ninety screens at low fidelity would fail the benchmark. Instead: eight screens at ship fidelity, plus the rule that generates the rest.

  • Built hereHomepage · Student dashboard · Course player · Instructor studio · Component library · Mobile (3 screens)done
  • Derives from the dashboard shellMy courses, Wishlist, Calendar, Assignments, Certificates, Downloads, Settings, Billing — same sidebar + topline + content grid, different content slot1 template
  • Derives from the studio shellOrg dashboard, Compliance, Reports, Admin (users, catalog, payments, flags, logs) — identical shell, sidebar items swapped by role1 template
  • Derives from the marketing shellAbout, Features, Enterprise, For Schools, Blog, Resources, Careers, Contact, Legal, 404 — same nav + section rhythm + footer1 template
  • Needs its own designAuth (6 screens), Onboarding, Curriculum builder (drag-and-drop), Quiz builder, Certificate documentnext sprint

Non-negotiables at review

  • The rail never liesIf progress is unknown, show a skeleton — never a zero. A false 0% reads as lost work and is the #1 churn trigger.P0
  • Cyan means liveThe accent is reserved for in-progress and real-time states. Using it decoratively breaks the system's only strong signal.P0
  • Resume is to the secondPosition, speed, note, and transcript cue restore together or the feature doesn't ship.P0
  • Analytics are per-lessonCourse-level averages hide the drop-off cliff. Every chart is time-indexed within a lesson.P1
  • Focus ring never removedoutline:none without a replacement box-shadow fails review automatically.P0
  • Reduced motion honoredEvery animation in this file is inside the media query. New ones must be too.P0

Known gaps

Stated plainly, because a case study that claims completeness is lying.

Dark mode

Only the player is dark. A full dark theme needs a second neutral ramp and re-tested contrast on every badge.

Icons

Geometric glyphs stand in for a real icon set. Production should use a 24px, 1.5px-stroke library — Lucide is the closest match to the type.

Localization

Copy is English-only and unmeasured. German will overflow badges and the sidebar at ~30% expansion.