ABOUT THE GAME
This interactive web comic illustrates the connections and conflicts between individual and the society.
The readers follow the life of the main character, leaf tea, through a series of screen-based interactions and visual sceneries. With the added voice-over narratives and sound effects, ODDINARY provides an immersive web experience that conveys strong personal and emotional messages.
ROLE: Game Designer, Artist, Developer
LANGUAGES: HTML, CSS, JavaScripts
PLATFORMS: Photoshop
TEAM SIZE: 1
TIME FRAME: 2 semesters (2017- 2018)
Responsibilities:
-
Developed and designed interactions, visual effects and voice-over narratives using HTML, CSS and JavaScript.
-
Created concept art and graphic for comics using Photoshop.
-
Conducted user testing and proposed solutions to player experience hurdles based on user feedback.
DEVELOPING THE GAME
Character Design
In addition to the image performance of the main characters, through images, the transmission of hidden messages from metaphors and symbols increases the aesthetic value of the short narrative
The unique flavor of each cup of tea represents the unique characteristics of each person
The appearance of leaf tea is designed to look like creatures that live in the sea
Weaken the structure of the cup to highlight leaf tea
The large rim of the cup is designed to represent that the leaf tea is easily affected by others
A tea bag with a uniform taste means that everyone becomes the same
Only follow instructions from the indicator. Tea residue represents the characteristics of different people
Weaken the structure of the teapot to highlight the tea bag
The closed rim of the teapot represents the self-involved state
Tea maker represents the social expectation from society
Story
"ODDINATY" tells the story of a leaf tea's arduous journey in a tea bag factory as a stranger with unique taste. It shows the four processes from birth to gradual forced integration into the mainstream society - birth, disguise, pretending, and correction.
In the story of ODDINATY, "Scroll down" to explore what happened.
Correction : As time goes by, the leaf tea was constantly experiencing the demands of changing itself while surviving. Leaf tea readied for the final change -being crushed
However, with a sudden impulse to be a savior, an “awakened” tea bag save the leaf tea. The leaf tea was stunned by this act. It felt awkward to once again be “determined” by something in the world it lived in…
Born: A gust of wind blew a leaf on the tree. As the player "Scroll down" through the process of making tea by sunlight, hand rolling, and drying from the tea maker，this leaf became the protagonist – leaf tea
Disguise: When the leaf tea entered into this incongruous teabag society, it found that the overwhelming hostility from tea bags was inescapable.It carried out its first transformation, it curled its body and changed into the shape of a teabag
Pretending: Fear being isolated, the marginalized leaf tea carried out its second transformation… Then, the added milk and sugar had eroded its body
Storyboard
Interaction Design
Progressive stage exhibition
Progressive stage exhibition further capitalizes on the digital environment by allowing illustrations to progress vertically across the viewing area. Readers have the power to reveal story elements by scrolling down the screen, thereby advancing the narrative.
REFLECTION
The inspiration for this interactive comic comes from 'Florence' and SBS's news game 'The boat'. I aim to unite hand-drawn artwork, animation, text, sound, and archival material to explore a serious topic through an innovative storytelling approach that pushes the boundaries of the traditional graphic novel form.
During the design and develop process, I realized that comics allow readers to view other people's stories from a third-person perspective. However, with interactive comics, the inclusion of interactivity bridges the gap between the protagonist and the player. Even when some interactions are as simple as QTE (Quick Time Events), players still experience a sense of being the main character, enhancing their empathy towards the protagonist. This project solidified my determination to pursue a career in interactive media design.
