Mathletics Avatar System
Working as a team to create a new avatar system for kids of all ages
- UI
- UX
- Userflow
- EdTech
The avatar system is very much loved in Mathletics by students, however the old version was created in flash and had not been updated for a very long time. Each time a new item was created, a dev would have to manually add these items - not ideal!
The issues
- The system was created in flash and there was a looming deadline of browsers cutting off support.
- There was no CMS, so each new item had to be added by a developer.
- There was no customisation by regions or countries, which increased the chances of items being culturally insensitive.
- Students had to select a gender before proceeding and features were not highly customisable.
The process
While the management system was complex, the front-end for the student had to be super simple.
For this stage of the project I created a purchasing userflow for the student to make sure we had all scenarios covered.
Prototype
When creating an avatar system for kids ranging in ages from 5 to 16 it was important to make it as simple as possible.
After a few iterations the final design had as few words as possible. The protype shown here is one of the earlier iterations.
Future plans included varying the interface dependant on age.
Internal CMS
In addition to the student interface we also needed to create a CMS internally for staff to update characters as well as create new ones.
This included the ability to exclude characters and clothing from particular countries, as well as being able to dress characters differently for regions.
Kids Workshop
A workshop with kids in grades 3 and 4 was run to test iconography as well as character styles.
In the first activity kids were asked to group character items using the iconography provided.
In the second activity kids were given a range of avatars and asked to organise them into groups they thought were younger, the same age, and older than them.
Issues
In our prototypes we discovered we were using too much text to inform students of their decisions. Our users as young as five, we could not rely on reading as the sole way to purchase items.
We went back through the UI and tried to remove as much text as possible while still keeping it intuitive.
The final result
A scalable avatar system that's easy to update and easy to use.
In addition to a new UX and UI for students, a content management system was created from scratch so that internal users could easily update items. We also allowed the ability for characters, categories, sub-categories, items and even colours be excluded from certain countries if needed, knowing that some items could potentially be culturally insensitive.
We received a lot of positive feedback from students from many age groups who were happy that the avatars now reflected their age and were also excited they had a full body avatar to customise, instead of the previous head and shoulders only.
