EduPath

EduPath Course Explorer

Designed a guided course explorer that helps students compare paths without bouncing across tabs.

Role: Product design, journey mapping, full-stack prototype.
Timeline: 4 week prototype
Client: EduPath
Team: Founder + product designer
Stack: Next.js · Supabase · Framer Motion · Tailwind CSS

Key points

Reduce tab switching during discovery
Make prerequisites clear at a glance
Give admins a CMS-ready layout

Highlights

Students needed guided filters, not long tables
Requirement callouts were missing from the first view
The UI had to scale across future cohorts
Guided filter panels

Students can compare courses faster while admins keep content current.

Gallery

EduPath course explorer interface. — Guided filters and course cards in a single flow.

EduPath landing page introducing the course explorer and study flow. — The landing view frames the guided experience before students enter comparison mode.

EduPath dashboard view with course tracking and learner progress. — The dashboard condenses progress and next steps into one responsive surface.

EduPath personal settings page for tailoring the learner experience. — Personal settings keep the product adaptable without overwhelming the student.

EduPath pomodoro timer module embedded in the learner workflow. — The timer adds focus support directly inside the study journey.

EduPath quotes and motivation section inside the product flow. — Motivational content breaks up dense course information with lighter moments.

EduPath exam progress tracking screen with learner milestones. — Progress tracking makes preparation tangible instead of abstract.

Arabic interface variant of the EduPath course explorer. — The Arabic version proves the system can stretch beyond a single language flow.

EduPath planning materials and tracking boards. — Planning artifacts that shaped the data model.

Reflection

Guided filters and progressive disclosure made the difference. The clearer the hierarchy, the faster the decisions.

Links