Matific · Teacher & admin navigationTeachers
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.
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.
- Sole designer
- Navigation & IA
- Wireframes
- Visual Design
- Prototyping
WithProduct ManagersWhenReleased Jan 2026ForTeachers and school admins
Results at a glance: in-app survey after launch
Highly positive early reception, with a framework built to scale
72% satisfied
with the new side navigation
Extremely happy 49%
Happy 23%
Neutral 7%
Unsatisfied 12%
Extremely unsatisfied 9%
About 1 in 5 were dissatisfied, which points to what to evaluate next.
How we measured
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
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 1
Logo
5 Primary menus
5 Secondary menus
Top Navigation Bar 2
Page title
Class selector
Page-specific menus
Admin Menus
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
01
Requirements & Alignment
Partnered with Product Managers to ensure all user needs were covered and to gather feedback on early concepts.
02
Structure & Design
Explored and tested structural concepts through wireframes, ultimately proving that top-navigation models failed and pivoting to a side-navigation architecture.
03
Review & Iteration
Crafted high-fidelity visual designs and interactive prototypes specifically for board-level demonstrations and final approval.
04
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
Unified Selector
· Chosen Direction
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.
Verdict
I recommended Option 2, securing immediate alignment from the Product Manager and subsequent board approval following the prototype demo. By eliminating error states entirely and scaling seamlessly with the subject roadmap, it was the clear winner.
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.
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.
Legacy architecture: The intermediary class landing page
Before
Unified architecture: Classes listed directly in the navigation for one-click access.
After
Go deeper Roll out guide
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.
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.