Skip to main content

Product Design

Sylvan Learning

Modernizing a 13-year-old tutoring platform with three grade-level design systems - K-6 through high school.

Sylvan Learning - showcase
Role Sole Designer
Timeline 8 weeks
Team PM/learning designer, under contract with 6 Red Marbles Agency
Deliverables Concepts, wireframes, high-fidelity mockups, interaction designs, Figma components and design system, specs and handoff

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.

Sylvan tutoring platform - original design Before (13 years old)
Sylvan tutoring platform - redesigned lesson view 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.

Lesson introduction 1
Lesson start 2
Lesson content 3
Practice mode 4
Review complete 5

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.

Sylvan Learning tutoring platform redesign showing multiple grade-level interfaces

The redesigned tutoring platform - a complete visual overhaul of the 13-year-old interface.

Highlighter tool in action
Shapes and stickers toolbar
Focus mode for distraction-free reading

Interactive learning tools: highlighter, shapes and stickers, and focus mode

Standard text mode Standard
Large text accessibility mode 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.

Next

See more work