Case study · EdTech · Freelance

MyKoledge

Role
Freelance — sole designer + developer
Timeline
Mar 2026 → present
Stack
React 19 · Vite · Tailwind v4 · Figtree
Brand
MySabr
HERO IMAGE
Cover image — the locked landing hero with the four-stat chip grid
01
Overview

A college-prep app that helps high-schoolers write applications — and lets the adults around them see how it's going.

MyKoledge (brand: MySabr) guides high-school students through their college applications. The centerpiece is the Essay Builder — a six-stage wizard that turns a blank page into a finished draft without templating the voice out of it.

But the student isn't the only stakeholder. Parents want visibility. Counselors need to track progress across a caseload. Admins need institutional dashboards. The design had to serve all four without turning any single one into a compromise.

Sector
EdTech · college prep
Engagement
Freelance, ongoing
Users
Students, parents, counselors, admins
Centerpiece
Essay Builder
Brand
MySabr
02
The problem

A blank page for the student. A black box for everyone else.

High-schoolers face two related problems when they open a college essay: they don't know where to start, and they can't tell if what they've written is any good. Existing tools solve the first by templating — which flattens the voice — and don't help with the second at all.

Around the student, three other stakeholders need visibility without over-steering. Parents want reassurance. Counselors need caseload signal. Admins need institutional patterns. Each needs a different view of the same underlying work — without the student feeling watched.

"Guide the student without templating the voice out."
Design goal I set
03
Goals

What the app needed to be true.

1
Guide without templating
Give the student a structure to walk into — reflect, find story, blueprint, prompt fit, draft — but never fill in the sentences. The voice stays theirs.
2
A landing that convinces two people
The landing page has to convince a prospective student that this builder is different from a blank page — and convince their parent that it's worth paying for.
3
Multi-stakeholder without surveillance
Parents, counselors, and admins each get their own view. The student's writing stays private; only progress, deadlines, and coaching notes are shared upward.
04
My role

Freelance designer and developer. End-to-end on every surface.

I designed and built every surface — the Essay Builder wizard, the four stakeholder dashboards, the marketing landing, and the design system that ties them together.

Every visual token, every interaction, and every line of shipped React was mine. The design system exports as JS objects imported directly into the app — so tokens can't drift from what's on screen.

05
Approach

How I worked through the four-stakeholder problem.

1
Tokens as code, not export
The design system lives as a JS module inside the app. Colors, type, spacing, motion — imported wherever they're used. Nothing can drift because there's no separate export step to forget.
2
Six-stage wizard as the spine
Reflect → Find Story → Blueprint → Prompt Fit → Draft. Each stage answers one specific question. Students always know what step they're on and why.
3
Landing iteration until one landed
Cycled through five different landing directions with stakeholders before locking one. Kept every rejected variant in the tree — so the next 'what about a serif treatment?' conversation has an answer.
ARTIFACT
Five landing directions side by side — editorial, brutalist, soft SaaS, three proof variants, and the locked direction
06
Solution

One product. Four stakeholders. Each with the view they need.

For the student
Essay Builder wizard
Six stages that guide without templating. In-progress essays with hook and reflection dots. Twelve seed questions that generate story starts — never sentences.
For the parent
Progress overview
Deadlines, essay count, coach feedback loops. Enough to reassure — not enough to over-steer. The student's writing itself stays private.
For the counselor
Caseload dashboard
Student progress at a glance, flagged risks (stalled essays, missed deadlines), quick-note journaling. Built for a counselor managing 40+ students.
For the admin
Institutional view
Cohort-level patterns — where students get stuck, which prompts land, which coaching approaches move essays forward. Aggregated, never per-student.
THE LANDING
The locked marketing landing — dark-purple hero with 2×2 stat chips, Strong/Weak essay toggle, IS/IS NOT matrix, 3-step builder cards, gradient CTA
THE BUILDER
Essay Builder stage 0 with four visual variants side by side — kept in-tree as visible iteration history for stakeholder review
Behind the scenes
System
Design tokens as JS module
Colors, type, spacing exported as JS objects imported directly. Tokens I import as JS can't drift from what's shipped.
System
Rejected variants stay in tree
Every direction that didn't ship still lives in the code. Deleting them would erase the reasoning.
System
Two builder archetypes, two builders
Main essays and activity supplements are different genres. Two builder flows instead of one compromised UI.
07
Alongside the product

Iteration history kept visible instead of tidied away.

Design writing
Ten landing variants live in the same tree. Deleting them would erase the reasoning.
The landing page took five distinct directions before one locked. Instead of deleting the rejected ones I kept every variant in the codebase, routed under stable URLs, so the next stakeholder review comparing 'what about a cream serif treatment?' has an answer that isn't from memory. The iteration history is the artifact.
Open the variants →
08
Outcome

Wizard shipped end-to-end. Landing locked after five directions.

Landing directions
5 → 1
Five directions explored, one locked and shipped. All five kept in the tree as visible iteration history
Wizard stages
6
Reflect → Find Story → Blueprint → Prompt Fit → Draft — each stage answers one specific question
Stakeholders served
4
Students, parents, counselors, admins — each with their own view of the same underlying work
Guide without templating.
The structure is mine. The voice is theirs.

Create a free website with Framer, the website builder loved by startups, designers and agencies.