Responses by Akufen

Background: Part of the National Film Board of Canada’s education initiative, the website and online platform of Ocean School is a groundbreaking educational experience with the mission to provide learners with tools and knowledge to understand the ocean. The web-based platform uses 360-degree videos, interactive games and mixed reality to engage and educate. Built with Inquiry-Based Learning as its core approach, the platform focuses on student engagement to build knowledge through exploration, experience and discussion.

Highlights: The custom flag creator. Students can build their team flags with different flag shapes, patterns, colors and icons. Additionally, the strongest visual element of the project is the “3-D CUBE,” which illustrates the location of the expedition in a realistic, but also gamified way. The location is brought to life with unique 3-D elements like a whale swimming by, Peggy’s Cove’s lighthouse, seagulls flying above and realistic terrain features.

Challenges: The multiple entrypoints and the integration with Google Drive and Google Classroom. When we learned that Google Drive/Classroom was something that teachers used in every class, we reworked the whole platform to integrate the possibility to create and edit assignments associated to each learning activity using Google’s API.

Favorite details: There was an amazing collaboration between our design team, our development team and the client. Each party was invested in creating an immersive experience that would connect students with the subject matter. We were revolutionizing how students learn and we took this very seriously!

Time constraints: We were lucky to have been able to launch the project in multiple phases, launching the student platform and website first, and then launching the teacher's intranet at a later date. The hardest part was coordinating all the players and parts to have the components completed at the same date.

Technical features: It was the first time we combined React with a Craft as a headless CMS. For the different animations, we used GSAP. Our 3-D features were handle by THREE.js, to which we added custom shaders to improve the immersive nature of the experience. We also used a Node JS real-time pairing for our interactive Web VR games.

Anything new: We learned about the reproductive system of an oyster and the difference between a pre-spawning and a post-spawning cod. However, our development team pushed the boundaries technically, working with Web VR, the integration and 3-D elements in interactive in-browser games, optimizing for chromebooks and ipads to increase availability to more schools, and learning to navigate and customize the Google Classroom API.