Interaction Web Application - The Creation

The Creation is an interactive web application that enables users to experience the creation of the world from nothing. The application is inspired by the bible story: seven days of creation. Instead of telling a story to the audience with flat words, images or video that users have to learn negatively, an interactive application would allow users to explore the story by themselves positively. The interactions hide in each scene enable users to immerse themselves in the whole experience.

The whole interaction of the application is divided into 5 scenes. The design concept is to design the beginning scene as simple and deem as possible, which represent the chaos before the world is created. Then, designing the final scene bright and rich to stand out the contract between noting to everything.

Technique

HTML | JavaScript

P5.js library

Firebase hosting

Adobe Photoshop | Illustrator

The Project

Was received a HD grade.

Enhanced the engagement between users and the content.

Could help kid to learn the bible story with fun.

OVERVIEW

The interactions designed behind each scene minimized to having instructions to guide users what they should do, which aims to allow users to explore the application the interactions by themselves. Thus, the design of each interaction should accord with users’ mental model and mapping between interface items and interactions in the real world.

Mainly 5 scenes are designed in this interactive application, which telling the story of the creation from chaos to the colorful world.

SCENES

The design of the scene is basically based on the biblical story: 7 Days of Creation. Using different scenes to guide users to create a whole world of nature from chaos.

In these five main scenes, users need to find ways to obtain light, separate the sea and sky, separate the land, create the sun and moon, and finally create creatures.

At the beginning of each scene, there will be a title to introduce the following act. The elements in scenes are designed as plane drawing to imitate the cardboard props of the stage play.

Interactions

Interaction designed in this application combined many methods of interactions, including the actions “drag”, “hover”, ”click”, “keyboard input” etc. All the variety of interactions aims to keep attracting the user to explore the world without getting bored. The interactions designed in this application avoid too much instruction, guide or symbols to tell users what they should do or what they can do next.

The interactions like click this button to show the next slide like PowerPoints should is boring and tried to be avoided. On the contrary, if the user has to click around the entire interface to test out where is interaction hiding in the page, it is not a success interaction as well. Thus, interactions design in this application tries to mapping the interface item with the items in their mind or the real world. The design aims to increase the fun and minimize confusion.