Module 2 Activity Research

Weekly Activity

Minh Vo

Project 2

Module 2

In Module 2, I explored the process of prototyping and guerilla prototyping — quick, low-cost, hands-on methods that help me test ideas, understand materials, and think through making. These activities encouraged me to experiment, iterate, and refine physical designs before moving toward digital integration.

Workshop 1 Geurilla Prototyping I

In this step, I began preparing my materials for the first prototype. I used cardboard as my primary material because it is lightweight, easy to cut, and ideal for quick experimentation. Using a utility knife, ruler, and pencil, I measured and cut several key pieces: one large rectangular base, two triangular supports, and three thin rectangular strips.

I completed my first prototype structure. While the form successfully stood upright, I quickly realized that the model wasn’t perfectly balanced — one side leaned slightly due to uneven measurements and quick cutting. This outcome reminded me that rapid prototyping is about learning through making, and for the next iteration, I’ll need to measure more precisely to achieve better symmetry and stability.

For my second prototype, I recut all the cardboard pieces with more precise measurements. I focused on creating cleaner edges and consistent angles to improve balance and alignment.

Here, I placed my first and second prototypes side by side to compare their form and balance. The second version (bottom) showed improved alignment and cleaner joints after taking more accurate measurements. While still simple, this comparison helped me see how small adjustments in cutting and assembly can lead to noticeable improvements in stability and overall structure

the two prototypes from a different angle to provide a clearer view of their structure and alignment.

Workshop 2 Geurilla Prototyping II

These are the 5 ideas that we came up with as a group for our brainstorming of the concep

This is a table summarize the feedbacks we gathered

rapid prototype of the lamp - top perspective view

rapid prototype of the lamp - side perspective view

Our project explores how physical data from an Arduino and a weather API can be translated into a clear, user-friendly interface. Through Activity 1 and Activity 2, we tested how users understand temperature states, colour changes, and the overall clarity of the UI.

Activity 1: My Research

This is my initial interface layout on Figma before running any tests. What is known: the basic structure of the Temperature and Lighting screens, the default indoor/outdoor data display, and the visual options for lighting scenes. What is unknown: how users will understand the comfort indicators, how the temperature display should react to changes, and whether the lighting choices feel intuitive.

This screenshot displays the variable tempValue that I created to simulate changes in indoor temperature. This variable is a known part of the system (I can control its value), but its behaviour in the UI is unknown at this stage. Through testing, I aimed to understand how updating this variable would impact the temperature display and the comfort colour feedback.

Since we do not have real Arduino sensor data yet, I created manual + and – buttons to simulate temperature changes using Assign actions. This allowed me to test how the UI responds to different values. One of the main unknowns was whether the colour feedback should change the border of the indoor temperature card (the current behaviour) or if it would make more sense to change the background or another part of the interface. This test helped me evaluate how clearly users understand their comfort levels based on temperature changes.

This image displays the colour conditions I tested in ProtoPie for various temperature ranges. Each range triggers a different border colour (blue, green, yellow, red), allowing me to explore how visual feedback communicates comfort levels. The known part is the conditional logic, but the unknown is whether the border is the best place to display colour, or if the colour should appear on the background for stronger visual clarity.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Activity 2: My Resarch

Activity 1 testing confirmed that the indoor temperature module updates correctly and the border color responds to the temperature range as intended.

Based on my Activity 1 reflections, I redesigned the UI to explore clearer color feedback and prepare for the next testing cycle.

I explored three core temperature states: cold, pleasant, and hot, to understand which visual direction communicates comfort most clearly.

Testing whether the gradient background helps users understand the current room temperature state.

Reflection

The peer feedback I received for Activities 1 and 2 was valuable because it revealed issues I did not fully recognize while working on my prototype. I felt confident about the direction of my iteration, especially the decision to shift from subtle border feedback in Activity 1 to a full gradient background in Activity 2. This change made temperature information more immediate and visually meaningful. My peers acknowledged this progression and noted that my design decisions appeared intentional, thoughtful, and well-tested. They also appreciated that I used ProtoPie to explore how the interface would behave in an interactive context, which reassured me that my process was moving in the right direction. The most important insight from the feedback was the communication gap between what I understood about the project and what the interface conveyed to someone seeing it for the first time. Because I already understood the concept of a bright temperature-sensing lamp controlled through an app, I assumed the UI reflected that purpose clearly. My peers showed me that this was not the case. They explained that without context, the prototype appeared to be a weather application rather than a lamp controller. They also pointed out that certain elements, such as the toggle and the dots next to the metrics, did not clearly communicate their functions. This helped me realize that I had relied too much on my own understanding of the system, rather than designing for a user encountering it with no prior background knowledge. The feedback helped me understand the importance of priority and context in interaction design. Moving forward, I plan to include a small visual reference to the lamp, label the interactive elements more clearly, and show multiple temperature states to communicate the colour logic. I will also consider adding a brief onboarding screen to support user understanding. Overall, the feedback encouraged me to think more carefully about how users interpret design without explanation.

Additional Research or Workshops

I also researched the Philips Hue mobile interface to understand how real smart-lighting systems present lamp controls, colour states, and device status. The Hue app uses clear labeling, simple toggles, and strong colour indicators to show each lamp’s state, which helped me refine the placement and wording of my own lamp controls. Studying its layout also guided my decision to keep lamp actions clear and separate while still supporting environmental information in a clean, readable way.

I also researched the Nanoleaf app to understand how another smart-lighting system visualizes colour, brightness, and scene controls. Nanoleaf uses simple, minimal layouts with clear visual feedback, which helped me think about how to communicate lamp states without overwhelming the user.

I also researched the <a href=https://design4users.com/weather-in-ui-design-come-rain-or-shine/ target=_blank>Weather in UI Design: Come Rain or Shine</a> article from Design4Users to understand how temperature, humidity, and environmental conditions are commonly visualized in interfaces. The article highlights the use of clear iconography, colour cues, and strong hierarchy to make weather data easy to read. This helped me refine how I present indoor and outdoor conditions, structure my alert messages, and use gradients to reflect different environmental states in a way that feels intuitive and consistent.

Project 2

Project 2 Prototype

After reviewing the peer feedback, I realized my earlier versions made the interface look more like a weather app than a smart lamp controller. Users couldn’t clearly understand what the toggle did, how the lamp connected to the temperature data, or how the colours changed across different states. This meant the primary purpose of the design wasn’t being communicated.

To fix this, I made the lamp control more explicit by renaming it to “Lamp status” and adding microcopy to clarify that the switch controls the physical lamp. I also created three clear environmental scenarios (hot, cold, and humid) so users can see how the lamp and interface respond to different conditions. The alert section now explains what’s happening in the room and why it matters, giving more purpose to the data.

Finally, I reorganized the hierarchy so the flow is more logical: greeting → lamp control → alert → indoor data → outdoor comparison. This keeps the focus on comfort and the lamp’s role while still giving users helpful context. Overall, this prototype is the result of making the design more transparent, more intentional, and more aligned with the feedback about usability and purpose.

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit