Interaction Design

Interactive Exhibition for Performative Objects

This projects reflects how I implemented creative coding to artworks with UX practices.

In Spring 2018, I participated in a transdisciplinary experiential project. We UCI students work in collaboration with students at Rhode Island School of Design (RISD) to design, implement and demonstrate a series of Performative Objects. Responding to the theme of The Storm, the Performative Objects are artworks and devices, inspired by natural phenomena, that are intended to be unpredictable, inhabitable and performable.

We presented a work-in-progress showing of the Performative Objects in conjunction with the production of Living in the Tempest at the Irvine Barclay Theatre in early May 2018, following which we collaboratively developed an online gallery website to showcase Performative Objects processes and products. During this time, I was immersed in proposing creative approaches, sharing inspiring ideas and communicating with different dancers, musicians, designers.

Define user profiles and learn the needs

Living in the tempest is an experimental intermedia performance inspired by The Tempest, Shakespeare's mystical masterwork. There would be a number of audiences coming for the performance and lobby exhibition. These audiences are participants of our artwork exhibition. Through anecdotal research and interviews, I found some patterns to create three different user groups, which helped to inspire design ideas.

  1. They know the theme of the exhibition and familiar with the original design of the performative objects.
  2. They expect for creative settings and eye-catching effects.
  3. They need to make sure all the implementation should be feasible and safe due to the site limitation.
  1. They are usually friends of participants of the events.
  2. They are from different academic backgrounds and are interested in intermedia performance.
  3. Socializing with others and learning new things are their important purposes.
  1. They are curious about this intermedia performance and expect to see something interesting.
  2. They are happy to spend more time in exhibition if objects are interactive and playable.

Iterative design (individual work)

According to my personal preferences, I choose to collaborate with Leah Yin Lin (RISD), whose initial design and conceptualization is shown as follow:

'By dropping ink into water, I create a storm. The surface records the weather pattern, color fluid behaving chaotically but dynamically as dancers, are instruments of beat and rhythm in the play. The magic of Ariel reflects the atmospheres of Prospero’s struggle - anger, regret, revenge and his power, conveyed through the emotional storm underwater.'    --Leah Yin Li

The ink video was very beautiful and fancy and I decided to maximize its appealing effects based on user needs analysis. I wanted to make it more than just a simple video played on the moniter together with other various videos. Finally, I came up with a solution to to demonstrate the objects in a performative setting which satisfies the needs as much as possible with limited space and technical devices.

Based on the original video, I use Unity3D to create an app which makes the video touchable on the iPad screen. Everyone can generate special and unique visual effects with finger touch.

Every touch can trigger a water ripple on the video. Since the video records the scene of ink spreading in the water, the touch interaction between the audience and the iPad makes the video more unpredictable, changeable and attractive. Additionally, the iPad screen can be projected on the wall, which augmented the special visual effects for the audiences.

This lobby exhibition is not only technology and art, it should be an impressive experience for all the audiences and provide different stimuli to people’s senses and emotions. After developing the interactive app, I connected with two choreographers. They were very happy to perform a duet against the water ink background.

On the important day of lobby demonstration, I used a projector connected to the iPad, projecting the iPad screen on the white wall. People could play with the iPad and also see the changing patterns on the wall. Then along with the music and video, dancers came and began to dance in front of the wall. Lights and shadows were changing, audiences kept touching the iPad screen curiously, everyone was deeply impressed by that moment. After the dance, some people also stood or moved around in front of the wall, taking photos and videos.

Build online gallery (Group work)

We set 11 scenes to showcase the design process and products during this intermedia projects. To match the ‘storm’ theme of the projects, we decide to break the fixed rules or guidelines and treat the website as an artwork.

Whiteboard for information architecture

My job: collecting and collating materials (mainly images and videos), prototyping and building the website.

We use 11 carousels to illustrate 11 scenes. These carousels with different sizes and spinning speeds are the most important elements in our website. In ever cell of the carousels, images or texts relating to certain scene will be randomly generated from the server and shown on the screen. Isn’t it a great metaphor of the Shakespeare’s Storm? (Unfortunately, this website is not published since it is a class project, not for business use)

Spinning carousel prototype

All Recent Work