Math Garden, Language Sea, Words&Birds

Shaping a learning ecosystem

The challenge was to unify an intensely used interface, specifically for kids. The old game screens were inconsistent, visually unstructured and lacked clear usability cues. On top of that, given the young age of the target audience, the interface could not rely heavily on text — in many cases, it was a child's first real interaction with a digital product.

Research

Users: The main advantage in the early discovery process was the close connection to the schools that would use the product daily; this allowed us to observe many daily struggles. For instance, children would struggle to find the same function in the same place in the UI, would have trouble learning the input mechanics in a new game, while a timer was running. This hampered especially the first usage. Also different input methods (mouse, touch) were not providing the right feedback.

System: when the initial minigame library grew from 5-6 minigames to 20, issues of maintaining such an interface at scale became apparent. The need from the developers for a design system approach with reusable components grew.

Game UI Design System

The key concept for the Game UI was formed around 3 main areas: the main game UI where question + answer controls were positioned, the immersive background illustration, and the peripheral UI, with overarching controls. The positioning of the main game UI was kept somewhat flexible, to accommodate for varying input options as well as background alignment.

The background graphics were reworked from the ground up, in collaboration with an illustrator who created bespoke scenes; the alignment of the main story was always on the left, so as not to interfere with the gameplay itself.