Module 2 Activity Research

Weekly Activity Template

Haoxiong Lian

Project 2

Module 2

In the first two weeks of the project, I worked with my group members in class to create a prototype phone stand based on a YouTube tutorial, as well as a second version iterated based on feedback. We also defined the concept for the final prototype together, brainstormed five ideas, discussed and reflected with other groups to come up with three feasible ideas, drew a draft concept, and created a draft of the final prototype's appearance on cardboard.

Workshop 1 Geurilla Prototyping I

This is the cardboard material I needed to make the phone stand I followed the second example in the tutorial.<a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a>

This is what the phone holder looks like after completion, the first generation version.'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div>

This is the iterative version I developed with my team members after discussions and feedback from others, namely the second version of the phone stand.

This is what his phone looks like when it's on the second version of the phone holder.

This is what my phone looks like when placed on the first version of the phone holder.

Workshop 2 Geurilla Prototyping II

This is a brainstorming session of 5 ways our team can interact with our prototype.

After discussion with other groups, we decided to choose interaction methods 1, 3, and 4, and abandon interaction methods 2 and 5.

I drew three different prototype concept diagrams using those three interactive methods.

This is the process of making this cardboard prototype after watching the tutorial.

This is what the cardboard model looks like after it's finished.

Activity 1: My Resarch

As an API researcher, I first needed to understand the basic calling methods, data structures, and limitations of the OpenWeatherMap API. This video explains things from scratch, making it perfect for addressing the questions I listed in the Unknown Areas section, such as API connection stability, data refresh frequency, and data format parsing. Link: https://youtu.be/MdIfZJ08g2I?si=f7ymrgX-9UPt6xXX

This video demonstrates how to import real-world weather data (such as data from OpenWeatherMap) into the ProtoPie prototype and transform it into an interactive visualization using the `parseJson` function. This corresponds to my tasks of visualizing external APIs and simulating real-time data using the ProtoPie prototype.Link: https://youtu.be/VTPC8uBaAJI?si=B-haeIx4R5Ynrbd5

This video goes a step further, introducing the use of ProtoPie's API plugins, the Send/Receive mechanism, and how to dynamically replace URLs/parameters. It is directly related to my topic Unknown: API connection stability and data parsing in ProtoPie.Link: https://youtu.be/V2Ux0bYTmhs?si=0OEvHEB9BENbiIpf

While not an API call tutorial, this video is extremely useful for UI/visual layout. My assignment involved comparing different data layouts (graph view, minimal card view, animated background), and this design tutorial helped me understand visual layout choices.Link: https://youtu.be/48YwaTiYau0?si=56LQRLFiynSFdoyT

As a foundational tutorial, it will reiterate API requests, error handling, JSON structure, unit conversion, etc. I have unresolved issues in the Unknown section, such as refresh frequency, data accuracy, and whether unit conversion is necessary, and this video can serve as a supplement. Link: https://youtu.be/S_py2rXNizo?si=zhxKFbxs5hX3VBAx

Activity 2: My Reearch

This video demonstrates how to use Google Sheets as a dynamic data source and import a ProtoPie prototype. For me, it corresponds perfectly to the unknown in Activity 2: how to synchronize Arduino data with the Weather API and display it in a single interface. The data flow logic in the video (table → ProtoPie variables) can be applied to your dual-data source integration tests. Link: https://youtu.be/-k8bxjZMtdo?si=h26lY8lwyq4SiF67

ProtoPie Connect is a key tool for connecting external devices and data. This video demonstrates how to build a bridge app that allows ProtoPie to communicate with real-world data (such as Arduino and APIs). It helped me solve the synchronization problem and data refresh rate in Activity 2—for example, how to align updates between two data sources. Link: https://youtu.be/taoTADXLLRc?si=JxonONaoyW5MIkQt

This video provides a complete developer's perspective on creating a real-time weather app, from API retrieval to UI updates. It helps you understand how data is presented under extreme weather conditions (e.g., blizzards, extreme heat), corresponding to my Activity 2 UX unknown: How to express changes in comfort under extreme weather conditions. Link: https://youtu.be/h_Aiijsv-zI?si=gel6vUoVl6HR7OfJ

This tutorial explains how to integrate API data and visual effects in a web front-end, including dynamic backgrounds, icons, data refresh, and interaction design. This was extremely helpful for the unknowns of my Activity 2: how to make users emotionally feel changes in the weather, and how to express comfort through animation/visual rhythm. Link: https://youtu.be/JubKY5p3qRc?si=Z6apocvKj1KGiMri

This video explains how to design a clear and emotional weather app from the perspectives of interaction and visual storytelling. For my research, it helped me explore whether users understood the meaning of colors and the visual correspondence between emotions and comfort. It's an ideal reference for emotional feedback and comprehensibility testing in Activity 2. Link: https://youtu.be/pELACV0yNFc?si=cRRl_kwSbTtxwnOy

Additional Research or Workshops

This video demonstrates how to build a complete weather application using HTML/JS and a weather API. While not a ProtoPie prototyping tool, it helped me understand the entire process from requesting the weather API → retrieving data → updating the interface. Link: https://youtu.be/QGzgE7jWDxk?si=-7xYW2_plIsQaOt3

This video focuses on how to quickly use real data in prototypes—specifically, the user comfort feedback and intuitive and clear feeling aspects of my project. It helped me understand the difference between using real data vs. simulated data in user testing. Link: https://youtu.be/mBVzPDIPezM?si=Zq4qnutIbOs-YSal

While I primarily use the OpenWeatherMap API, this video showcases another weather API (Tomorrow.io)—it expands my understanding of data quality/refresh frequency/field differences when choosing weather data sources. This addresses the data accuracy and API refresh frequency issues I mentioned in the Unknown section. Link: https://youtu.be/WZHpEPZq3e0?si=tm6BBILwtYnRy2LG

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Project 2

Project 2 Prototype

I'm responsible for the API and JS code in the team. Here's my code and preview page.

I'm responsible for the API and JS code in the team. Here's my code and preview page.

Powered by w3.css