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

Round table

Project

Round table

Date published
June 2019
Project duration
2 Months
Type of project
Educational / Non-profit
Role
User Interface, Interaction Design, Front-end development
Team
Thipok Suwanmanee
client
Purin Pictures
The Brief
To design and code a film conference website for recent undergraduates. The art direction utilises the equalised power dynamic of all those attending - students, experts, teachers - sitting in the same table and discussing ideas with an open-mind. The website needs to be new and interesting to attract Gen Z who are already familiar with digital, especially web technologies.
The Concept
The website adopts anti-design principles and brutalist features that are playful, dissimilar, and at times awkward to intrigue young viewers. Most of the user interface design utilisies and integrate the repetition of circles motif to emphasise the ‘roundtable’ concept of equalised discussions. There are several hidden features in the website such as map pop up on address hover and additional pop up of each panelists’ biography upon name click — the features are intended for Gen Z to stay on the website longer and discover unexpected and novel attributes. Developed the five pages using HTML, CSS, and vanilla Javascript. Presented in Thai and English for either language speaker to be able to access the information and attend the conference.
Color
Hyperlink blue, black and white are the given art direction colors for the entire event. The website utilises a 50-50 split of white and blue to contrast and complement each other. Both colors are used for the foreground in text and forms as well as for the background. To differentiate from mainstream websites, visual hierarchies and selected states are established using forms and size rather than a highlight color. Black is used only for the panelists’ biography. The color builds an additional dimension to the when they appear on top of other colored circles that the user is already familiar with. The sole black contrast rewards the user for finding the hidden feature.
Motif
Cicles, circles, circles. From buttons to content sections, circles are used to as a running motif to organised information, draw attention to particular elements, and indicate selected states. The overly dominated form differentiate the particulate website from other generic conference websites and guides the user through the website in a novel manner. Usage of circles resounding throughout the design also futher emphasises the concept of roundtable and brings the message home to the audience.
Side Navigation
The side navigation toggle allows the user to easily switch between pages. It also enables the user to focus on the particular page without any superfluous distractions. Selected and hovered states are indicated with outline stroke text.
Additional Feature: MAP
The map image appears upon the hover of the address, as an additional guidance for the user, and dissapears as the user moves the mouse away from the area. The hidden feature is an additional surprise that allows the user to get more information while not distracting them from the main content. Moreover, the toggle between the main text and map image enables the user to solely focus on one content at a time and not be distacted by too much information.
additional feature: panelist’ biographies
The each panelists’ biographies appears upon the hover of their underlined name. The black circle contrasts other elements in the website, bringing attention to the content, yet has similar forms and format to the rest of the website to maintain consistency. The pop up acts as a fun surprise for the user.