Interactive Design - UX - Web Animation

GPA Learn is an educational platform that has built a rich animated product to help teach kids K-5 math. The best way to explain the product is to have a look at this video first. It’s our product demo, showcasing the full scope of what our users would experience.

My primary role with the company for the past 2 and half years has been animating our interactive content. This is everything that a user (child) sees and interacts with while inside of a lesson. This covers so many things; from our guides that teach them, every scene and background, button animations, styling of HTML elements, even down to the smallest puff of magic smoke!

Adobe’s Edge Animate was our tool of choice for animation, very similar to After Effects but using JavaScript to animate browser elements in a web friendly manner. Internally, I was the creative guy in the engineering department. My goal was to bring polish to the product so that kids would engage with math, after some code assistance from our talented engineers.

Product Examples

Grade 2 - Instruction

Grade 4 - Practice Problems

Grade 4 - Interactive Demo
Try out the fireworks in the Ending Scene!

Interactive Design & UX

Designing a kid friendly experience is one thing, but making them want to come back daily for math lessons ... that raises the bar to a whole new level!

Above you'll see just a small sampling of the planning and development that went into crafting this interactive lesson experience for our users. Not only did we build a product for the users, but we had to develop a middle layer for internal staff to use the platform for content authoring and continuous testing as well.

From left to right: (links for greater detail)

In addition to constructing the animated content I worked hand in hand with our UX staff to craft a very unique approach to children's education online. Learning what we could from competitors in the marketplace, a richer product came to surface that would keep the user engaged and coming back for more.

Focus groups with parents and their children steered the process early on. Feedback from our support and sales staff further shaped the product, along with going into the field and working with the kids at sponsored events to see them interact with and make changes in a near realtime cycle of updating.

The real trick in developing a product for children is seeing seeing where they struggle. With users at a Kindergarten level you need to gauge their issues with them and help give them a voice that they simply don't have yet at that age.