HACK@LRN – Animation & customisation

Blue Riding Hood

It can often feel like a struggle to create an embeddable product that is white-labelled by design. Any creativity is sacrificed to avoid “branding” the product and it’s ability to integrate into third-party systems with little visual impact.

With this in mind, one of our many talented software engineers, Jack Vo, understands the effects of a simplified User Interface on the most youngest audiences when seeking to maintain attention spans.

The link to the Hack Day project we created can be found here.

Summary of intent:

– To educate through story telling
– To show the Learnosity Question Types in a customised fashion

– Young audiences have a very limited attention span
– Client’s have been asking for ways to implement their own branded styles to the Learnosity Product

– Through the use of animation
– Pick a story and transform classical methods in to an engaging experience

The team that would deliver this project involved the following people.

– Software Engineer (Jack Vo)
– UX/UI Designer (Andy Crozier)
– Junior Front-End Developer (Samir Chahine)


After throwing around a few ideas and child themed stories, we decided upon “Little Red Riding Hood”
Dues to the spirit of Hack Day, we called it, “The original story of Blue Riding Hood ©”.

– Decsketchide on how many scenes the story would show
– Story & Animations
– Setup
– Design & Development

After the brainstorm, we broke down the story into scenes and chose which animations would take place, and what question types would be delivered.


Scene 1 & 2.

Quick introductions to the story.

Scene 3.

We engaged the audience by using our Classification question type to proceed with the story. The audience need to select the correct item before moving to the next scene.

To bring a sense of fun, we placed a pop-up over the screen if the user chose the wrong item.

Scene 4.

The MCQs used in this scene gave the user two options. Depending on the users choice of answers the story would take one of two alternate endings. This was done to educate about cause and effect.

Scene 5.

Here we created a puzzle style question based on “Simple Shading”, where the user needed to think about how to use the block to replicate the image behind.

Simple Shading

Scene 6.

This scene was created as a conversation between the characters of the story. Each snippet would be a question & response, moving the audience through the narrative.

MCQ Question Type

Scene 7.

Again, MCQ was used in this scene, but treated in comical way to re-engage the user.

MCQ Question Type

Scene 8.

This scene is used to introduce a new character and progress the story. No question is asked here.

Scene 9.

Using one of our latest question types “Hotspot” we asked the user to spot the visual clues, and select the correct target to complete the story.

Scene 10.

This scene is alternate, and is dependant on the decision made by the audience in scene 2. It can be either a positive, or negative ending.

Testing was important for the project, as the story was progressive.

Finally, after using 4 different question types, branded and styled to look completely customised, and using them to educate through story telling, we had an end result demonstrating the success and versatility of the Learnosity product.

Related Content

This post was posted in , , , , , by on