.svg)
.svg)
Introduction
Ochre Education is a national not-for-profit organisation in Australia dedicated to advancing student outcomes and closing the educational disadvantage gap. Their mission is to ensure that every teacher has access to high-quality, evidence-based curriculum resources via a central online platform.
With persistent inequalities in Australian education, where students from priority equity cohorts are up to three times more likely to fall below minimum standards. Ochre aims to provide accessible, shareable, and research-backed instructional materials to help teachers focus on what matters most: student success.
Project Requirements
Ochre approached Jhavtech Studios with the need to redevelop their existing web portal.
Enhance User Experience (UX) with a modern, mobile-first design.
Provide better accessibility compliant with WCAG 2.2 standards.
Enable advanced search and filtering of lessons and resources.
Implement a scalable content management system (CMS) for structured curriculum publishing.
Build a future-ready architecture that supports modular upgrades like AI-powered assistants and offline access.
Improve speed, SEO, and performance with headless technology.
Our Solution
We delivered a complete web platform rebuild using headless architecture powered by React/Next.js for the frontend and Sanity Studio as the headless CMS.
Frontend Optimisation
- React/Next.js with Static-Site Generation (SSG) and Server-Side Rendering (SSR) for performance and SEO.
- Mobile-first responsive design with clean navigation.
- WCAG 2.2-compliant UI for accessibility.
Future-Ready Scalability
Modular, API-first design to support AI-driven learning assistants, third-party integrations, and offline-ready features.
Advanced Search & Filtering
- Search by tags, topics, year levels, and resource type.
- Intelligent recommendations for lesson plans.
Content Organisation & Management
- Role-based CMS with structured content hierarchy (Curriculum → Subject → Year → Unit → Lesson).
- Support for multimedia resources (PDFs, videos, quizzes).
- Easy workflows for authors, reviewers, and approvers.
Cloud-Native Infrastructure
- Hosted on AWS with CDN via Cloudflare for speed and scalability.
- Auto-scaling architecture for handling high traffic.
Frontend Optimisation
- Integrated PostHog, Google Analytics, and Matomo for real-time user journey tracking.
- Dashboards to monitor resource usage, downloads, and engagement trends.
Features Implemented
Redesigned entire UI to fresh look and more optimised pages, URL and SEO friendly.
Using REST APIs to fetch data from server and display in the app.
Improved user experience for ease of user journey on platform.
Instead of multiple pages navigation, built a module to access all resources of all curriculum from single page.
Replaced manual CMS to headless CMS system (Sanity Studio Headless CMS).
Implemented search bar which will help the user to search by curriculum, subject, and year level.
Built new layout to see news and views section.
Design Process
Our design approach was focused on making the platform teacher-friendly, intuitive, and highly accessible.
Discovery & Research
Stakeholder workshops, teacher feedback sessions, and UX audits of the old platform.
Wireframing & Visual Design
Developed responsive UI mockups in Figma.
Information Architecture
Restructured lesson content with logical navigation and category mapping.
Accessibility First
Applied WCAG standards with clear typography and color contrast.
Development Process
We followed an agile, phased development approach.
Phase 1
Discovery & Planning
Conducted UX audits, defined KPIs, and prioritised MVP features.
Selected the technology stack (Next.js, React.js, Node.js, Sanity CMS, MongoDB).
Phase 2
Foundation Build
Set up cloud infrastructure and CI/CD pipelines.
Built the base frontend in Next.js and integrated design system.
Configured Sanity CMS roles and workflows.
Phase 3
Content Migration & Teacher Portal
Migrated existing curriculum into the new CMS.
Built teacher dashboards with authentication and content-saving features.
Enabled “recommended lessons” feeds powered by analytics insights.
Phase 4
Professional Learning & Analytics
Integrated Ochre Learning modules for professional development.
Connected analytics dashboards to monitor engagement.
Phase 5
Continuous Improvement (Ongoing)
Iterative feature rollouts based on teacher feedback.
Planning for AI assistant and offline-first capabilities.
Technology Stack
Frontend
Backend
CMS
Database
Hosting
Analytics
Frontend
Backend
Database
CMS
Hosting
Analytics
Why This Project Stands Out
The Ochre Education Web Platform is a future-ready, teacher-focused solution that makes high-quality resources easily discoverable, usable, and shareable. By integrating headless CMS, advanced search, analytics, and accessibility-first design, we helped Ochre streamline content delivery while building a scalable foundation for innovation in EdTech.
Looking to transform your digital education platform?
Explore our Custom Web Application Development Services and UI/UX Design Services to create engaging, scalable, and future-proof solutions.
See it in Action
