Matific · Teacher onboarding

Show the value first. Ask for setup when it's needed

With the Product Manager, I redesigned how new teachers discover Matific, choose how to set work, and set up a class only when they need to.

  • Sole designer
  • User flows
  • Wireframes
  • Visual Design
  • Prototyping
With
Product Manager
When
Released Sept 2025
For
Evaluators and new teachers
Quick Start Guide: explore Matific

Explore the product

Quick Start Guide

Three ways to set student work

Choose a route

Three ways to set student work

My Students: class setup

Students set up

My Students

01 · The UX problem

Setup was still a barrier to getting started

Who it’s for

Evaluating Matific

School leaders or teachers trying it out, through the free trial or a trial their account manager set up.

Need

See the value before committing to setup.

Joining their school

Teachers arriving by an admin's email invite or the school's access code. Their class may not exist yet, be empty, or already have students.

Need

A working class with as little setup as possible.

Syncing from a classroom platform

Classes and students come from the classroom platform; students are added or removed there, then synced.

Need

Skip Matific's own student setup.

Any of them can arrive with no class, an empty class or a class that's ready, so setup responds to what's in place, not to who they are.

The previous onboarding

  1. Sign up → Welcome
  2. Optional student teaser
  3. Setup checklist: add class & students, start students, school info123
  4. Setup prompts on page visits3

What wasn’t working

Setup came before value

In the previous flow, only around 15% of sign-ups went on to add students manually.

Student data was a barrier

Many teachers hesitated to add students, or their details, before seeing what Matific could do for their class.

Floating UI disrupted the experience

The onboarding checklist and pop-ups distracted from the actual games and educational material.

Design Goal

Let new teachers see Matific’s value before any setup, while getting those who are ready up and running with a class quickly.

Why it mattered: Evaluators decide whether their school adopts Matific, and teachers only get value once their students are added. The previous flow asked for this class setup before showing enough of the product's value, resulting in only 15% of sign-ups actually taking the time to add students.

2.1 · Product exploration

Lead with product value, not setup

To replace the previous flow's easily missed optional teaser, the new guide immediately surfaces Matific's core offerings on the page: student learning zones, interactive sample activities, and actionable teacher reports.

I designed an accordion-based UI to keep this information digestible. As users navigate the steps, short value propositions are paired with context-specific visuals. Within the Activities section, teachers can directly interact with demo games tailored to their target year level, proving the platform's worth before any data entry is required.

Product exploration: learning zones, activities and reports

2.3 · Setup when needed

Ask for class setup only when needed

To get classes ready and the first activity started with minimal friction, the flow dynamically adapts to the teacher's starting state (No class, Class but no students, or Ready). It asks only for missing information while seamlessly carrying their chosen activity through to completion.

Conditional class and student setup designs

Syncing from a classroom platform

The core setup flow remains unchanged, but importing a class triggers a specific "My Students" variation. To reflect the external data source, manual controls (add, delete, and edit) are intelligently replaced with a single Sync button.

The Pivot

We initially designed a "demo class" so teachers could experience and evaluate the product without adding real students. When development constraints forced us to descope it, this adaptive approach became our critical solution to prevent drop-off.

Reflections & follow-up proposal

What launch taught us, and what I'd do next.

Learned after launch

Premature setup caused friction

To filter year-level-appropriate activities for the manual assignment path, the system needed the teacher's Year Level. We opportunistically asked for a Class Name at the same time to speed up future setup. However, prompting for this data before users were actually ready to create a class caused unnecessary friction and hesitation.

Visual fallbacks lacked context

High localisation costs across 50+ languages prevented us from showing the actual student UI to teachers. I pivoted to a scalable zone selector using easily translated island names. While efficient to build, later user feedback revealed a critical tradeoff: introducing the zone selector and its names simply didn't provide enough context. Teachers still needed to see the actual student experience.

The value of persistent guidance

The shipped version dismissed the guide immediately once a route was selected, relegating the alternative pathways to the Help menu. I had originally advocated for keeping the guide persistent until a student completed their first activity. Observing the live product reinforced this recommendation: premature dismissal created friction for teachers who wanted to safely explore other routes or resume an incomplete setup.

What I'd do next

Keep guidance available, and make learning concrete.

Pending prioritisation · not released or tested

The launched experience drove immediate business value, but our post-launch feedback highlighted clear opportunities for iteration. Here is what I would do next to further optimise the flow:

Leverage new touchpoints for personalisation

Since this project launched, Matific introduced an upfront subject-selection screen. By utilising this new touchpoint to capture "Year Level" and "Curriculum" before the user enters the web app, we can completely eliminate data-entry friction from the manual assignment path, instantly pre-populating demo activities with year-level-appropriate content.

Show the actual student experience

Leveraging a newly agreed, cost-effective localisation strategy, I would replace the abstract zone names with short, auto-playing muted videos. This finally gives teachers immediate, concrete context of what their students will experience.

Centralise onboarding in a "Get Started" hub:

Replace the obtrusive floating checklist with a dedicated page. This hub would permanently house the onboarding progress tracker, the three pathway choices, and contextual help links—keeping guidance accessible without cluttering the UI.

Reintroduce lightweight visual aids

Test simplified, minimalist icons for the three pathways to improve scannability and quick comprehension without adding visual noise.

Here is a look at the proposed next version, bringing these strategic updates together into a unified "Get Started" experience:

Proposed subject selection with Year Level and Curriculum

Front-loading setup

Capturing Year Level and Curriculum during initial subject selection to eliminate downstream friction.

Proposed student experience preview

Concrete visual context

Replacing abstract zone names with localized, auto-playing video previews of the actual student experience.

Proposed Get Started hub

Centralised guidance

The new "Get Started" hub replaces floating UI elements to provide persistent, distraction-free onboarding.

Proposed next steps after setup

Adaptive progression

The hub dynamically updates once setup is complete, surfacing relevant next steps to maintain momentum.

More subjects. Different roles. One framework

I designed a framework—converting top navigation to a scalable side navigation—connecting school roles, classes, and subjects as Matific expanded beyond Maths. It launched alongside the first new subject.

Next: Teacher & admin navigation →
Teacher side navigation design

Fit

100% is the original image size. Drag to pan, scroll or pinch to zoom, or use the arrow keys and + / −.