Case study / 12 — Website · Education

EDU SITE educational website.

A user-centric educational website — clear pathways for students, parents and educators alike.

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

OVERVIEWThe idea

An education platform serving three audiences at once. The design builds role-aware pathways so students, parents and educators each find their journey immediately.

THE PROBLEMWhat had to be solved

One-size navigation fails education products: a student browsing courses and a parent checking outcomes need different front doors.

MY ROLEWhat I owned

Site architecture, audience-specific journeys, page templates and the visual system tying them together.

DESIGN PROCESSFrom idea to interface

01 Audience research
02 Role-based IA
03 Journey mapping
04 Template design
05 High-fidelity UI
06 Accessibility pass

METHODThe workflow, end to end

01
Step 01
Audience research
02
Step 02
Role-based IA
03
Step 03
Journey mapping
04
Step 04
Template design
05
Step 05
High-fidelity UI
06
Step 06
Accessibility pass

KEY DECISIONSWhat made it work

🚪

Role-aware entry

Three audiences, three clear first steps.

📚

Scannable course cards

Level, length and outcome visible at a glance.

Accessible by default

WCAG-aware contrast, focus states and structure.

🤝

Trust content placement

Accreditation and results where doubt appears.

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

EDU SITE — UI/UX design screen by Vasudev R

Screens scroll automatically — hover to pause

OUTCOMEThe result

An education site where every visitor finds their path — 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
Hair Salon Website