As an Interactive Designer, I was tasked with wireframing, creating UI assets and redesigning the experience of several existing educational games from the Noggin app. Normally, games and other interactive content have been released as a completed project without the need for constant updates. In this instance however, user data indicated a noticeable drop in engagement for several of these games. This not only lead to improving upon each game’s educational goals, but to also improve upon the thematic and whimsical elements of each experience.

While at the “International Shape Station”, kids are taught how to identify four different types of shapes - Circles, Squares, Triangles, and Ovals. For the latest iteration, the goal was to not only feature the various shape options for children to choose from, but to also have rockets that would be directly interacted with. When children dragged these shapes onto the rocket, the correct shape would then be transformed into a special part for the rocket, such as a window, door, or silly object (such as a pizza slice or clock). This approached helped to reinforce the ability of not only recognizing different shapes, but also identifying them within objects.

I wireframed the key interactions and designed the final sets of UI assets, including all of the colored shapes, the shape trays, the progress indicator, the customization assets + layouts, and the rocket’s special launch button and countdown controller for the game’s final payoff.

Link for Wireframes (Slides)