MathsBURST

A complete web app platform for maths educators

A Complete Platform

MathsBURST was built to be fully integrated platform, with all the components easily accessible to teachers and students through a single account and web app. This included, lesson plans and professional development material. Student's dashboard and access to Challenges. Assessment tool for measuring progress of the students at the start of the cohort and at the end. Plus of course support resources for teachers and schools.

We built the program around the concept of phases, which allowed teachers to progressively be directed to different features and content for students, in sequence as they progressed though the year. This helped orientate the teachers in the app, reducing the cognitive load for an already busy classroom.

Early Observations

Through my experience with the ELSA team, I understood that using technology in the classroom comes with many challenges. During my time on this project I was able to visit a number of schools, using the app in the classroom. Many teachers would also contact our team with feedback for us. Here's some shared observations I kept in mind.

• Many primary school teachers lack confidence delivering math content, having never received any professional learning on the topic.
• Digital devices varied greatly from school to school, the games need to work well on older iPads, latest Chromebook, classroom TVs. The only consistent platform was web.
• Huge burden on teachers to administer devices, and get students logged on. We need to make student access effortless and administration limited.
• Some students with english as a second language

These observations were something we'd keep returning to as we developed the app for teachers and students.

Engaging Students

Many of our students share devices with their class mates and therefore need to log in and out of the program frequently. It's critical that students use their allocated accounts, we wanted students to personalise their account so it's easier to identify that they're logged in.

The 1st idea I tried was to allow students to create an Avatar in MathsBURST. I used an open source project called Avaaaatrs by Stanley Pablo to get the idea up and running.

We quickly found that Students loved to create the Avaaaatrs. Their creative Avaaaatrs really makes the UI playful and fun for everyone. Teachers could better identify students in their reports and class management. Having a fun representation of students in the app was handy.

---

Student Achievement

Our teams educators identified that students needed to self reflect on their progress during a game. We want students to celebrate when they're showing mastery of the concept, or stop and seek help from a teacher when they're struggling. Using a student's own Avatar is a handy way to engage students. To make the moment even more engaging I collaborated with illustrator and animator James Daley to produce background animations using Lottie. Our students loved seeing themselves celebrate their own progress.

Good job!

Is this frustrating?

You got them all!

Game Design Process

The goal of our games is to give students and the teacher confidence that a student has understood a concept covered in our lesson plans. My role was to make sure the game is translated into a UX on the web, making sure the UI supports the challenge and doesn't burden the students with extra load and stress, to an already challenging experience.

Our education experts have a strong understanding of what a game should test, and what is challenging about a game. Our team would break the challenge concept into multiple needs, and I would show how those concepts could work in the browser, using conventional and unconventional UI patterns.

Early sketch

Prototype using Three.js

More prototyping experimenting with colour contrast, using Three.js

---

Example of how a game could be configured in Airtable and previewed in Storybook.

I was able to draw on my experience as a game designer on Active Memory, to make sure our workflow was favorable to rapid iteration. Quickly prototyping the challenge using JavaScript React components would allow us to test many UIs quickly. I used Airtable and Storybook to allow the team to preview the work in progress, and tweak the parameters of the game. We’d then refine the game based on feedback from teachers and students. Rapidly building a game this way was very quick, as we could reuse components between games.

A key design principle of this project was that each challenge level reveal the answer, so students could be sure of where they went wrong. These transitions were always animated to be revealed.

Example of a maths game question for Grade 3.

We always take care to explain the correct answer.

Reflections

This project was a blast, and I learnt so much. It was really fun to try my hand at full stack development, and I was really proud of being able to stand up the service in such a short amount of time with the support of my team. I really appreciated the opportunity to utilise my learnings from a previous project Active Memory, and the Challenges I built for students I thought were effective and easy to iterate.

Early on, I struggled to translate my UI designs into polished user interfaces and came to understand the value of a design system that had consistent tokens and UI elements. You'll find I'm now a very enthusiastic user of a design system when it's offered, as I now know how problematic is can be to undo and consolidate UI that doesn't have that underlying infrastructure.

Finally for all the teachers who use MathsBURST in their clasroom, thanks for giving us a go and all your wonderful feedback. The fact that MathsBURST was used by thousands and thousands of students across Australia, is really humbling to me.