Quick Maths Jr. — Report Card
Quick Maths Jr. is a math learning app aimed at children aged 4–6. It uses an adaptive system to track what players have learned and to slowly introduce new and more difficult content.
This progress tracking occurs behind the scenes without the child being able to see it.
Shiny Things needed a way to show player progress to teachers and parents. This would allow them to see what children had been learning in the app and also to identify any areas of difficulty.
Shiny Things also wanted to emphasise the value of the app for parents by making the amount of content more visible and by linking that content to US, UK and Australian curriculums.
QMJ is made up of mini-games with multiple skill levels in each game. The mini-games are grouped together into different “towns”.
The report card shows what the child is learning and how they are progressing through the content. Overall progress is shown at the top level and progress by town, game and skill is revealed as the parent or teacher steps further into the data.
This means that parents and teachers can access a simple overview of a child’s progress which can be understood at a glance. If they are interested in seeing greater detail, they have the option of burrowing further into the hierarchy.
To help teachers and parents understand how the games relate to the curriculum, the report card lists all the educational skills practised in each game. Each skill is then linked to relevant parts of the US, UK and Australian curriculum.
Too many levels of hierarchy can overwhelm a user and cause them to lose track of their place in the hierarchy. I explored different layouts to present the hierarchy.
The key is the set number of games per town which allowed that level of the hierarchy to be compressed so users can tap on a game to open it directly. Users can also swipe left or right after opening a town to switch to other games in the town.
The report card builds on the existing style and colour palette created for the games. For consistency, I used Report — the typeface used in the main app — for navigation and titles. Where the curriculum content is displayed I chose to use Avenir instead for easier reading by parents and teachers.
While exploring different options for progress indicators I realised that the minimum progress that could be displayed would only be a couple pixels unless the progress bar was quite long.
Seeing such a small amount of progress may feel discouraging for users. To avoid this, we decided to explore ways to show progress in a more significant way. This led me to the circular progress bars which allow a much longer bar in a small space.