Healthy Indoor Air Quality- An Interactive Quiz Installation For Asthma Patients

1. Project Purpose

I've developed my project's problem statement and rationale using the '5 Whys' ideation guide. This project aligns with the 'Asthma Malaysia Event,' providing an ideal venue to showcase it due to the melting pot of audience it attracts.

2. Project Planning

Here, I have 2 different interfaces for the project. One is non-tangible like the screen interface and the other is a tangible interface that uses sensors to detect tokens for input. After much consideration, I will go with the screen interface, Project Plan 3 (Modified and improved from Plan 1) . So far, I have not done a project that involves establishing communication between interfaces. Therefore, I wanted to challenge myself.

3. Project Feasibility

I have 3 concerns for the project: Establishing communication between interfaces, Creating the custom UI for the communication input & creating code-based visuals.

I was introduced to 2 software, Touch Designer and Processing. 

I explored the 2 and decided to go with the latter. 
‘Touch Designer’ is very convenient with all the nodes and presets available, but in order to connect some custom UIs such as ‘TouchOSC’, it requires quite an expensive payment in order to use it whereas ‘Processing’ allows more freedom and versatility in order to create custom UIs that fits with my project aim.

4. Rapid Prototyping

To further test out some parts of the project's feasibility, I carried out rapid prototyping. This includes the physical model itself with the projection and the code-based visuals and custom UI to control it.

I made a simple and ratio-accurate room model from paper just to test the projection mapping workflow on it. I had also applied a particle test pattern which is close to something I want to achieve.

Concurrently, I have also attempted to test out the creation of the user interface. Processing uses Java which is a new language for me to learn. The first prototype uses Java but I soon came to realization that the 18 weeks project span was insufficient for me to produce a good product with Java. 

Therefore, I turned to using a JavaScript library, p5.js that also pushes creative coding.

Above is a simple comparison table to have an overview of the difference and benefits of me shifting to p5.js.

The dealbreaker was the ability of p5.js to be executed by browser (html). Firstly, it is a language that I am familiar in. Secondly, it eases the process of establishing communication between multiple windows.

Additionally with the abundant of p5.js projects by the community that I can fork and modify sped up my custom UI creation. This is where I also found an alternative to the mapping function in Java.

Above is the finalized technical communication among the files.

5. Project Execution

With all the testing and workflow ironed out, I proceed to produce the assets. There are 3 parts that I need to cover. Firstly, is the UI design. Next, the 3D room model along with its assets and finally the code-based visuals.

UI Design

I started the UI phase by brainstorming and forming the UX sitemap and user flow.

The initial flow had some flow issues of being inconvenient to the users where they have to go back and forth from the menu to a section and back again to the menu. 

In response, I did some alterations to make it a linear and straightforward flow with the removal of the menu. This also helped direct the users through the quiz.

Above is User Flow #1 (With user flow issues)

Above is User Flow #2 (With improved straightforward flow)

Above is the Before (Greyscale) & After (In corresponding colors) selection assets.

I have executed the UI design in Figma where I had went through a few alterations transitioning from simple solid colors, gradients to imagery.

I designed this with hierarchy, clarity and user indication in mind to produce a good user experience. The challenge here was to integrate the UI well with the physical artifact. Meaning, after the selection, there need to have indicators to turn user's attention to the visuals projected on the model.

It was done by using audio and visual feedback from the artifact. 

3D Room Model

The room model along with its assets were a combination of 3D printing and hand-crafting. I first produced the 3D model in Blender. When modeling, I did my best to reduce the poly count and simplified the shapes to optimize for the 3D print process. This helps reduce printing time and printing failures.

The production method varies for each assets. Bigger assets like the room base and bed would be hand-crafted whereas simple shapes like the frames and books would be 3D printed. This helped me reduced filament waste.

Above is the development from 3D render to physical realization.

Projection Mapping The Visuals

I started the visuals by planning the visualization of the end result.

My initial plan was to map everything which included non-interactive assets to add interest but there was some limitation to the quantity of map quads I am allowed to use using p5.js. Therefore, I focused the mapping only on interactive assets.

When crafting the particle visuals, I made the colors distinct from each other which other than helped with the aesthetic also help indicate that there are various harmful gases and bacteria in unhealthy air. 

As for the sizing, if it is too small like particles in real life, it is not obvious enough. Therefore the decision to make it a larger size as a stylistic choice was made.

Here are the 2 visual states of the correct and wrong states.

The top section is the physical application of the below rendered version done in AE.

Above are the setup alterations throughout the project. The main changes is the simplified setup to only needing just a HDMI for projector and a USB-C port for the touch screen device that was sourced out later.

Project Stills

Future Idealized Vision

I envision my project to be scaled to a larger size similar to an ‘IKEA’ showroom. This can help improve the visual impact by helping users better visualize the dust in a life-scale room. This can be easily executed with the scaling of the visuals if it works in model one.

Other than that, more mapping should be implemented as per my initial vision.

Thank You!

Thank you for your time in viewing 'Healthy Indoor Air Quality' and coming behind the scenes with me!

- Gavin Gan ✌🏻