Milestone 4

  1. System concept and high-level architecture


ColCat is an IoT solution that gives cat owners peace of mind while they are away from their cats. This system is made up of 3 major components: 1. Home Wifi connected ColCat Collar, 2. ColCat mobile app, and 3. ColCat Drone Camera.

After putting the ColCot collar on the cat and connecting the collar to their home Wifi, cat owners can start tracking key health metrics to ensure that their cat is doing okay through a collar-connected mobile application. In addition, cat owners can always connect with their cats remotely to ensure their cats are okay in case of emergencies with the drone camera.


The ColCat system has 4 major features:

  1. The ColCat collar will collect key health metrics from the cat automatically, report to the mobile App, and senses abnormalities

    • For example, with the embedded sensors, ColCat Collar can track the heart rate, meal times, body temperature, activeness, location, sleep time, etc.

  2. View cat health reports, receive alerts, and control connected IoT devices over the ColCat mobile application

    • The ColCat mobile app is free to use and the app gives cat owners additional insights and clear visual information regarding the health conditions of their cat in real-time. It also serves as the notification hub where cat owners can receive immediate alerts about any abnormalities and respond to the alerts quickly.

  3. Connect with Vet

    • When cat owners receive abnormalities alerts about the cat, they can choose to send those health metrics tracked by the system directly to the vet within the Vet Chat panel. ColCat makes connecting with vets easy for pet owners.

  4. Autopilot Drone Camera with laser pen

    • The Drone Camera that arrives with the ColCat Collar is a part of the system that you can activate with your mobile app. This drone camera helps cat owners to track cats with a visual. If demand, cat owners can play laser pen (which is a feature that comes with the drone) or talk to the cat remotely via the app.


System Components & Architecture:

2. Goals for the demo


Our demo focuses on showcasing the two most common use cases of ColCat system. The goal of the demo is to present audiences the ColCat mobile app user interfaces, the IoT sensor in the collar, the drone camera, and how everything works together:

  1. the look and feel of the ColCat Collar through our prototype.

  2. how the IoT sensor and its LED components work corresponding to abnormal health metrics.

  3. the look and feel of some major user interfaces, including the app dashboard, drone camera view, abnormal health metric page, and vet chat page.

  4. how each component works individually throughout typical scenarios and how components work together as a stable system.


* An additional goal is to collect some feedback and insights from the audience, which would help us improve the current iteration of the ColCat system

3. The demo: a high-level description of the script and the materials used


3.1 Demo Scripts


ColCat is a connected cat collar that allows cat owners to monitor and communicate with their cats remotely by using their phone. The collar and phone are also integrated with an external drone camera that is set up in the owner’s home.


Scenario 1: Away - Light Flashing as Alert (Urgent Situation)

Devices used: Phone, Heartrate sensor, Drone Camera (with Laser Pointer)

Collar sensors used: geolocation, heartrate

  1. The owner is having hot chocolate and he receives a phone call from his boss that he has to attend an in-person office meeting today.

  2. He’s in a hurry so he leaves the hot chocolate on the dining table. The chocolate attracts his cat KitKat, so he and jumps on the table.

  3. KitKat licked the hot chocolate.

  4. The collar detects the abnormal heart rate

  5. The light on the collar keeps flashing as an alert

  6. The owner receives an alert notification from the ColCat App,

“Kitkat is eating something away from his feeder. Click here to check!”

This triggers the ColCat drone camera to work. The drone automatically flies to Kitkat by tracking the GPS sensor in his Collar.

  1. The owner taps the notification and opens the app. He sees the live video footage captured by the drone. He learns that the cat is eating his hot chocolate

  2. He controls the laser pointer embedded on the drone directly in the App, this successfully distracts the cat. KitKat starts chasing the red dots and stopped eating hot chocolate at the dining table

  3. He feels less worried.



Scenario 2: At Home - Light changing colors based on cat’s temperature - (Abnormal But Not Urgent Situation)

Devices used: Collar, Mobile App

  1. Owner and cat are chilling on the couch and watching the umich game

  2. The light on the collar becomes blue, which indicates the body temperature is lower than normal

  3. The owner gets up and turns on the heater

  4. The light is still in blue, which means the body temperature isn’t getting better

  5. The owner observes the cat for a little bit longer, but the body temperature light is still on, so he starts worrying. He wants to double-check with professionals if the cat is okay.

  6. Therefore, he sends the latest cat health metrics the Collar has collected to a local vet he connected to in the ColCat App.

  7. Later, he is informed that the cat might need to do a physical check in the Vet to make sure


3.2 Demo props & materials


  1. Slides with the mobile app user interfaces

  2. ColCat Collar

  3. KitKat (the Cat)

  4. ColCat Drone Camera

  5. Laser Pen

  6. Photon IoT Kit

  7. Hot Chocolate cup

3.3. Demo Setup


  • Roles for scenario 1:

  1. One of our team members will act as the owner of KitKat, and control the slides.

  2. When the demo begins, one team member will first read the pre-script to introduce the ColCat system concept and read the setting and each step of scenario 1

  3. One team member will act as the computer that controls the reaction of the cat

  4. The other team member will act as the computer that controls the drone camera and the laser pen, and change NeoPixel light setting in photon


  • Roles for scenario 2:

  1. When the demo begins, one team member will read the setting and each step of scenario 2, and play the slides.

  2. One team member will act as the owner of KitKat, and interact with the cat when KitKat feels cold.

  3. One team member will change the NeoPixel light setting in photon.

