A non-linear immersive web experience adapted from a Chinese myth.

Play!

Task

Consider the story itself, and the affordances the story has, the things you imagine off the top of your head that might be interesting about telling it for this class. We recommend finding a myth from any culture, as myths are made for retelling and are episodic, so you should be able to find something that can be told in a short piece.

Goal

1. Allow the audience have a certain level of agency
2. Develop characters in depth
3. Create intimacy between the audience and the characters
4. Only use text and shapes. No videos or images.

Inspirations

• Rashōmon - each one’s side of story is not to be completely trusted
• Legend of the White Snake

Process

Story Affordance

• Romantic and mystic folklore
• Rich characterizations on the two main characters
• Well-developed story
• Romance-oriented rather than rivalry-oriented

Elements to focus when telling the story

We aim to focus on character, thought (theme, idea), and spectacle out of Aristotle’s six parts of a tragedy to create an enticing, interactive non-linear narrative.

Technology Affordance

We wanted to focus on creating an accessible website in the form of shapes and texts. The affordance of the website allows easy access. Especially during the pandemic, it is quite even difficult to create something physical. The website aims to target a broader audience and allows us to get user feedback.

Character Development

We grew up with the stories of the white snake in the forms of movies, television shows in our generation. One big flaw of the story is the characterization of The Monk and Miss Teal has been very poor. So in our adaptation, we wanted to give equal weight to all four characters in the story: Miss White, Xu Xian (The Husband), Miss Teal, and The Monk.

In terms of using the website as the technology, we want users to solely focus on the story through texts and audio so we avoid any usage of images and videos. We believe the power of imagination is the best way to connect the dots and help develop the characters in their minds.

Also, everybody’s attention span is finite. We want to use only text, audio, and shapes to pull users closer to their imagination. We decided on making the circles but give them individuality in their movements and color to echo the characterization in the audio design mentioned below.

Script development

In order to create the court setting since we both agree making the audience being a judge will create a sense of duty for them to make a decision. To involve them in the scene right away, it would make sense to create the script based on the incident where the flooding took place which killed a bunch of innocent creatures.

It was reported that the innocent creatures in the Golden Temple were killed by an unnatural flood, allegedly caused by Miss White. You are the judge. You will hear stories from four characters and you are to judge who is guilty. You are deciding if Miss White or The Monk is guilty of the charge. Click on the color circle, to hear their stories.

Database Development

In order to code it and get the answers to the corresponding questions, I created a database in excel to make it easier for coding.

White Snake Database

Audio Design

We also wanted to create an audio recording to embellish the characterization of each character. Originally, we wanted to record word by word based on the script. Through our two rounds of user testing, some observations and feedback led us to summarize the emotion for each answer. The feedback afterward came positive that they felt a sense of connection with the character.

Next Step

1. Make better UI to avoid double clicking
2. Add more characterization in the moving circles
3. Redesign the intro page to make the circles move more like crowds escaping from the flooding with sound design

Conclusion

It is a wonderful remote collaboration with Wen Chen and we spent 3 weeks working on this for the class Out Of Order by amazing instructors Kio Stark and Mia Rovegno in Fall 2020. Pandemic hasn’t made things easy but I am so glad that I got to still create with these amazing people.