Product Design
Sylvan Learning
Modernizing a 13-year-old tutoring platform with three grade-level design systems - K-6 through high school.
The Client
Sylvan Learning is one of the largest supplemental education providers in North America, offering personalized tutoring and academic programs to K–12 students through hundreds of learning centers. Their digital tutoring platform is used daily by students and teachers in centers nationwide.
The Problem
Sylvan’s tutoring platform hadn’t been redesigned in 13 years. The interface was outdated, inaccessible for many students, and particularly difficult for younger learners to navigate. Teachers and students shared a single device during sessions, which meant the UI needed to work seamlessly for both, switching between teacher controls and student-facing content in real time. The platform needed a modern redesign that preserved core functionality while making it usable and engaging for students ranging from early elementary through high school.
Before (13 years old)
After The Approach
I partnered with the PM and learning designer to identify the biggest pain points and develop a design plan. I started with wireframes of the base functionality, incorporating quality-of-life UX improvements and layout changes that addressed usability issues across age groups. The key challenge was designing three distinct UI variations, one for each grade band, that shared a common architecture but adapted typography, interaction patterns, and visual complexity to match each age group’s needs.
Complete student lesson flow: introduction through practice and review
The Solution
I delivered a fully interactive Figma prototype at low-fidelity, then high-fidelity renders of all core pages and flows across three grade-level variations. Each variation got its own complete Bootstrap-based design system in Figma: components, patterns, and tokens tailored to the age group. The final handoff included three complete sets of designs, specs, and implementation documentation. I also designed a bonus set of improvements to the teacher tools, technically out of scope due to budget constraints, but the existing teacher experience was painful enough that I couldn’t leave it unaddressed.
The redesigned tutoring platform - a complete visual overhaul of the 13-year-old interface.
Interactive learning tools: highlighter, shapes and stickers, and focus mode
Standard
Large Text Mode Adaptive reading modes with adjustable text sizes for different learner needs
The Result
Both the client and the agency were thrilled with the deliverables, and surprised that we nearly hit a deadline everyone had considered unrealistic. The project demonstrated that a 13-year-old platform could be modernized without rebuilding from scratch, and the grade-level design system approach provided a scalable framework for future development.