72%satisfied
with the new side navigation
Matific · Teacher & admin navigation
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.
- With
- Product Managers
- When
- Released Jan 2026
- For
- Teachers and school admins
Teacher Navigation
Subject/Class Switcher
Admin Navigation
Results
Highly positive early reception, with a framework built to scale
Results at a glance: in-app survey after launch
Extremely happy49%
Happy23%
Neutral7%
Unsatisfied12%
Extremely unsatisfied9%
About 1 in 5 were dissatisfied, which points to what to evaluate next.
A one-question in-app survey (“How satisfied are you with the new side navigation?”) on a five-point scale, shown to everyone who logged in during the first weeks after launch. Most users are teachers, but respondents' roles weren't recorded. Satisfied = happy or extremely happy. Two optional open questions drew too few answers to draw conclusions from.
01 · The UX problem
A second subject changed more than the menu
Who it’s for
Teachers
Work in Class mode; a class can have Maths, Financial Literacy or both.
Need
Switch class and subject without landing on a combination that doesn't exist.
Admins who also teach
Move between running the school and teaching their own classes.
Need
A clear switch between Admin and Class modes.
School admins and leaders
Work school-wide, across many classes and teachers.
Need
School-wide pages in one place, and quick switching between classes.
The majority of our users are teachers, primarily accessing the platform via 1366 × 768 resolution laptops.
Legacy navigation
Top Navigation Bar 113
- Logo
- 5 Primary menus5
- 5 Secondary menus
Top Navigation Bar 23
- Page title
- Class selector2
- Page-specific menus
Admin Menus4
- Extra sub menus under Primary and Secondary menus
- Option to select Whole School in Class Selector
What wasn’t working
Inflexible architecture
Adding new subjects like Financial Literacy required a selector, but the rigid top navigation couldn't support it without compromising vertical space.
Poor visibility for primary controls
The class selector lacked visual prominence, and the dense layout prevented us from increasing its footprint.
Poor viewport optimisation
The double navigation bars consumed critical vertical height on standard laptops (1366×768), while horizontal space on larger desktop monitors was wasted.
Tangled permissions
Teaching and administrative tasks were merged into one cluttered menu, creating cognitive overload for admins who also teach.
Unclear settings location
Having both a class landing page and a separate class detail page created navigational confusion, leaving users unsure of where to manage their class settings.
Design Goal
Streamline class and subject selection, decouple teaching workflows from administrative tasks, and optimise vertical screen real estate while building a scalable foundation for future subjects.
Why it mattered: The immediate trigger was the need to integrate Financial Literacy into the platform. However, the broader challenge was ensuring the navigation could scale for future subjects without introducing friction for Matific’s 200K+ active teachers.
02 · design decisions
One selector. Separate roles. More room. Clear settings
Teachers pick class and subject in one step, teaching and school administration get their own spaces, content gains height on smaller laptops, and class settings have one clear home.
How we worked
Requirements & Alignment
Partnered with Product Managers to ensure all user needs were covered and to gather feedback on early concepts.
Structure & Design
Explored and tested structural concepts through wireframes, ultimately proving that top-navigation models failed and pivoting to a side-navigation architecture.
Review & Iteration
Crafted high-fidelity visual designs and interactive prototypes specifically for board-level demonstrations and final approval.
Delivery & Rollout
Delivered production-ready designs to development and created specific rollout guides requested by the Sales team to support a smooth transition for users.
A product manager led the wider Financial Literacy launch that this work supported, while the board held final approval.
2.1 · Subject + class
Streamline class and subject selection
The most critical architectural decision was defining how teachers switch between subjects and classes. To drive an informed decision, I developed interactive prototypes of both competing models—allowing us to test and evaluate the exact workflow, friction, and cognitive load of each approach.
Option 1
Separate Subject and Class Selectors
Two independent dropdowns (one for subject, one for class).
Pros
High familiarity; follows standard UI patterns.
Cons
High risk of dependency errors and restrictive UI states. Changing a class could trigger an error, silently switch the subject in the background, or disable invalid options—forcing users into a clunky guessing game of toggling back and forth to find valid pairs. Furthermore, scaling this model for future subjects would introduce UI clutter and require extra clicks.
Option 2
Chosen DirectionUnified Selector
A single dropdown where classes are nested under subject accordions.
Pros
Inherently prevents mismatched selections (only valid pairs exist). Highly scalable, as new subjects simply slot in as new accordion groups. A global search allows teachers to find any class instantly.
Cons
Classes repeat under each subject, lengthening the list. However, we mitigated this friction through collapsible accordions and robust search functionality.
2.2 · Roles
Decouple teaching workflows from administrative tasks
To resolve the tangled navigation, I introduced distinct "Admin" and "Class" modes with dedicated menus. This role-based architecture allows administrators who also teach to explicitly switch contexts. For standard teachers, the toggle remains completely hidden—utilising progressive disclosure to keep their UI streamlined and focused strictly on the classroom.
2.3 · Space & scale
Optimise vertical space while building a scalable foundation
Shifting to a side navigation model reclaimed critical vertical real estate on standard laptops. The menu collapses into a streamlined icon view to maximize screen space, while clear active-states keep users oriented. Crucially, new subjects now integrate seamlessly into the side selector rather than stacking vertically and crushing the layout.
Why now
While product leadership and I had long advocated for a side navigation model, it previously lacked the business weight to overcome board-level reservations. The introduction of Financial Literacy provided the definitive use case—creating an immediate need for scalable navigation and securing the necessary buy-in to proceed.
Descoped
To manage development scope, we cut a proposed "draggable menu width" enhancement. Because the core design already included a collapse-to-icon toggle, this reduction in scope had minimal impact on our primary goal of saving vertical screen space.
Before & After: Shifting to side navigation
Reclaimed vertical space and a scalable home for new subjects.
Maximising horizontal real estate
As users become familiar with the platform's architecture, they can collapse the side navigation to maximize horizontal screen space. This hides the detailed submenu text, significantly reducing visual clutter and cognitive load while keeping core tools accessible—ideal for data-heavy reporting.
2.4 · Class Management
Unify class settings into a single management mode
Having both a class landing page and a separate detail page created navigational confusion. I resolved this by merging "Manage My Classes" and "Manage My Students" into one streamlined Class Management mode, listing classes directly in the navigation so teachers could bypass the redundant landing page entirely.
Rollout
Supporting the transition for 200K+ users
At the request of the Sales team, I created transition guides for teachers and administrators. They gave our account managers a clear way to show clients what moved in the new navigation and where to find it.
Teacher page. What moved and where to find it.
Admin page. The new Admin mode and its school-wide pages.
Reflections & Next Steps
What launch taught us, and what I'd do next.
72% were satisfied and about 1 in 5 were not. Here's what that, and the weeks after launch, taught us.
Learned after launch
Never deprecate without a true replacement
We trialed removing legacy menu items to steer users toward a more detailed page. We quickly restored them after realizing the new page didn't support their specific, quick-action needs. Sunsetting features requires building a superior alternative first, not just a different one.
Don't bury high-value tools
We initially relegated the "Explore as Student" preview into the Help menu. Post-launch feedback proved it was a critical workflow tool, prompting us to elevate it back into the primary navigation tier just below Class Management.
What I'd do next
Investigate the dissatisfied 21%
Conduct targeted user research to separate genuine usability flaws from a natural resistance to change. Understanding whether users are struggling with a broken workflow or simply battling legacy muscle memory will dictate exactly how we iterate next.
Revisit the "Current Focus" widget
Setting a curriculum focus is a high-value action for teachers, but surfacing this directly in the navigation was cut early to manage scope. With the architecture now stable, testing and integrating this widget would be a top priority.
Closing the gap between design and build
I established Matific’s first design system on IBM Carbon, made build quality a shared goal through front-end KPIs, and added an AI-assisted QA agent so developers can check builds against the design before my review.
Next: Design & build quality →