Case study / 08 — Website · Education

EDUTECH subject detail page.

An interactive subject detail page for digital education — turning a syllabus into an experience students want to start.

Role
UI/UX Designer
Platforms
Web · Responsive
Category
Website · Education
Type
EdTech Product Page
0
Platforms
0
Process phases
0
Key decisions
0
Research insights

OVERVIEWThe idea

The subject page is where a student decides to commit. This design turns a static syllabus into an interactive preview of the learning journey.

THE PROBLEMWhat had to be solved

Course pages are usually long text dumps. Students need to feel the structure, difficulty and payoff of a subject at a glance.

MY ROLEWhat I owned

Designed the full page system: curriculum visualization, lesson previews, progress framing and enrollment moments.

DESIGN PROCESSFrom idea to interface

01 Content audit
02 Curriculum IA
03 Wireframes
04 Interactive module design
05 High-fidelity UI
06 Prototype

METHODThe workflow, end to end

01
Step 01
Content audit
02
Step 02
Curriculum IA
03
Step 03
Wireframes
04
Step 04
Interactive module design
05
Step 05
High-fidelity UI
06
Step 06
Prototype

KEY DECISIONSWhat made it work

🗺️

Visual curriculum map

The whole journey visible before lesson one.

▶️

Lesson previews

Sample content one tap away builds confidence.

📊

Difficulty & time signals

Honest expectations reduce drop-off later.

🎯

Milestone framing

Progress shown as achievements, not percentages.

RESEARCH & INSIGHTSWhat shaped the direction

Research spanned both sides of the decision: learners who want engagement and momentum, and parents or educators who want structure and outcomes. Reviewing education products showed most fail one audience to please the other — the design had to serve both in one flow.

🎓

Two audiences, one page

Students ask “is this interesting?”; parents ask “does this work?”. Every screen answers both, in that order.

🗺️

Structure motivates

Learners commit when they can see the whole journey — milestones make effort feel finite and progress feel real.

Delight must be legible

Playful visuals only work when they clarify; decoration that competes with comprehension loses.

WHO IT'S FORDesigning for real people

PRIMARYThe learner

Decides emotionally in seconds: does this look engaging, achievable, worth starting today? Needs energy, previews and a friction-free first step.

SECONDARYThe parent / educator

Decides rationally: outcomes, credibility, structure. Needs proof points exactly where the enrolment decision happens.

DESIGN LANGUAGEThe visual system

A vibrant-but-disciplined language: warm colour and friendly illustration carry energy, while a strict layout grid and clear typographic hierarchy carry credibility. Interactive moments — previews, progressive disclosure — let curiosity drive depth instead of overwhelming the page.

Warm palette, strict grid
Friendly illustration
Interactive previews
Milestone-led structure
Proof at decision points

TESTING & ITERATIONPressure-testing the design

Layouts were tested for both reading modes: the student skim and the parent scrutiny. Iterations rebalanced energy and evidence until the page converted curiosity into a started lesson — and doubt into confidence.

PROJECT SCREENSInside the design

EDUTECH — UI/UX design screen by Vasudev R

Screens scroll automatically — hover to pause

OUTCOMEThe result

A subject page that sells the journey, not just the syllabus — explore it on Behance.

View full project on Behance

KEY LEARNINGSWhat I'd carry forward

01 Education design is trust design with a younger audience watching.
02 Show the journey, not just the destination.
03 Fun and credibility are not opposites; hierarchy lets them coexist.
← Previous
Learning Landing Page