ARAYA WONGWAN

INFORMATIONINFO EMAIL INSTAGRAM

Interaction and visual designer applying coding, psychology, and research background to bring new visions to digital. Constantly challenging myself to break boundaries and question the status quo to make positive impacts. Incredibly ambitious to help others and enhance the visibilities of social and cultural issues. Apart from web, I am currently art directing an immersive installation, co-founding an awareness platform, and learning motion design.

PRESS & FEATURE

EXPERTISE

Creative Coding / Art Direction / Visual Design / User Interface Design / Interaction Design / User Experience Design / Writing / Research / Rapid Prototyping

EXPERIENCE

Freelance Designer & Developer - Independent
Co-Founder & Art Director - PUBLIC, International
Research Assistance - Action for Southern Africa, London
General & Economic Policy Associate - The Black Institute, New York
Research Analyst - Nonviolence International, New York

EDUCATION

MA Interaction Design - Harbour.Space University, Spain
MSc Public Policy - University College London, UK
BSc Psychology; BSc Social & Critical Theory - Wesleyan University, USA

Discontent

Project

Discontent

: Interactive Interactive
Date published
April 2020
Project duration
6 weeks
Type of project
Simulated publication
Role
Art Direction, Visual Design, User Interface Design, Interaction Design, Motion Design
client
Anton Repponen
The Brief
To design an interactive experience for an article (as a part of Discontent online publication) to engage the user as well as encouraging them to stay on the page longer and learn about the content. The selected article is an interview of Lapalux’s new album ‘Amnioverse’ where an artist that takes us through his process of behind the album creation. *This is to be done for desktop only.
The Concept
‘Amnioverse’ album is an exploration of “self-created universe” through an amniotic-sac. The spatial sound indicated our smallness and vulnerability yet it is met with whispered vocals and articulated melodies to provide comfort and intimacy to indicate that we are not alone. The contrast between fear of loneliness and collective realisation is used to guide the experience of the article. An immersive universe is provided for the audience to experience the discomfort of loneliness. As the article goes on, they are distracted by interactive features that allows them to hear whispered voices, play with modular synth to replicate Lapalux’s sound, or even to enter different spaces. Consequently, the user is able to have an immersive experience of the album by the end of the article and find peace in the collective consciousness.
Color
The background black to simulate space while the text is white for legibility

Gtf Adieu

Aa

A B C D E F G H I J K L M N O P Q R S T U V X Y Z
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
0 1 2 3 4 5 6 7 8 9 10

Suisse Work

Aa

A B C D E F G H I J K L M N O P Q R S T U V X Y Z
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
0 1 2 3 4 5 6 7 8 9 10
TYPOGRAPHY & LOGOTYPE
The types selected are based from Discontent publication for the article to maintain brand’s consistency. Type treatment is also used in similar manner as the homepage where Adieu is the heading text and Suisse Works is the body text. For the purpose of this article though, Adieu is also used for the question text as well. Using two different types, one for the question and one for the answer allows the reader to easily understand the interview format and distinguish between the interviewer and interviewee.
THE GRID
The same 12-column grid was utilised to maintain consistency and give flexibility for the changing alignment of each interview questions. Each pair of question and answer are designed to look like they are floating in a universe, thus the perceived randomised placement although each pair are aligned to the grid to create a balance to the eyes.
INTERACTIVE ARTICLE FEATURES
Designed digitalised modular synth that user could hold their click and turn the knob to learn Lapalux’s process. The user is guided to recreate Lapalux’s sound by following the flashing red circle.
Utilised existing Lapalux album assets, by Maurice Andresen, as floating elements. Assets used are appropriate here as it maintains consistency with the album and they also fit the space theme of the album. Each animated asset lights up in different color on hover and plays a song from the album. This feature allows the reader to discovers the songs from the album while staying on the page, connecting what they are reading to what they are hearing.
Stroked letters are filled in according to the lyrics when the reader hovers the animated asset. This feature appears right after the interview question about spoken words in Lapalux’s tracks. Without leaving the page, the user is able to immerse themselves visually and aurally into Lapalux’s musical element. This further adds more meaning and understanding of the interview.
The “waiting room” increases its opacity as the user scrolls down until they are fully immersed in the full screen room. The image is taken from a James Turrell’s installation who is Lapalux’s main inspiration behind the album. In his answer to the previous interview question, he offered an insight about the installation image he would look at for everyday. He said “people are sitting in what looks like a waiting room lit in a purple hue, looking up at the dark night sky through a hole in the ceiling... it seems like we are all in that waiting room, waiting to be somewhere or go somewhere.” The feature offers the same waiting room experience asking the reader to wait for a shooting star that appears on scroll interaction. The “waiting room” ends with the reader entering the installation into black hole and the user is taken back to the article again.
One of Lapalux’s unique sound characteristic is his use of binaural spacial spanning integrating in every track. The technique allows the listener to hear sound in a 3D environment like you are in an actual place. This immersive feature is for the reader to actually interact with and experience Lapalux’s reply to an interview question directly before the room appeared. The user can click to change the X position and hear the same melodies but from different spatial sound within the room. The reader can scroll down further to exit the room back to the article.
The last feature of the article exemplifies Lapalux’s interview answer about music as emotional vent and healing experience. Here, the reader is presented with an equaliser that they can manipulate when they interact with different synth knobs. The equaliser is to provide a meditative experience as the ending encounter for the user.