Design As Well As Develope
Interactive Design for Donut English

Client / New Oriental Group (koolearn.com)
Time / Late 2018
My Role / Interactive Design


Brief

The New Oriental Donut English is a New Oriental online children's English brand designed for children aged 4-12. Children's English course, with professional European and American foreign teachers, rich animation scenes, Cambridge Guess What textbooks. The interactive teaching session will multiply the children's enthusiasm for learning English and let the children talk to the world. I designed the logo motion, the user guide, and the treasure chest opening motion graphic of the application. In this project, I used Lottie and After Effects to decrease the process of developing and improve user's experience.

Logo Motion

Based on the meaning of the brand signature, I designed the logo motion of blinking. Moreover, I used the elastic expression to make it more interesting. The motion refers to real-world motion as much as possible.

Interactive User Guide

First I did the prototype by principle. The concept is to build a positive and pleasant response to slide. Parallax effect was used during this period. Moreover, the custom illustrations were designed to be kind to children.

Treasure Chest Opening Animation

Gamification learning style can improve children's learning enthusiasm. This was designed to motivate children. When children behaver well during classes, they will get points to open the treasure chest. Animation has rich colors to motivate children.

Develop

In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.




GUESS YOU LIKE


Function Branding and Creative
Calendar Design
Idea Mapping
Creative Typography