Multidisciplinary Project II / Weekly Note and Progress Update
Jump Link
- Week 01 - CLICK HERE
- Week 02 - CLICK HERE
- Week 03 - CLICK HERE
- Week 04 - CLICK HERE
- Week 05 - CLICK HERE
- Week 06 - CLICK HERE
- Week 07 - CLICK HERE
- Week 08 - CLICK HERE
- Week 09 - CLICK HERE
- Week 10 - CLICK HERE
- Week 11 - CLICK HERE
- Week 12 - CLICK HERE
- Week 13 - CLICK HERE
- Week 14 - CLICK HERE
- Week 15 - CLICK HERE
Week 01 – Site VisitWhat Happened This Week:
- Visited FABU at KLSCAH.
- Observed their current work and setup.
- Asked about their process for idea development.
This week, I focused on brainstorming possible themes and topics for my project. After exploring different directions, I narrowed my ideas down to three main concepts:
- Flood Awareness – creating an installation to highlight the impact of floods and encourage preparedness
- Sustainable Living – raising awareness of climate change and promoting eco-friendly daily habits
- Environmental Awareness: Ocean Pollution – focusing on plastic waste and its effects on marine life
Based on these ideas, I wrote a brief proposal outlining the core concept, potential objectives, and social relevance of each theme. I also created a mind map to explore how each idea could be developed further.
Week 02What Happened This Week:
- Module brief and assignment brief discussed.
- Lecture on Spatial Design
Lecture Notes:
- Spatial Design: Focuses on the relationship between architecture, interior spaces, and the people using them.
- Integration with Technical Knowledge: Merges technical aspects with spatial planning (architecture).
- Difference between Spatial Design and Architecture:
- Spatial design emphasizes the user journey and experience within a space.
- Architecture focuses more on the structure itself.
- UI/UX Perspective: Designing spaces with the user experience in mind is similar to designing interfaces in UI/UX.
- Enterprise View: Businesses hire designers to:
- Attract people to the store.
- Boost sales.
- Encourage visitors to post on social media.
- Promote the brand and enhance visibility through experiential design and marketing.
This week, I was still in the brainstorming and exploration stage, working towards confirming my final concept and theme. My progress included:
- Researching the target audience
- Exploring potential ideas for the spatial experience
- Drafting the objectives, problem statement, and other project information
By the end of the week, I confirmed my project direction as Environmental Awareness focusing on the ocean, as it has strong relevance and potential for immersive spatial design.
- Space & Place — When there is furniture, activities, or other elements within a space, they become the soul of the space.
- Interactivity — Focus on creating meaningful interactions within the environment.
- User-Centric Design — Prioritize the users’ needs and experiences.
- Activity-Focused — Place more emphasis on the activities happening in the space.
- Design Decision - What is the Objective you do this ?
Focus Areas
- Functionality — Ensure that every element of the space has a clear purpose in the overall design.
- User Experience — Evoke emotions within the space to make it memorable, emphasizing movement and interaction.
- Interaction — Consider how people engage with and move through the space.
- Emotion and Sensory — Use lighting, animation, and materials to shape emotional responses and sensory experiences.
- Adapting to Changing Needs — Design flexible spaces that can accommodate different users and activities over time.
- The High Line , New York
- REXKL , Kuala Lumpur
- IKEA
This week, I further refined my idea based on lecture feedback. I was advised to narrow my theme and make it more specific. As a result, I decided to focus on:
- Environmental awareness on ocean plastic pollution through daily life habits
The concept explores how everyday human actions contribute to ocean plastic pollution and negatively affect marine ecosystems. I also expanded the idea from a single installation into a spatial experience, integrating UI/UX, HCI, and spatial design principles.
This led to my confirmed project topic:
- FINAL TOPIC – Ocean Pollution: Awareness on Plastic Pollution in the Ocean
Lecture Note
Design & Experience Concepts
- Interactive White Space:
- At the end of the visitor’s journey, a blank surface or object allows participants to add stickers or marks, representing the ongoing growth of the artwork through audience engagement.
- Engaging the Senses:
- Incorporate auditory, tactile, and olfactory elements to deepen the immersive quality of the experience.
- Exploratory Installations:
- Design spaces that encourage discovery, allowing visitors to find hidden features and experience the environment from multiple perspectives.
User Experience (UX) Insights
- Ease Access:
- Difficulty in finding information can lead to the loss of up to half of potential engagement or sales.
- Value of Positive Experiences:
- Positive user experiences can be more influential than advertising in fostering trust and long-term loyalty.
- Continuous Improvement:
- Employ an iterative design approach prototype, test, refine to enhance user satisfaction and overall experience.
Since the concept was confirmed last week, this week I focused on research, documentation, and slides for Assignment 1. I continued refining my idea to make the project direction clearer and more focused.
A key task this week was designing a questionnaire to collect data on:
- Public awareness of ocean plastic pollution
- Personal plastic usage habits
- Opinions on immersive rooms as educational tools
The questionnaire was divided into six sections:
- Basic Information
- Personal Plastic Use Habits
- Awareness & Perceptions
- Motivation & Behavior Change
- Experience & Engagement Preferences
- Final Thoughts
I also visited Kepong Tzu Chi Green Action Experiential Exhibition as my physical case study, which helped me understand how experiential spaces can effectively educate the public about environmental issues.
Lecture Note
User Persona
- User persona represents a group of users, capturing the characteristics, needs, and behaviors of a broader audience segment rather than just one individual.
Purpose in Design:
- Helps designers understand user needs when defining the problem statement.
- Guides design decisions by keeping the focus on real user goals and pain points.
Benefits of Using Personas:
- Higher adoption rates: Products meet user expectations more effectively.
- Improved user retention: Users stay engaged because the design aligns with their needs.
- Better prioritization: Helps teams focus on features that matter most to the target audience.
Key Point:
- A persona is not a single person, but a representative of a user group, helping the team empathize and make informed decisions.
This week, I completed my user persona development. I conducted interviews with:
- An NGO representative (Reef Check Malaysia)
- A recycling practitioner
- A secondary school student
I also analyzed the Google Form responses and created three user personas based on the collected data. These personas represent different user groups and helped guide my design decisions by highlighting user needs, motivations, and pain points.
- Consultation and Assignment 2 Brief - Design Development
During this week’s session, we received the brief for Assignment 2: Design Development. The main focus was on understanding how to connect the UI/UX design with a physical space. We discussed how users would interact with the digital interface and what actions or experiences would follow in the physical environment after using the UI/UX page.
To explore this connection, we are required to sketch our ideas and create a simple 3D model that demonstrates how the physical design complements the digital interaction. The concept should also include elements such as sound, lighting, and overall atmosphere to enhance the immersive experience.
The final outcome should clearly show how the physical experience, UI/UX elements, and user journey are linked together, supported by proper documentation and user framing. At the end of the session, we were also asked to submit our slides summarizing the design direction and development process.
Lecture Note
User Journey Map
- Provides a visual representation of the steps an individual takes to achieve a goal.
- Encourages designers and developers to view the user’s experience in a more organized and comprehensive way.
- Fosters empathy by allowing the team to relive the user’s journey in a narrative form.
- Helps the team understand the user’s emotions, motivations, and frustrations.
- Identifies pain points that users may encounter when interacting with the product or service.
- Considers the emotions and actions of users within a space.
- Helps predict how users will move, think, and feel when experiencing the design.
This week focused on brainstorming the physical installation concept and understanding how digital interaction connects with physical space.
I developed an initial installation idea where:
- When no one is nearby, the installation remains inactive
- When visitors approach or hover, underwater marine life visuals appear
- When visitors touch the installation, the visuals turn black, representing coral death
This interaction represent how over-interaction and pollution can damage marine ecosystems, with coral representing the ocean.
I also started planning the space layout and floor plan.
Lecture 1 Note
Topics Covered:
- Understanding space planning and the differences in spatial design.
- Importance of bubble diagrams before designing the actual space.
Bubble Diagram:
- Used to plan movement and user journey within a space.
- Helps visualize spatial flow using arrows and simple shapes.
- Size of each bubble depends on the function or importance of the area (not all are the same).
- Focus on journey and flow first, not on the form or layout.
Spatial Elements:
-
Understanding different planes:
- Vertical and horizontal planes
- Columns and arches
- Various spatial arrangements to create structure and balance
Light and Shadow:
-
Exploring how light and shadow can influence:
- The mood and atmosphere of a space
- The depth and visual experience for users
Key Topics:
-
Understanding spatial relationships:
- How spaces are linked emotionally and physically.
- Connecting what users see, feel, and experience inside the space.
- Ensuring each area contributes to the overall story and atmosphere.
- Storytelling should work both online and offline — creating a seamless experience between digital and physical interactions.
- The goal is to make the experience interactive and engaging, not just visual.
Design Considerations:
-
Example: Multiple areas (example 4–3 zones) can be linked together to form a continuous narrative experience.
-
Allow users to have freedom of choice:
- Let them decide their own journey or path.
- Give users control to explore and interact in ways that connect offline and online elements smoothly.
This week, I developed bubble diagrams to further refine the spatial flow and user journey. These diagrams helped me visualise how visitors move through the space.
I also researched the technical requirements for the installation and identified suitable sensors with lecturer guidance:
- HC-SR04 Ultrasonic Sensor – detects hand movement above the coral
- TTP223 Capacitive Touch Sensor – detects physical touch and triggers coral bleaching visuals
- Arduino Mega 2560 Rev3 – processes sensor data
- TCRT5000 IR Sensor – detects visitor proximity
- Projector – projects visuals onto the coral structure
I continued refining the coral installation design and overall spatial flow.
This week, I replanned Room 2 and refined the overall spatial concept to make it feel more coral-inspired. I updated the floor plan and experimented with roof designs and spatial layouts.
I also created a more detailed floor plan and roof plan, while continuing to refine the coral sketches and develop the building in 3D.
This week, I continued developing the building and explored ways to make the form more open and organic. I refined the coral installation form and rearranged the spatial layout for better flow.
I also started sensor testing using Arduino, experimenting with color changes triggered by different sensors.
Figure 10.1 Redeveloped floor plan sketch (3rd Version)
Figure 10.2 3D space testing in Blender
Figure 10.3 4th and 5th building sketches
Figure 10.4 Final sketch and 3D model
Figure 10.5 Coral installation sketch (2 types)
Figure 10.6 Coral 3D model (Base on Sketch)
This week, I further refined the coral installation by standardizing the coral form. Instead of using many different shapes, I designed one consistent base shape and duplicated it to create multiple coral modules. This approach helped maintain visual consistency across the installation while making the structure feel more intentional and cohesive.
From this base form, I created several variations:
- One complete (whole) coral piece
- Four separated pieces, designed to fit together like a puzzle
- Versions with holes and without holes, allowing the coral to be distributed across different walls and surfaces
This modular system allows some coral elements to appear fragmented while others remain whole, symbolizing the contrast between healthy and damaged marine ecosystems. It also helps avoid the installation feeling like a single solid wall, instead creating a more dynamic and spatially layered experience.
At the same time, I adjusted the coral shape from circular to oval, increasing the projection surface area and preventing the installation from visually resembling a pillar. I also confirmed the final dimensions of the coral structure and contacted Taylor Maker Space regarding 3D printing.
In addition, I completed Stage 1 and Stage 2 visual coding in Processing, using mouse interaction as a temporary trigger to simulate human proximity and touch before integrating real sensors.
Finally, I completed the modeling for Space 1 and Space 4, incorporating coral-like structures and the coral installation into the overall spatial design during this week.
Figure 11.1 Original vs updated coral form
Figure 11.2 Blender Overview (With Final Patterns)
Figure 11.3 Final shape testing ( Making it a oval)
Figure 11.4 Coral with full holes
Figure 11.5 Coral with partial holes
Figure 11.6 Modular coral pieces
Figure 11.7 Video example of current coding stage
Figure 11.8 Visual of idea stage
This week, I tested the space in Lumion to evaluate how the installation fits within the environment.
For the tunnel connecting Room 4 to Room 2, I experimented with two design versions to create a visually engaging passage:
-
Version 1: Used large pieces of plastic cloth hanging randomly. This looked unstructured and did not achieve the desired visual effect.
-
Version 2 (Final Version): Replaced the large plastic cloth with plastic bottle lids, allowing better control over size and arrangement. This created a more cohesive effect extending along the tunnel wall to Room 2, improving depth perception, avoiding empty spaces, and enhancing visual consistency.
After completing the spatial updates, I conducted a Lumion test for the full environment. During testing, I observed several transparency and overlapping issues , mainly with the tunnel bottle lids and the Room 1 coral structure. I will need to fix these issues individually to ensure all elements display correctly and maintain visual consistency across the space. (i forget to take the picture of model transparency and overlapping issues in lumion)
For the physical installation, I updated the Processing code by:
- Replaced the mouse-triggered interaction with sensor input, so visuals now respond to proximity.
- Stage 1 visuals are confirmed and functioning as intended.
- For Stage 2, I reversed the colors compared to Stage 1: now it has a blue background with white to bubbles to create a clearer contrast and differentiate it from Stage 1.
- Initial Stage (Stage 1): White background with blue bubbles
- Stage 2 (Early Test): Blue background with blue bubbles (tested but lacked contrast with Stage 1)
- Stage 2 (Final Adjustment): Blue background with white bubbles to clearly differentiate from Stage 1 and improve visual contrast
- For Stage 3, I created a basic hover interaction with a center yellow circle as the initial visual. This stage serves as the foundation for further development of interactive elements.
Overall , by using bottle lids instead of large plastic pieces allowed for a more controlled arrangement, giving the tunnel a cohesive and visually engaging effect that interacts better with the projection. Integrating sensor input also improved the interactivity of the installation, making the experience more dynamic.
This week, I continued developing Room 4 based on lecture feedback by adjusting the space and refining the coral installation. I added one of the coral sculptures, made it taller, and included more detailed elements to enhance its visual presence and strengthen the overall composition.
Figure 13.1: Built-up coral structure in Room 4 (Before and After)
Next, I added additional materials to make the space feel less empty and finalized the coral installation. The structure consists of four pieces: three with holes and one main piece that is solid. The solid piece serves as the interaction area with the sensor, forming the final configuration of the coral installation.
I then continued working in Lumion, focusing on the non-transparent models and experimenting with different materials for the coral installation to achieve the desired visual quality.
For the Processing visuals, this week I focused mainly on Stage 3:
- Conducted research on marine life and underwater visuals.
- Drew visual references for fish swimming backgrounds.
- Completed simple coding to simulate fish movement and create a dynamic sea environment.
- Finalized the visual style for Stage 3 to maintain consistency with the overall installation aesthetics.
This week, I focused on developing Stage 3 of the Processing visuals and finalizing the Lumion environment.
For Stage 3, I completed the coding for the underwater sea background, including six different fish swimming to create a dynamic marine environment. I also developed the fish-hover interaction, allowing users to interact with the digital environment and experience responsive visual feedback.
In parallel, I finalized the Lumion environment:
-
Applied materials to all interior spaces.
-
Refined existing elements to enhance the overall spatial experience.
-
Added exterior details such as stone stepping paths to make the outdoor environment feel more complete.
-
Rendered images from Lumion and added additional background elements to enrich the overall visual context.
Additionally, I worked on the final project documentation, compiling all updates, visuals, and technical progress to prepare for the final submission.
This week focused on final refinements to the 3D environment, rendering, physical model fixing, and resolving technical issues with coding, sound, and projection mapping.
I made several adjustments in Blender to polish the building model for the final presentation. One of the coral elements near the entrance was enlarged to make it more visually impactful, and stepping stones were added outside the building to enhance the entrance experience. After completing the adjustments, the model was imported into Lumion, where materials were applied and additional plants were added around the building to enrich the surrounding environment and make it feel more immersive and natural.
I then confirmed the camera angles and rendering views, took screenshots, and exported the visuals from Lumion. During this stage, I fine-tuned the lighting by adjusting the sun position and adding artificial lights to improve the overall atmosphere and visual clarity.
At the same time, I completed the coding work and fixed the physical 3D printed model. Due to printing issues caused by the large model size and printer limitations at the school, parts of the model were damaged. To repair it, I used modeling clay to fix the broken areas, allowed it to dry, and then polished it using a small sanding machine . After polishing, the model was sprayed to achieve a smoother and more refined finish.
Regarding the interactive visuals, all visual coding was completed. After adding the touch interaction visuals—including a black background with dark blue bubbles I began working on the sound design. However, the sound was not functioning due to issues with the Processing Sound library. I attempted multiple solutions, including deleting and reinstalling Processing several times, but the issue persisted, and the sketch continued to turn black when sound was added.
I researched and selected suitable open-source sound effects to use:
- Water drops (far): https://pixabay.com/sound-effects/water-drops-26638/
- Water drops (near): https://pixabay.com/sound-effects/water-drops-6223/
- Hover sound: https://youtu.be/la_AEFO8m7U
After further testing, I decided to pause the sound implementation and move on to projection mapping. Initially, I planned to use p5.mapper with Processing, but due to compatibility and library issues, it did not work. I researched alternative methods and found that Processing can handle projection mapping through libraries and custom code; however, these attempts were unsuccessful even after reinstalling Processing multiple times.
As a result, I made the decision to convert all Processing code to p5.js. This allowed me to resolve both the sound implementation and projection mapping more effectively. During the conversion process, I encountered an issue where the fish images did not load correctly in p5.js, but this was eventually fixed.
Overall, this week involved intensive troubleshooting and problem-solving. Despite multiple technical challenges, the transition to p5.js ultimately provided a more stable solution for sound and projection mapping, bringing the project closer to its final execution.
**Extra Note**
Comments
Post a Comment