4. Our prototyping process

4.1 Low fidelity wireframe to high fidelity prototype (Mobile UI)


Our team has created the low-fi wireframe during Milestone 3, and we received lots of useful feedback from the user enactment activities, which guided us to make additional changes to the previous wireframe.

Here is the list of updates we made.

  • Edit the notification message and make it clear for users to read

  • Clean the dashboard design and adjust the layout

  • Clean the individual health metric detail page

  • Redesign the camera page. We went after the idea of using a drone camera (suggested by instructors) instead of static home security cameras.

  • Add a new interface for Vet chat

Due to time constraints and the fact that we will only demonstrate two user scenarios during the demo, we planned to NOT create high fidelity prototypes for all mobile wireframes we revised after Milestone 3. We focused on a few key screens instead.

Here are the key final user interfaces we selected to design, which reflects the core functionalities of the ColCat mobile app:

4.2 Purchase physical demo materials and prepare the demo props


Below is a list of materials we used for the product:

  • Cat stuffed animal

  • Bandana

  • Cat collar

  • Drone

  • Neopixel ring (and IoT Kit)

  • Laser pointer


We decided to put the NeoPixel ring in the center of the cat collar so that it is easily visible to the user. The cat collar has a bow in the front so we centered the NeoPixel light on the bow. We placed the collar on the stuffed animal cat. The breadboard and wires for the NeoPixel were nested on the underbelly of the cat and were hidden under a bandana that we wrapped around the cat as clothing.

The drone served as both a camera and a laser pointer for our solution. To simulate this for the interactive demo, we purchased a small drone toy that we controlled using a remote control. The drone does not have a built-In camera or a laser, but we coordinated as a team to play a pre-recorded camera video (shown in the app) and move a laser pointer that matched the movement of the drone. During this scenario, we also moved the cat to show that It was being distracted by the laser pointer. There were a lot of moving parts to this Interaction that showed how all devices work together simultaneously. We practiced this demo repeatedly to make sure the logical flow of Interactions followed the user scenarios we outlined.



4.3 Photon kit & NeoPixel configuration

We used the NeoPixel for the Cat Collar to represent the sensor notifications when metrics are abnormal. We used C++, JavaScript, and HTML to do this. We set up five functions in a .ino file to change the color of the NeoPixel ring to white, red, blue, and green. To perform these color changes during the demo, we created HTML buttons for each color and used jQuery to integrate the buttons with the respective color functions. We also utilized the color black as an easy way to turn the NeoPixel off. This allowed us to click the button of the color we wanted to display on the collar for each given scenario. We utilized all the pixels in the NeoPixel with the same color so that the message is clear to the user and the light indicator is easy to interpret.


4.4 Drone Camera

We incorporated the Drone Camera as a part of the system to present how users can keep track of cats visually even when they are away. While the drone was remote-controlled by a team member during the demo, the assumption for the solution is that the drone will automatically move toward the cat's location because it is connected to the collar by a GPS signal. In our demo, the cat collar also turned green to indicate a successful (GPS Sensor) pairing of the camera and collar.


4.5 Challenges

We also experienced some challenges prior to a demo. The main issue was ensuring that our photon was connected to Wi-Fi and properly working. We were able to get help ensuring that this got taken care of as soon as possible. Additionally, when learning to set up our NeoPixel, we encountered scenarios where the NeoPixel would display all pixels except 1 pixel with the same color and there was 1 pixel with a different color. Ultimately, more research and practice allowed us to overcome this issue.

5. An explanation of how the demo captured key elements of the intended experience


  • Our demo focuses on two scenarios, 1. user is away, and 2. user is home with the cat. To make sure the ColCat system works out for both scenarios, we prepare all the digital and physical prototyping assets, from the high fi mobile prototype to the drone camera, and we rehearsed the actions before the demo day. On the other hand, we are selective about which prototyping props we should bring, too, so that we don't confuse the audience and ourselves during the presentation.

  • Given that we have a limited number of team members and relatively complicated scenarios, we will only present core interactions, in other words, the user flows will be controller by ourselves and we will present it in a linear way and the functionalities will be presented in a simplified manner. By doing so, we can avoid unexpected interruptions and make sure the demo captures all the key elements and intended experiences we want to showcase.

6. Feedback or insights that came out of preparing the demo


  • Throughout the demo preparing process, we learned that PRACTICE is the key to a successful Wizard of Oz. Enough practicing can help prevent accidents from happening.

  • Due to the technical limitation and the nature of designing for the future, we are not able to computationally prototype out every feature we proposed. Wisely using the existing materials and technologies to mimic the real setting and functionalities is crucial to make sure we can still deliver the accurate sense and feeling of using the product to the audience. For example, we combined the laser pen and the drone to mimic a drone camera with the laser embedded; we also hardcoded the color-changing Neopixel to present how the collar's light would change based on different sensors embedded in the collar.