Industry

EdTech • B2B2C • SaaS

Role

Sr. Product Designer

Timeline

4 months

Team

Myself, 1 PM, 1 PO(CEO), 1 Design Director, 6 Devs

Xello • K-12 EdTech

Visit Website

Challenge

Redesign of Xello's one of the top 3 core features, with 5MM eligible students across 3,000+ schools in Canada, US, and UK.

The Course Planner allows students to build four-year academic plans that meet graduation and diploma requirements.

Despite its scale, the experience had real structural gaps:

The Course Planner allows students to build four-year academic plans that meet graduation and diploma requirements.

Despite its scale, the experience had real structural gaps:

  • Students couldn't plan intuitively by requirements

  • Couldn't understand course conflicts

  • They had no way to reach their counselor for help when things went wrong

  • Xello doesn't allow plan submission with errors — so when students hit a wall, they were stuck. Alone.

Existing product prior to redesign

Full screen action view blocking context behind

Specialization grid before redesign

Complete 4-year course plan before redesign

What was wrong

11 prioritized items in a PRD with a design handoff deadline for January, engineers deadline is July, test and publish for September (new school year).

Direct access to students wasn't possible due to consent requirements, so I partnered closely with the client management team — the people embedded in school districts daily — to pressure-test designs and validate the educator impact, particularly around the new communication feature.

Direct access to students wasn't possible due to consent requirements, so I partnered closely with the client management team — the people embedded in school districts daily — to pressure-test designs and validate the educator impact, particularly around the new communication feature.

Delivered 4 must-haves and 2 nice-to-haves within the timeline. Additional refinements — including a course pill legend discovered through prototype testing — were folded in without scope creep.

New Course Planner grid proposal

Solution

The biggest piece was the integrated message system.

A communication channel built directly into the planner so students could reach their educator at the exact moment of friction, without leaving the tool. Before this, that connection didn't exist inside the product.

Other key changes:

A communication channel built directly into the planner so students could reach their educator at the exact moment of friction, without leaving the tool. Before this, that connection didn't exist inside the product.

Other key changes:

  • Replaced the full-screen action view with a focused course selection drawer - students were losing context of their plan every time they added a course

  • Swapped the diploma dropdown for a tab navigation per requirement - making planning by requirements finally intuitive

  • Added planned school name for Grade 8 students transitioning to high school

  • Refreshed course pills with a lighter visual treatment and added an icon legend after testing revealed consistent confusion

Course plan submission after completing course selection

Message history after student and educator communication started

New drawer for course selection

Planning by requirement tab menu

New specialization grid below main grid making easy to view the full course plan

Student trying to submit an incomplete course plan

Student sending a message to an educator

Impact and Results

Validated through prototype presentation with the client management team, including school admins, district admins, and educators.

Their response is below.

Visit Website