A complete web app platform for maths educators
On this small team, I was responsible for all design and development of the MathsBURST web app for students and teachers. The MathsBURST team includes world class academics and passionate classroom teachers. We worked collaboratively to build a maths education platform for primary schools in Australia.
It’s unusual for a designer to handle full stack development for any project. This was a unique opportunity, and I was greatful for the trust from the team when I put up my hand to build my initial designs. My prior experience building prototypes and MVP web apps meant I was ready for this challenge of scaling to real users. Being able to work closely with our small team to keep the scope tight, given the constraints of my time has been a big factor in this hybrid role.
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.
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.
These observations were something we'd keep returning to as we developed the app for teachers and 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.
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.
Is this frustrating?
You got them all!
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.
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.
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.
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.