Netsafe Kete: Delivering resources and inspiration to NZ’s educators
Overview
Netsafe and Voyage have teamed up on a multi-phased project, with the Kete Education Hub the first phase. As with any long-term relationship, first we had to get to know each other. Our initial discovery workshops laid out the plan and created a priority list so we knew where we were starting, and thus the education hub project began.
Client
Netsafe
Technologies/Services
Design
Sanity CMS
Next.js
Algolia
Supabase
Bringing the tools and resources to educators around New Zealand
Right from the start we knew the website had to cater to educators, meaning teachers, homeschooling parents, and other key stakeholders within the community and sector. Overall, our job was to provide a central repository to find resources, tools and inspiration easily, efficiently and enjoyably.
In the discovery sessions, our design and development leads gathered important information, offered various solutions or options, gained clarity over what the Netsafe team wanted and what they didn’t, and began to formulate our direction and the scope of the project.
Finalising important details
Two main findings from the discovery sessions were around the login and ease of use. When it came to how the site would function, the Voyage experts quickly came to the conclusion that the main homepage would be minimal in content offered, and the greater repository of content and tools would exist behind the login.
In this way, the Netsafe team would have insight into who was using the resource, and could ensure it’s only used by educators and isn’t being plagiarised. On ease of use, as the former Netsafe site was an overly complicated WordPress site, it was important that the Kete Education Hub would be simple to navigate, and find and edit content.
Creating sitemaps and designs for a winning website
Finalising a sitemap using the Octopus visual sitemap tool and website planner allowed Voyage to create a thorough overview of how the final site would be organised and structured. At this juncture, Netsafe had the chance to flag anything that needed changing and give the final go-ahead to development.
Next came designs. This required a couple of iterations to ensure the colour palette and general aesthetic experience of the web platform suited all stakeholders. The final decision saw Voyage moving away from the original Netsafe blues and colour tones to a more pastel, calming palette.
The design phase coincided with a re-brand for Netsafe, which required the Voyage experts to adapt in kind, while also not losing sight of the conclusions reached during the discovery sessions.
This project was also an excellent opportunity for the Voyage team to implement the principles and practice of content modelling. Essentially, this is a process that allows us to map out the content of a website or app so we know exactly what we need and why. It also flags what we’ll need at each point of the site build to ensure the finished product is fully functional and serves its purpose.
“We’ve found it’s key that we don’t lose sight of what we know works and what we’ve discovered in our research. It can be difficult to take a step back and look at something anew, but we have to remember to trust in the workshop findings and our own discernment if we want to deliver something that goes above and beyond what’s already in existence.”
Scott Bloomer - Lead Designer, Voyage
A fully functional and intuitive education hub
The final Kete Education Hub boasts a whole host of features and functionality, captures the new direction of the Netsafe brand, and delivers on the wish list compiled by the stakeholders in the initial discovery sessions.
Educators that visit the site are invited to set up a login, create a profile with chosen details about themselves and their role, and peruse the resources at their leisure, saving their favourites to their personal kete. These resources include information blogs and content, as well as interactive tools and quizzes. With a streamlined menu, it’s straightforward to hunt out content based on a specific query or topic, for instance year groups, staying safe online, or advice for parents and school staff.
Bringing in top tech to solve real challenges
During the website build, the development team came up with simple and elegant solutions for Netsafe’s wish list. SanityCMS was foundational in making maintenance, organisation and editing of the site much simpler. It also effectively safeguards the site for future ideas and iterations as it’s very easy to add in more micro-sites and features, and to continue to build out content over time.
MagicLinks was used to make the login process one-click and remove any worries about passwords. Supabase was used for authentication and user management, NextJs for a beautiful frontend, Vercel for optimised hosting, and Algolia to make search as functional as possible.
Simplicity, customisation and accessibility were all aspects of this website build that went above and beyond brief. The Netsafe team can add, change, update and build out any resource or aspect of the site with ease in the backend of the CMS, which is much more streamlined than their previous Wordpress site.
The capability review tool, created to generate a strong culture of online safety and digital citizenship across schools and students, was made completely from scratch and enables educators to assess current capability, identify areas for development, and track progress towards school online safety goals.
Finally, accessibility is something we’re very passionate about at Voyage - after all, we want as many people as possible to be able to use digital platforms. We included key considerations around colour contrast and usability from the front and backend to make sure both the Netsafe team and educators could use the Kete fully.
