Case Study — EdTech Platform
Tutor Guru
A comprehensive UX/UI design system for an online coding learning platform — empowering students, mentors, teachers and school admins through intuitive multi-role dashboards.
About The Project
Online learning,
truly reimagined
TutorGuru is an online learning platform offering on-demand and personalized learning through certified coding experts. The project scope covered a full web and mobile application design for multiple user roles — students, mentors, teachers, and school administrators.
The design challenge: create a single cohesive system that serves radically different workflows while remaining approachable for students as young as grade 5.
The Challenge
Four users.
One platform.
Each user type had fundamentally different needs and mental models. Building a system that felt native to each — without fragmenting the product — was the core design challenge.
Contribution
How OWEO
delivered it
From research to interactive flows, every design decision was grounded in user empathy and system thinking.
My Courses
Dashboard
Students see their upcoming sessions, ongoing courses, and bookmarked content at a glance. Smart sorting surfaces the most time-sensitive items — a session starting now bubbles to the top instantly.
Events
Calendar
A monthly calendar view gives students a bird's eye view of all sessions, assignments, and live coding events. Clicking a date expands a contextual panel showing all events for that day — no page change required.
Course Preview
& Overview
Before enrolling, students get a rich preview: ratings, session counts, grade range, enrollment data, pricing with discounts, and a full content breakdown. Trust-building and conversion happen on one screen.
Syllabus
& Curriculum
An accordion-based syllabus view drills from module to session to individual resources. Students can see exactly what they're getting — and mentors can track completion at the same granularity.
Student Home
The complete student
command centre
Design System
Colours & typography
The TutorGuru palette pairs a trustworthy institutional blue with a high-energy red — authority and momentum together. Secondary tints provide breathing room in data-dense interfaces.
Merriweather brings editorial gravitas to headings, while Work Sans keeps body copy clean and highly legible at small sizes across screen densities.
Outcomes
