Gamification Strategy, UX Design & Web App Development
Maths Whizz
Developing a gamification system to engage and motivate kids to learn with a virtual maths tutor.
The leading virtual math tutor in the UK, Maths-Whizz, was established more than ten years ago. Due to its adaptability, it was and still is a distinctive product. It is able to guide students through a personalised learning journey that simulates the behaviour of a human tutor. Whizz Education appointed Milo as their UX design agency to conceptualise a gamification system and to validate the design. We developed a gamified learning journey that integrates with the Maths Whizz virtual tutor.
The gamification challenge
Maths-Whizz asked Milo’s UX team to create an engaging and visually exciting gamification system to motivate children. Maths Whizz currently reaches 150,000 students in the UK, US, Kenya, UAE, Russia, Thailand, New Zealand and Mexico. The gamification system needed to work across these geographic locations and expand to more regions in the future.
Gamification system to improve learning outcomes
Maths Whizz wanted to increase confidence and motivate pupils in order to deliver improved learning outcomes. And the gamification system needed to engage learners whether they were learning at home, school or remotely. This called for lots of animation, sound and a very interactive experience with lots of rewards. Our challenge was to develop a gamification strategy that would motivate children over a long period of time. To do this we co-designed the app with children who helped design an engaging and gamified user experience
Integration with Maths Whizz tutor API
The gamification system would need to be developed as a web application in HTML5. Also, the app would need to integrate with the Maths Whizz tutor API. The web application needed to be fit for purpose for the next 10 years from a design and technology point of view. Crucially, the new app would have to work for children as far and wide as Kenya, US or Thailand.
Co-design & UX workshops
From the word go the UX team worked really, really hard at understanding the audience. We were very careful not to take a “one size fits all” mentality. We were keenly aware that the product needed to work for all children in all countries.
We researched Whizz users in every single region to define their key needs, wants and pain-points.
We waded through reams of user feedback logs, some with the strangest requests, to find what would bring delight.
We visited schools and spoke to teachers.
We set up co-design groups to help us understand what makes children tick, how they want to learn.
We looked at what type of gamification system would keep them coming back.
Gamification strategy
Our UX team created an immersive, exciting and modern world that would entice children to learn. The gamification strategy provides motivation, healthy competition, and visibility of their progress over the short, mid and long term.
Intrinsic and extrinsic motivation
The gamification strategy targeted children's intrinsic and extrinsic motivation focusing on rewarding users during the current session of play. It provided targets for progression over the course of one week, rewarding consistency in the mid-term and highlighting topic progression over the long term. Leaderboards offered an opportunity for students to compete with other users. This offered an incentive for returning to completed activities for revision.
Personalisation and themes
During the co-design workshops children told us that they wanted to personalise the site by selecting options. We recruited a top illustrator to deliver the modern and enticing visuals that children and the future of the brand demanded. And, we collaborated with children through co-design workshops to determine what the themes should look like. Using moodboards and sketching techniques we developed the themes together with children. They designed a range of different themes, from outer space to the jungle.
Avatar builder, room and shop
We introduced a highly customisable avatar builder. The Avatar Builder proved immensely popular with the audience. With lots of fun clothes, hairstyles and accessories for users to choose from, users could spend hours playing.
This is soooooooo much better, the avatar is awesome!
Maths whizz user, 9
Each user has a room for their avatar to live in that they can decorate. To purchase new items users use the credits that they earn as they progress through their personalised maths journey.
A new maths tutor
Through co-design workshops with children it became apparent that the existing tutor would need to be re-designed. The existing Maths Whizz tutor did not translate well across different regions, ages and genders. We co-designed a new tutor with children and replaced the old professor with a new robot character. The new robot character had a much wider appeal.
Web application development
To bring it all together, we had an incredibly talented group of web developers that future proofed the site. It was built in HTML5, using React’s component model and Redux for state management.
We simplified site navigation and came up with interactions that would also work on tablets and touch screens. We used SVG environments and graphics so that they can scale both to current and future devices. This delivered excellent performance across both web and mobile devices.
Loved by children
The new gamified user experience design was launched in 2020. The web application transitioned smoothly from the old Flash based site onto the new one. The gamified app preserves the children's progress and their achievements, and onboards them into the new environment.
Maths Whizz has endless customisation options that can be unlocked through learning. Our educational maths gamification system guides children through an interactive world of learning that is built just for them.
Working with the Milo team was a great experience. The project was handled incredibly well and the team were very supportive and helpful. A very creative and innovative experience.
Lindsay Brownsword, Product Owner
App design & development services
Gamification, UX design & web application development
Maths Whizz required the services of a multidisciplinary team. We helped them with gamification strategy, UI & UX design, illustration and web application development.