Most people already carry around an IoT device – a smartphone. A smartphone has an impressive set of inputs, outputs, and network connections packed into a small but highly-capable computing device.

YOUR TASK

Research the Apple iPhone, Google Pixel, or Samsung Galaxy S to learn the following:

1. What kinds of inputs (such as sensors, etc.) does a typical smartphone have to gather or receive data from the environment or a user? What are these inputs used for?

2. What kinds of outputs does a typical smartphone have? How are these outputs matched to our human senses (our body's inputs)?

3. What kinds of network connections is a typical smartphone capable of making? When or how are these different connections used?

Use this assignment template to record your research findings. (Hint: Look for the technical specs listed on the smartphone webpages.)

Your is to design and build an IoT device and web app that could improve or benefit your school community.

Your team will solve the project challenge by applying a user-centered design process that follows an iterative "Learn-Build-Measure" cycle.

1. Research Problem Space - Let's start by exploring existing IoT devices and the technology you'll use to build your own smart devices. You will also begin to frame the goals of your team's project by learning about potential stakeholders and generating initial ideas for what problem to solve.
2. Define Problem to Solve - Your team will evaluate its set of ideas for what problem to solve through deliberation and feedback. After conducting additional user research on your selected problem, you will describe your target stakeholders, the current user experience, the value proposition of your solution, and the design requirements for your solution.
3. Design Solution & Deliver Proposal - Generate, evaluate, and refine your ideas for a solution. Create a detailed solution design for evaluation by stakeholders. Present your targeted problem and proposed solution for critique by other design teams.
4. Build & Develop Solution - During development, track your team's progress and any issues that arise.

   Construct your smart device by connecting the necessary parts. Plan out and code your device app and web app. Conduct integration testing to ensure your solution works properly. Create a product demo video and product marketing website.
5. Evaluate & Improve Solution - After creating your solution, test the solution with target stakeholders to gather feedback on improvements to make or additional features to add.
6. Reflect & Present Project Results - At a public poster presentation, explain your team's design process and demonstrate your solution. Be prepared to respond to questions. Each team member will reflect on his or her contributions and how this project experience impacted future college and career interests.

More and more IoT devices have become available over the past few years. Many of the new products unveiled at the Consumer Electronics Show (CES) are smart devices.

VIDEO: Everything Cool at CES 2017 (focus on smart devices)

Understanding existing products is an important part of the research phase when designing a new product. This is called competitive analysis. This type of research helps you better understand what's possible to create with the technology, what existing products offer to users, and where there may be opportunities for new or better products.

YOUR TASK

Research the design of any existing smart device of your choice (other than a smartphone or smart thermostat - also no computers, tablets, TVs, Blu-Ray/DVD players, game consoles, or headphones).

The smart device could be a consumer product (such as wearable device, smart home device, or smart car technology) or could be a smart device system for use in businesses, industry, cities, transportation systems, infrastructure, or environmental monitoring.

Here are some resources to help find a smart device to research (but you are not limited to these - also you will want to find a product website and articles about the product):

• IOTLIST - browse examples of consumer IoT products

• Internet of Things Examples - for body, home, city, industry, and the environment

• The Best Smart Home Gadgets of CES 2017

Research the smart device in order to create and deliver a presentation to the class that includes the following:

1. Introduce the product (include images), and give your description of the product’s value proposition.

2. Summarize the key functions and features of the product, as well as its benefits for people.

3. Give your description of the target users for the product, and provide a brief scenario (story) of the product being used. The target user description would include: demographics (age, gender, family status, etc.), current frustrations or problems that product helps solve, important needs or values that product helps fulfill, etc.

4. Show your system model for the product, and explain how its parts work together. Your system model should include the product's inputs (sensors, etc.) and outputs, as well as any web services or apps that interact with the product.

5. Provide links to the specific information sources used in your research.

Your presentation to the class should be about 2-4 minutes in length (about 5-10 slides). Make sure both the visual and verbal portions of your presentation are clear and engaging. Be prepared to briefly respond to questions or comments from the audience.

The Philips Hue smart lightbulb was introduced in 2012, and now several companies offer smart lightbulbs. Smart lightbulbs can be controlled remotely using a mobile app and offer features like setting automatic on-off schedules, dimming lights, changing the light color, syncing lights to music, etc.

VIDEO: Philips Hue Smart Lighting

YOUR TASK

As an introduction to building and programming IoT devices using your Photon kit, your team will create a prototype of a smart lightbulb that can be controlled by a web app.

Your team will build its prototype of a smart lightbulb in four versions (or iterations) that keep getting closer to the end result. Each time you will modify your existing Photon device and your existing Photon code.

1. Prototype Version 1: Connect LED light to Photon device, and have Photon code turn light on and off in repeating cycle.

2. Prototype Version 2: Add push button to Photon device, and have Photon code turn on light when button is pressed.

3. Prototype Version 3: Modify Photon code so button switches light on or off with each push, like a regular light switch.

4. Prototype Version 4: Modify Photon code so it interacts with a web app by sending and receiving data through Internet. Create web app that shows current status of light and allows user to switch light on or off remotely.

Since this is practice, the instructions provided below will tell you which parts are needed, show you how to connect them, and even provide the code needed.

Your focus should be on:

• understanding how to connect the parts to form circuits that power the parts and transfer data

• understanding how the Photon code controls the parts and processes data

• understanding how the Photon code and a web app can interact by sending and receiving data through the Internet

BACKGROUND

Each part (such as LED, etc.) that you connect to your Photon device must have a complete electrical circuit. The jumper wires and breadboard are used to help make a circuit for each part.

If this is your first time using an electronics kit, then read this helpful background about circuits and the breadboard.

PROTOTYPE VERSION 1

GOAL: Connect LED light to Photon device, and have Photon code turn light on and off in repeating cycle.

Complete Experiment 1 of the online SparkFun Photon Experiment Guide. Only complete the first part – skip Part 2.

For the Photon code, just modify (or copy) your existing Hello World app. That code is identical to the code for Experiment 1, except for the pin being used for the LED. In Hello World, you used pin D7 (built-in LED). In Experiment 1, you are instructed to connect an LED light bulb to pin D0. So just change this one line of code as shown below:

// global variables
int led = D0;

NOTE: LED lights need to be connected correctly. They are polarized (meaning they have a positive end and a negative end), and they need to be connected through a resistor (to limit the current that flows through the bulb). Pay attention to the diagrams and instructions in the experiment.

PROTOTYPE VERSION 2

GOAL: Add push button to Photon device, and have Photon code turn light on when button is pressed.

Complete Experiment 2 of the online SparkFun Photon Experiment Guide. Only complete the first part – skip Part 2.

For the Photon code, modify your existing code from the previous step. The complete code for Experiment 2 is shown below.

// global variables
int led = D0;
int pushButton = D2;

void setup() {
    pinMode(pushButton, INPUT_PULLUP);
    pinMode(led, OUTPUT);
}

void loop() {
    int pushButtonState = digitalRead(pushButton);

    // LOW means button is being pushed
    if(pushButtonState == LOW) {
        digitalWrite(led, HIGH);
    } else {
        digitalWrite(led, LOW);
    }
}

The push buttons included in your kit are classified as momentary switches, meaning they are only active ("on") when they are being pushed. Everyday examples of momentary switches are doorbell switches and the keys on a computer keyboard.

PROTOTYPE VERSION 3

GOAL: Modify Photon code so button switches light on or off with each push.

You will modify your existing Photon code to make the push button act similar to a maintained switch, which maintain their current state (on or off) until pushed again. This is how most light switches operate.

To do this, you need to create a global variable in the Photon code to keep track of the light's current state (on or off), so the light can be switched to the opposite state when the button is pushed again. Let's name this variable as: ledStatus

There are several possible data types that could be used for this variable, but we have to select only one to use:

// DON'T copy and paste this

// possible data types for variable - can only use one
int ledStatus = 0; // 0 represents off, 1 represents on
boolean ledStatus = false; // false represents off, true represents on
String ledStatus = "off"; // use "off" or "on"

Although any of those data types above would work, the code might be easier to understand if we use a String variable to track ledStatus as "off" or "on" by changing the variable's value whenever the button is pushed.

Since we still need global variables for the LED pin and the push button pin, our final list of global variables will be:

// global variables
int led = D0;
int pushButton = D2;
String ledStatus = "off";

Let's make sure the light is actually off when the device first starts (so it matches the initial ledStatus assigned in the global variables). To do this, add a statement within the setup() function.

void setup() {
    pinMode(pushButton, INPUT_PULLUP);
    pinMode(led, OUTPUT);

    // make sure light is off at start
    digitalWrite(led, LOW);
}

Let's add a custom function at the end of the Photon code that will toggle the light on or off based on the current ledStatus. Let's name this function as: ledToggle()

void ledToggle(){
    if (ledStatus == "off") {
        digitalWrite(led, HIGH);
        ledStatus = "on";
    } else {
        digitalWrite(led, LOW);
        ledStatus = "off";
    }
}

Now you can "call" (run) this custom function within the loop() whenever the button is pushed:

void loop() {
    int pushButtonState = digitalRead(pushButton);

    if(pushButtonState == LOW) {
        ledToggle();
    }

    // wait before reading button again
    delay(200);
}

Notice that a slight delay was included before reading the button again. (The delay command uses milliseconds, so 1000 milliseconds = 1 second.)

Without a delay (or if the delay is too short), the code loops so fast that it toggles the light on and off multiple times with each button press, making the device seem unpredictable. If the delay is too long, the device feels unresponsive because you have to hold down the button longer to have the code detect the press.

Remember to flash the modified app to your Photon device to test it out.

PROTOTYPE VERSION 4

GOAL: Modify Photon code so it interacts with a web app by sending and receiving data through Internet. Create a web app that shows current status of light and allows user to switch light on or off remotely.

You will modify your existing Photon code to send and receive data through the Particle Cloud service. Then you will create a web app that uses the Particle JavaScript library to send and receive data through the Particle Cloud.

Particle has built-in functions to share data through the Particle Cloud service. This is how your Photon device can interact with other apps (or even with other Photon devices).

Modify Photon Code

We want to share the ledStatus variable with our web app, so we can display the current status of the light. We can share the current value of a variable by adding one line of code to the setup() function:

Particle.variable("ledStatus", ledStatus);

We need to first tell it what name to call the variable in Particle Cloud (name can be up to 12 characters) and then identify the name of the variable in the Photon code. Usually, these two will have the same name (but they don't have to).

Next, we want to be able to receive data from our web app, so we can run the function to toggle the light on or off when the user clicks a button in the web app. Again, we can do this by adding one line of code to the the setup() function:

Particle.function("led", ledToggle);

We need to first tell it what name to call the function in Particle Cloud (name can be up to 12 characters) and then identify the name of the function in the Photon code to run. These can have the same name or be different.

We will also need to modify our ledToggle() function. If we want to use the Particle Cloud to call a function in our Photon code, then the function in the Photon code must return a int value (instead of void or some other data type) – and the function must accept a String value from the Particle Cloud (the string is the data that our web app sends to the Photon device).

However, you do not necessarily have to do any with the function's return value or even with the String value – they just need to be present in the code for it to communicate properly with Particle Cloud.

The modified ledToggle() function is as follows:

int ledToggle(String data){
    if (ledStatus == "off") {
        digitalWrite(led, HIGH);
        ledStatus = "on";
        return 1;
    } else {
        digitalWrite(led, LOW);
        ledStatus = "off";
        return 0;
    }
}

Now we have to also modify the line of Photon code in the loop that calls this function when the user pushes the button on the device. We must pass a string value to the function (even though we decided to not actually use this string for anything inside the function).

The modified loop() function is as follows (only change is adding "toggle"):

void loop() {
    int pushButtonState = digitalRead(pushButton);

    if(pushButtonState == LOW) {
        ledToggle("toggle");
    }

    // wait before reading button again
    delay(200);
}

That takes care of the changes in the Photon code. Remember to flash the modified app to your Photon device.

Create Web App

Create a new HTML file (index.html), CSS file (style.css), and JavaScript file (code.js) using a code editor (such as Editey in Google Drive, etc.). Make sure the files are blank.

Copy and paste the HTML code below into index.html

HTML for index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Smart Lightbulb</title>
        <script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
        <script src="//cdn.jsdelivr.net/particle-api-js/6.4.2/particle.min.js" type="text/javascript"></script>
        <script src="code.js" type="text/javascript"></script>        
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>My Smart Light</h1>
        <div id="light" class="card">
            <h2 id="light-name" contenteditable="true">Light 1</h2>
            <h2 id="light-status">Connecting...</h2>
            <button id="light-button" onclick="toggleLight();">Wait</button>
        </div>
    </body>
</html>

Notice that the HTML <head> section loads 3 JavaScript files:

1. jQuery which is a JavaScript library that makes it easier to do things like change HTML or CSS in your web app

2. Particle API JS which is a JavaScript library that contains functions that allows your web app do things like share data through Particle Cloud

3. code.js which is your own JavaScript file that will get data from your Photon device, send data to your Photon device, and update your web app to show the current status of your Photon device.

Notice that we've assigned unique id names to several elements within the <body> section. This will allow us to use jQuery functions to change these elements.

Finally, notice that we added an onclick event to the <button> that will run a JavaScript function called toggleLight() which will be in your code.js file.

Next, copy and paste the CSS code below into style.css

CSS for style.css

body {
    font-family:  Helvetica, Arial, sans-serif;
    font-size: 1em;
    text-align: center;
}
h1 {
    color: red;
}
.card {
    width: 250px;
    height: 200px;
    padding: 10px;
    margin: 0 auto 20px;
    border: 1px solid #888;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #ccc;
    background-color: #bbb;
    text-align: center;
}
.light-on {
    background-color: #ffff99; /* yellow */
}
button {
    padding: 10px;
    width: 100px;
    border-radius: 10px;
    font-size: 1em;
    color: #444;
    background-color: white;
}

The CSS will make our web app look nicer. The <div> in the HTML is styled to look like a card. The background color will be gray when the light is off but will be changed to yellow when the light is on.

We will change this background color by using jQuery to add the class of .light-on to the <div> if the data from the Particle Cloud tells us the light is on. When the light is turned off, we will use jQuery to remove that class (making the card gray again).

Finally, copy and paste the JavaScript code below into code.js

JavaScript for code.js

var myDevice = "000000000000000000000000"; // insert your Photon device ID
var myToken = "abcdefghijklmnopqrstuvwxyz1234567890"; // insert your Photon access token
var particle = new Particle();

window.setInterval(checkLight, 200);

function checkLight(){
    particle.getVariable({ deviceId: myDevice, name: "ledStatus", auth: myToken }).then(function(data) {
            if (data.body.result == "on") {
                $("#light").addClass("light-on");
                $("#light-status").html("ON");
                $("#light-button").html("Turn Off")
            } else if (data.body.result == "off") {
                $("#light").removeClass("light-on");
                $("#light-status").html("OFF");
                $("#light-button").html("Turn On")
            }
    }, function(err) {
            console.log("An error occurred retrieving data:", err);
    });
}

function toggleLight() {
    particle.callFunction({ deviceId: myDevice, name: "led", argument: "toggle", auth: myToken });
}

Notice that the first two lines of JavaScript are supposed to list your Photon device ID and your Photon access token, which must be copied and pasted from your Particle Build account.

IMPORTANT: If you don't update these first two lines of JS code, your web app will not work properly.

• Your Photon device ID is listed in the "Devices" section of your Particle Build account. Click the arrow to the right of your Photon device name to reveal the device ID. This device ID acts like a username to access your device's data in the Particle Cloud service.

• Your Photon access token is listed in the "Settings" section of your Particle Build account. This access token acts as a password to access your device's data in the Particle Cloud service. (If you reset your access token at some future point, you would have to update your web app to use the new token.)

Next notice that we include a JavaScript statement that tells the webpage (window) to run the checkLight function at an interval of once every 200 milliseconds. This lets the web app stay updated on the current status of the light.

Next, we list our checkLight() function that we already told the web app to run every 200 milliseconds. Inside this function, it checks the current value of the ledStatus variable that is being shared to the Particle Cloud by your Photon device.

Here's how particle.getVariable in the web app matches up with Particle.variable in the Photon code. Notice that what links them is the name "ledStatus" – this is the variable in the Photon code that is being sharing through Particle Cloud.

// Just a comparison - DON'T copy and paste these again

// WEB APP 
function checkLight(){
    particle.getVariable({ deviceId: myDevice, name: "ledStatus", auth: myToken }).then(function(data) {
            if (data.body.result == "on") {
                $("#light").addClass("light-on");
                $("#light-status").html("ON");
                $("#light-button").html("Turn Off")
            } else if (data.body.result == "off") {
                $("#light").removeClass("light-on");
                $("#light-status").html("OFF");
                $("#light-button").html("Turn On")
            }
    }, function(err) {
            console.log("An error occurred retrieving data:", err);
    });
}


// PHOTON CODE
Particle.variable("ledStatus", ledStatus);

Once we get the data result for the "ledStatus" variable, we use jQuery statements to add or remove the class light-on to switch the card background to yellow or gray and to update the text in two HTML elements.

Finally, the last thing in our JavaScript is the toggleLight() function that will run whenever the user clicks the on-screen button. Inside this function, it calls the "led" function through Particle Cloud and sends it data (the String argument, which we assigned a value of "toggle").

Here's how particle.callFunction in the web app matches up with Particle.function in the Photon code. Notice that what links them is the name "led" – this is the function that the web app calls through Particle Cloud. When the Photon code receives this call, the Photon code runs the custom function called ledToggle and passes it the String data sent by the the web app.

// Just a comparison - DON'T copy and paste these again

// WEB APP 
function toggleLight() {
    particle.callFunction({ deviceId: myDevice, name: "led", argument: "toggle", auth: myToken });
}

// PHOTON CODE
Particle.function("led", ledToggle);

int ledToggle(String data){
    if (ledStatus == "off") {
        digitalWrite(led1, HIGH);
        ledStatus = "on";
        return 1;
    } else {
        digitalWrite(led1, LOW);
        ledStatus = "off";
        return 0;
    }
}

Be sure to refresh your web app, and it should now be able to interact with your Photon device. You should be able to push the physical button on the Photon device to switch the light on or off – and see that your web app shows the updated light status relatively quickly.

You should also be able to do the reverse: click the on-screen button in your web app to see that it toggles the light on your Photon device and then updates the light status on the web app.

NOTE: There may be a slight delay of about 0.5 second for the device and web app to sync up. Keep in mind that the web app was told to only run checkLight() once every 0.2 seconds. We also told the Photon code to add its own delay of 0.2 seconds because of the push button. Also, the data is traveling from an app on one device through the Internet to Particle Cloud and then back again through the Internet to the other app on a different device. (Remember data is not being transferred through the USB cable – it only provides power.)

You've just created your first IoT device!

GOING FURTHER

If you have time, you could think about ways to modify the smart lightbulb and its apps. Can you further customize the appearance of the web app? Can you add a second LED light and second button to your Photon device – and then modify your Photon app and web app to control each light separately? What are some other features that you could try to add to the smart lightbulb web app (dimming lights, setting on-off schedule, etc.)?

The Nest Learning Thermostat is a smart thermostat for homes that was first released in 2011. Nest now offers other smart home devices. In 2014, Google bought Nest for over $3 billion.

VIDEO: Meet the Nest Learning Thermostat

YOUR TASK

Research the Nest thermostat product webpage to better understand its design:

1. What are the key functions and features of this product? What advantages does it have over similar products? Use this information to define the product’s value proposition (one-sentence summary of what problem it solves and what benefit it provides).

2. What types of people do you think are the target users for this product? What characteristics do these target users probably have? Use this information to create a persona summarizing a target user for this product.

3. What are the inputs (such as sensors, etc.) and outputs of this product? What web services or apps does it interact with? How do all these parts work together? Use this information to create a system model representing how this product works.

Use this assignment template to record your research notes and construct your value proposition, persona, and system model.

The Nest Learning Thermostat was introduced in 2011, and now several companies offer smart thermostats. Smart thermostats can be controlled remotely using a mobile app and offer features like adjusting the temperature, creating temperature schedules, reviewing energy usage, etc.

YOUR TASK

As further practice building and programming IoT devices with your Photon kit, your team will create a prototype of a smart thermostat that can be controlled by a web app.

However for this practice, you will only be given partial instructions. Your team will have to figure out the rest in order to build the device and program its apps.

Your team will need to carefully read through these instructions. Only ask questions if you have first read the instructions.

It might be helpful to have your team members divide up the work:

• one person could build the device by connecting the parts

• another person could program the Photon app

• a third person could program the web app

BUILDING THE DEVICE

System Model

Here is a system model showing how the parts of the smart thermostat prototype are supposed to work together:

System Features

• Device (and web app) display room temperature, temperature setting, and system status (Off, Heating, Cooling).

• Device (and web app) allow user to change desired temperature setting using buttons.

• Device reads current room temperature.

• Device compares room temperature with temperature setting to control system:

  • If room temperature is lower than temperature setting, device turns on heating system (represented by red LED).

  • If room temperature is higher than temperature setting, device turns on cooling system (represented by blue LED).

  • If room temperature is equal to temperature setting, device turns off heating and cooling systems.

NOTE: To make this device simpler to build and program, this thermostat is designed to run in a dual mode where it may turn on heating or cooling during the same day. For example, people that live in desert climates (such as Arizona, etc.) would want a thermostat that runs in dual mode because it can get very hot during the day but very cool at night.

Most thermostats are designed to be in only one mode at a time: Heat Only, Cool Only, or Off. The "Heat" mode is used during the winter to only run the furnace. The "Cool" mode is used during the summer to only run the air conditioning. The "Off" mode is used during parts of the spring and fall when no heating or cooling is needed. Most thermostats have a separate button to change the system mode.

Picture of Prototype

Here's a picture of a smart thermostat prototype to give you a general sense of how it will look when finished. While it might look complex, each individual part is relatively simple to connect. The instructions provide references that show how to connect each part.

Parts Needed

• Red LED (to represent heating system, such as furnace)

• Blue LED (to represent cooling system, such as air conditioner)

• 2 Resistors (one for each LED)

• Red Push Button (used to increase temperature setting)

• Blue Push Button (used to decrease temperature setting)

• RHT03 Humidity and Temperature Sensor

• Micro OLED Display Screen

• 18 Jumper Wires

Arranging Parts

Make sure the parts are arranged in a logical layout that makes it easy for a person to understand and use the device.

Remember that all the parts have to be arranged so their pins are in their own breadboard rows:

• If different parts are on the same side of the breadboard, the pins of different parts should not be in the same row number.

• A resistor is an exception because it is supposed to share a row number with a pin of another part (such as LED, etc.).

• If different parts are on opposite sides of the breadboard (left vs. right), it is perfectly fine if they use the same row numbers because the left-hand rows are not connected to the right-hand rows.

• Different pins from the same part should not be in the same row number. For example, the OLED display has 8 pins, and each of these pins must be in a different row number on the breadboard.

TIP: Try to place the jumper wires on the side closest to the Photon board, so the wires don't block parts that need to be seen or interacted with.

Connecting Power Supply

You can use one power rail on the breadboard to provide power to all the parts (similar to how a power strip works):

1. Connect a jumper wire from the 3.3V (+) pin on the Photon board to a pinhole in the positive (+) column of the power rail closest to the Photon board.

2. Then connect another jumper wire from a pinhole in the negative (-) column of this power rail back to a GND (-) pin on the Photon board.

3. All other parts that you add to the breadboard can connect to this power rail through their own jumper wires. Some parts will only need to connect to the negative (-) rail because their voltage source (+) will come from a digital pin. Other parts will need to connect to both the positive (+) and negative (-) rails.

IMPORTANT: The OLED display screen can only handle 3.3 volts of power, so be sure to use the 3.3V pin as your voltage source. (Caution: The V-USB pin supplies 5V, which could damage the OLED.)

Connecting Micro OLED Display

The Micro OLED display requires using 7 jumper wires to connect the OLED pins to specific pins on the Photon board. Therefore, you should probably connect the OLED first before adding the other parts.

This reference for the Micro OLED display explains how to connect the OLED and provides example code for displaying text on the OLED screen.

Connecting Other Parts

The other parts can be connected to any of the other digital pins (or analog pins such as A0 or A1) that are not being used by the OLED.

This reference for the RHT03 sensor explains how to connect the RHT03 Humidity and Temperature Sensor and provides example code for taking readings with the RHT03 sensor.

If helpful, there are also references for the LED light and push button that show how to connect them and provide example code for using them.

CODING PHOTON APP

Create a new app in Particle Build titled: SMART-THERMOSTAT

Remember that the structure and order of the code for a Photon app is:

1. libraries (if needed for certain inputs or outputs)

2. global variables

3. setup() function (can only have one)

4. loop() function (can only have one)

5. custom functions (as many as needed)

If helpful, here is additional information (and references) for coding Photon apps.

Libraries

Be sure that you include the libraries for the Micro OLED display and the RHT03 sensor. The code examples in the Micro OLED reference and the RHT03 sensor reference explain how to include the library for each part.

Global Variables

Your app should declare global variables for each part's pin numbers (OLED, RHT03, both LEDs, both buttons) and declare objects for the OLED display and RHT03 sensor. The code examples in the references for the parts can help with this.

Be sure the pin numbers (such as: D0, D1, etc.) you list in your code match the actual pin that each part's jumper wire is connected to on the Photon board. If they don't match, it is usually easiest to fix it by changing your code (rather than moving your wire).

In addition, your app should also include these other global variables:

// add global variables for OLED display, RHT03 sensor, LEDs, and buttons

// other global variables
String systemStatus = "Off"; // values = Off, Heating, Cooling
int setTemp = 70; // initial temperature setting (degrees F)
int minTemp = 50; // minimum allowed temperature setting
int maxTemp = 90; // maximum allowed temperature setting
int roomTemp; // reading from temperature sensor

setup( )

In your setup() function, be sure to:

• set the pin modes for your LEDs and buttons

• turn off the LEDs at the start

• start the OLED display and RHT03 sensor

• include Particle.variable statements to share these three variables with your web app: setTemp, roomTemp, systemStatus

• include Particle.function statements to allow your web app to call these two custom functions: tempUp, tempDown

The code examples in the references for the parts can help with figuring out the pin modes, turning off the LEDs, and starting the OLED display and RHT03 sensor.

This Particle Cloud reference can help with the Particle.variable and Particle.function statements.

You can also refer back to the setup() function in the final version of the Photon app for your Smart Lightbulb.

NOTE: If you have added the Particle.function statements but haven't yet added the custom functions for tempUp and tempDown, Particle Build will say your app has errors when you try to verify the code. To avoid this, you can type two forward slashes directly before each Particle.function statement to temporarily make them into comments. Later, you will need to remove these slashes once you've added the custom functions to your Photon app.

loop( )

Good news – here is the entire code for your loop() function:

void loop() {
    checkButtons();
    readTemp();
    compareTemp();
    displayTemp();
    delay(200);
} // end of loop()

However, you will have to create custom functions for: checkButtons(), readTemp(), compareTemp(), displayTemp() (as well as tempUp and tempDown)

NOTE: Until you create these custom functions, Particle Build will say your app has errors when you try to verify the code if you include the names of these functions inside your loop() function. So in the meantime, you can either leave the loop() function empty, or you can type two forward slashes directly before the name of each custom function listed inside the loop() function to temporarily make them into comments. You will need to revise the loop() function to match the code above once you've created the custom functions.

Custom Functions

You will need to create the following custom functions:

• checkButtons() should read each button and call tempUp() function if red button pushed and call tempDown() function if blue button pushed

• readTemp() should update roomTemp with new reading from RHT03 sensor

• compareTemp() should compare roomTemp with setTemp to decide whether system should be heating, cooling, or off (be sure to update systemStatus and turn correct LEDs on or off)

• displayTemp() should use Micro OLED to display roomTemp, setTemp, and systemStatus (add other text and adjust font size if needed to make information clear and easy to read)

• tempUp() should increase setTemp by 1 but not allow it to go higher than maxTemp

• tempDown() should decrease setTemp by 1 but not allow it to go lower than minTemp

Here is part of the code for your checkButtons() function:

void checkButtons() {
    int redButtonStatus = digitalRead(redButton);
    // LOW means button is pushed
    if (redButtonStatus == LOW) {
        tempUp("adjust");
    }

    // add code for checking blue button

} // end of checkButtons()

For help with your readTemp() function, look at the code examples in the RHT03 sensor reference.

void readTemp() {
    // add code to update roomTemp with new reading

} // end of readTemp()

Here is part of the code for your compareTemp() function:

void compareTemp() {
    if (roomTemp < setTemp) {
        // add code to change systemStatus and turn on/off LEDs

    } else if (roomTemp > setTemp) {
        // add code to change systemStatus and turn on/off LEDs

    } else {
        systemStatus = "Off";        
        digitalWrite(redLed, LOW);
        digitalWrite(blueLed, LOW);
    }
} // end of compareTemp()

For help with your displayTemp() function, look at the code examples in the Micro OLED reference.

void displayTemp() {
    // add code to update OLED with thermostat information

} // end of displayTemp()

Remember that tempUp() and tempDown() are functions that your web app can call, so the code for these two functions is slightly different (they must return an integer value and accept a String value).

As an example, here is the complete code for your tempUp() function:

int tempUp(String command) {
    if (command == "adjust") {
        setTemp = setTemp + 1;
        if (setTemp > maxTemp) {
            setTemp = maxTemp;
        }
        return 1;
    } else {
        return 0;
    }
} // end of tempUp()

Then you can copy and modify the code above to create your tempDown() function.

IMPORTANT: If necessary, go back to your setup() function to make sure your Particle.function statements do not have two slashes before them. Also be sure that your loop() function matches the code provided earlier.

CODING WEB APP

Create a new HTML file (index.html), CSS file (style.css), and JavaScript file (code.js) using a code editor (such as Editey in Google Drive, etc.). Make sure the files are blank. Rename the folder containing the files as: Smart Thermostat

The pictures show screenshots for how the web app could possibly look (during four different states: connecting, cooling, off, heating). However, your web app doesn't have to look exactly like this – you can design your own screen layout as long as the necessary information and functions are present.

If necessary, refer to the System Features towards the top of this page to verify what the web app should do.

HTML for index.html

You should copy and modify the HTML used in the Smart Lightbulb web app.

In the <body>, you should have a <div> element to display the current thermostat information. Assign id="thermostat" and class="off" to this <div> element.

This <div> should contain <p> elements to list the room temperature, temperature setting, and system status (Off, Heating, Cooling). Be sure to give each <p> element a unique id name, so you can update their HTML using jQuery statements in your code.js and change their style using CSS declarations in your style.css

Be sure to include two <button> elements to allow the user to increase and decrease the temperature setting: one should have onclick="raiseTemp();" and the other should have onclick="lowerTemp();" (these will run custom functions that you'll create in your code.js)

If necessary, here is a HTML reference for additional help on HTML element tags.

CSS for style.css

If you want, you can borrow and modify some of the CSS used in the Smart Lightbulb web app.

Add CSS declarations to style properties for your #thermostat. For example, the CSS below will make it into a circle (by setting border-radius: 50%).

#thermostat {
    /* you can change these or add other properties */
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border: 1px solid black;
    border-radius: 50%;

}

Create a class for each system status: .off, .heating, .cooling

Each of these classes should set a background-color that represents the system status.

You can add CSS declarations for other elements or id names to customize the layout and appearance of your web app, so it is easier and more enjoyable to use.

If necessary, here is a CSS reference for additional help on CSS syntax to declare style properties.

JavaScript for code.js

You should copy and modify the JavaScript used in the Smart Lightbulb web app.

It may be helpful to use the information and code examples in this Particle Cloud reference.

IMPORTANT: Remember to assign your Photon device id and access token to the JavaScript global variables for myDevice and myToken

Be sure the webpage window is set to run the checkThermostat function at an interval of every 200 milliseconds.

Your JavaScript code should have the following custom functions:

• raiseTemp() function should contain particle.callFunction statement to call "tempUp" function (with argument of "adjust") on your Photon device

• lowerTemp() function should contain particle.callFunction statement to call "tempDown" function (with argument of "adjust") on your Photon device

• checkThermostat() function should contain three separate particle.getVariable statements to get current values for setTemp, roomTemp, and systemStatus and use these to update the content and appearance of your web app

In each particle.getVariable statement, the value of the requested Photon variable gets temporarily stored in a local variable called data.body.result that you can use.

By referring to id names, jQuery statements (which always start with $) can easily change the text inside an HTML element. For example, if the webpage contained <p id="#set-temp"> element, you could update its content with jQuery to display the word "Set " followed by the value stored in data.body.result:

$("#set-temp").html("Set " + data.body.result);

Here's how that jQuery statement would be used inside a particle.getVariable statement:

particle.getVariable({ deviceId: myDevice, name: "setTemp", auth: myToken }).then(function(data) {
    $("#set-temp").html("Set " + data.body.result);
}, function(err) {
    console.log("An error occurred retrieving data:", err);
});

You can also use if and else if statements to check the data.body.result value, and then use jQuery statements to easily add or remove CSS classes:

particle.getVariable({ deviceId: myDevice, name: "systemStatus", auth: myToken }).then(function(data) {
    if (data.body.result == "Heating") {
        $("#system-status").html(data.body.result);
        $("#thermostat").removeClass("off");
        $("#thermostat").removeClass("cooling");
        $("#thermostat").addClass("heating");
    }
    // add code to check if data.body.result is "Cooling"

    // add code to check if data.body.result is "Off"

}, function(err) {
    console.log("An error occurred retrieving data:", err);
});

If necessary, here is a JavaScript reference and a jQuery reference for additional help on their syntax and functions. Because jQuery is a JavaScript library, JavaScript statements can be combined together with jQuery statements.

After creating the code for the other custom functions in your JavaScript, test your web app with your Photon device. If everything is working, then congratulations...

You've just created your second IoT device!

GOING FURTHER

If you have time, add a third button to the device and web app that allows the user to change the system mode (Off, Heat, Cool). For example, in the "Heat" mode, only the heating system (red LED) should be turned on or off by the device. You will have to modify your Photon app to make the device operate properly in each mode. Your device and web app should display both the system mode and system status. For example, the mode might be "Heat" but the status would be "Heat OFF" if the current room temperature is at or above the desired temperature setting.

Within your team, you will share and discuss the possible project ideas generated by each team member. Your team will use a graph to help evaluate the ideas to determine its top 3 ideas for what problem to solve. Then your team will gather additional feedback on its top 3 ideas from potential stakeholders.

YOUR TASK

Each team member should briefly explain his or her possible ideas for what problem your team project might solve. As a group, briefly discuss each idea, and then plot each idea on this graph based on:

• how much your team is interested in solving the problem (from LOW to HIGH)

• how much the school community would benefit from solving the problem (from LOW to HIGH)

On the graph, each idea will be represented by a circle with a unique number. Five numbered circles have been provided that you should drag-and-drop into the graph to plot ideas. Copy-and-paste to create more circles, and then change their numbers (to make 6, 7, 8, etc.).

TIP: The graph can be modified by clicking it and selecting the "Edit" link below the graph.

Below the graph, provide a legend that summarizes the idea represented by each number.

EXAMPLE: Here is an example of a completed graph with ten ideas plotted.

Each idea should be plotted relative to the other ideas.

For example, if there is less team interest in the current idea compared to another idea, the current idea should be located further left than the other idea. If the current idea will have a greater community benefit compared to the other idea, the current idea should be located higher than the other idea.

After plotting circles for all the ideas, your team should select its top 3 project ideas, and fill out the table on the second page of the graph.

HINT: You will probably want to select ideas located towards the upper right of your graph.

Share your top 3 project ideas with stakeholders that might be affected by these problems, so you can get their feedback on how much they are interested in having these problems solved.

A persona is a model of a target user for a product or service. A persona summarizes the target user’s background, goals, and needs. The persona helps you design a solution to meet the target user’s expectations.

A persona is based on data collected from multiple users through observations, interviews, surveys, etc. However, the persona is presented as a description of an individual person, even though the persona actually represents a group of users with similar characteristics.

The reason for presenting the user data as an individual person is because it is easier to empathize with a description of a specific person, rather than a set of statistics summarizing an entire group.

Here is an example of a persona created for a travel booking website:

A product or service might have many different types of users with different backgrounds, goals, and needs. Therefore, different personas could be created to model these different types of users.

However, it may not be possible (or desirable) to design an solution that tries to meet the needs of every possible type of user. Often this results in a solution that doesn’t actually satisfy anyone. Instead, it is recommended to identify the primary type (or types) of users that represent your main target for designing your solution.

It is important that a persona is fictional (not an actual individual) yet realistic (based on data from actual users). Since the goal is to develop empathy for the target users, a persona should not be humorous.

There are different formats for personas, but personas are usually condensed to one-page in length and often contain information such as:

• Profile (background information about user):

  • Photo (fictional - use stock photo)

  • Name (fictional - first name is sufficient)

  • Type of User (label or category)

  • Relevant Demographic Information (might include: age, gender, occupation/role, etc.)

  • Other Relevant Information or Context (might include: description of physical, social, and technological environment in which product/service will be used; user’s proficiency with technology; special knowledge or skills; personality traits; quote from user; etc.)

• Goals (what high-level goals does user want to achieve with product/service, and what tasks does user need to complete in order to meet these goals)

• Anxieties and Motivations (what influences user’s behaviors and decisions related to adopting possible new solution to meet goals)

• Frustrations (what pain points does user experience with current situation or current solution)

• Needs and Expectations (what are user’s expectations related to functionality, usability, and user experience of possible new solution)

YOUR TASK

Identify two different types of users (stakeholders) that will be your main targets for designing your solution.

For example, your stakeholders might have different roles (such as: students, teachers, administrators, staff, etc.). Even if there only seems to be one group that you are targeting (such as: students that get food from the cafeteria), try to identify two subgroups that may have different needs (such as: students that only occasionally get food from the cafeteria vs. students that regularly get food from the cafeteria).

Next your team will select its final idea for what problem to solve, and conduct user research to learn more about the problem and the people affected by it.

The user research will consist of a field study to observe people experiencing the problem in a real context and interviews to ask people about their experiences with the problem. Ideally, you will both observe and interview each person.

NOTE: If it is not possible to directly observe people experiencing the problem (due to when and where it occurs), then during the interviews, ask each person to recall in detail the last time they experienced the problem.

Your observations and interviews should gather data to help your team:

1. DEFINE THE PROBLEM: What are the steps involved in the current process? When and where does it occur? Who is involved? What are their goals and needs related to this process? What works well in the current process? What are the problems?

2. MEASURE THE IMPACT: What are the effects of the problem? If possible, try to quantify the effects, such as: extra time spent, effort wasted, extra cost, errors made, level of frustration, etc.

3. ANALYZE THE CAUSE: Why does the problem occur? Keep asking “why” until you discover the root cause(s).

Your team will use the data gathered during your research to help complete the next several project deliverables, which help further define the problem your team is solving:

• Personas for Different Stakeholders

• Journey Map of Current User Experience

• Value Proposition of Solution

• Design Requirements for Solution

YOUR TASK

HINT: Once completed, your team's template could be printed and used to record your research notes. Print one copy for each person that you need to observe and interview.

1. Select the final idea for what problem your team project will solve.

2. Identify 2 different groups of stakeholders affected by the problem (such as: students, teachers, administrators, staff, etc.). Even if the problem only seems to affect one group (such as: students that get food from the cafeteria), try to identify two subgroups (such as: students that only occasionally get food from the cafeteria vs. students that regularly get food from the cafeteria).

3. Identify what background information would be relevant to gather about each stakeholder (such as: gender, age, etc.).

4. Prepare list of 3-5 focus questions that your team will try to answer through the field study observations.

6. Discuss specific plans to make sure your team will observe and interview at least 3 people from each of your 2 stakeholder groups for a total of at least 6 people. Each team member should observe and interview at least 2 people (but may need to complete more).

Conduct the user research over the next couple of days. Each team member should record detailed notes for each observation and interview conducted, so that all the team's data can be compiled together.

During the next class meeting, you will have the opportunity to practice your interviews with students from other teams. This will give your team a chance to revise its questions (if necessary) before you collect data from people outside of class. Data collected in-class can be used by your team, but your team still needs data from people outside of class.

A journey map is a diagram of a user’s experience during different steps before, during, and after using a process, product, or service to accomplish a goal.

A journey map is often used to understand the current user experience. The user’s emotion (ranging from positive to negative) is indicated for each step in the experience. Steps that cause negative emotions identify opportunities to improve the user experience through a new solution.

A journey map shows the experience for a particular type of user (i.e., a particular persona) during a specific scenario.

For example, imagine creating a journey map for visiting a doctor’s office. A brand new patient would probably have a different experience than a regular patient. A patient having a routine check-up would probably have a different experience than a patient receiving test results.

There are different formats for displaying journey maps. Here is an that uses emojis to show the experience of a repeat customer buying a drink from a coffee shop. Multiple customers were observed and interviewed to gather the data used to construct the journey map.

EXAMPLE:

The employees at the coffee shop could then use this journey map to identify the parts of the current user experience that are positive, neutral, or negative.

The positive experiences should be obviously be kept because these are the things your users enjoy about your current product or service. If possible, you should try to enhance, extend, or emphasize these positive experiences.

Even if there are very positive parts in the overall experience, it is critically important to fix or reduce the negative experiences. This is because users tend to remember the bad parts of an experience more than the good parts – this is called .

You should also try to make the neutral experiences become more positive. Otherwise, there is a danger of them turning into negative experiences. In the coffee shop example, waiting in line for your drink starts off as a neutral experience. However, if the wait becomes too long, it becomes a negative experience. What if the coffee shop could figure out a way to actually make waiting an enjoyable experience?

The point is that you cannot provide a better user experience until you know what is – and what isn't – working well in the current experience. This is true whether you are trying to improve an existing solution or trying to design a brand new solution.

YOUR TASK

Construct a journey map of the current user experience for one of your target user personas:

1. Use your team’s research data to identify the sequence of steps involved in the current process (i.e., without your smart device) for the persona. For each step, identify the persona’s emotional reaction (from positive to negative). For example, if your team is focusing on improving student lockers, show the current experience of how students use their lockers to show what is good and bad about using the current lockers.

2. Use to construct your journey map. Add text boxes to briefly describe each step, and represent the persona’s emotion at each step with a corresponding emoji. A range of emoji has been included in the template for you to use. Just delete any emoji that you don't need for your journey map. (If necessary, you can download other emoji images from .)

3. Connect the emojis with arrows to create a line graph of the user experience over time. Any steps that show a decrease or that have negative emotions represent opportunities for your team to design an improved solution (i.e., your smart device) that will provide a better user experience.

Your team has researched and defined a specific problem to solve. Now your team needs to design a solution by brainstorming ideas.

Ideation – the process of forming ideas – is a fundamental part of design. Ideation involves both creative thinking and critical thinking.

The mistake that some designers make is to pick the first idea they think of, without really exploring all the possible design ideas.

That's why design ideation should really occur into two phases: 1. Getting the Right Design = producing many ideas to find the most promising design 2. Getting the Design Right = refining the selected design to make it as good as possible

In this assignment, your team will begin to "get the right design" by generating many possible ideas. In the next assignment, your team will evaluate those ideas to select the most promising design idea(s) and then "get the design right" by refining the idea(s).

Keep in mind that your solution must include both a smart device and a web app that interact with each other through the Internet. You will want to generate ideas for each of these parts of the solution.

Here is some advice for brainstorming ideas:

• First brainstorm as individuals, then share and brainstorm as a group

• Be as creative and diverse as possible in your thinking

• Don't criticize or reject any ideas yet

• It's okay to have ideas for only part of the solution

• Record ideas using simple sketches and descriptions

• Capture the essence of the idea, not the details

• Generate as many ideas as possible

Sketching is extremely helpful in ideation. Sketches are a quick way to record your ideas. Sketches also make it easier to explain your ideas to someone else. In fact, just creating a sketch can often lead you to think of even more ideas. Sketches do not need to be complex or realistic: stick figures can represent people, rectangles can represent device screens, arrows can represent movement or actions, etc. Adding a brief written description clarifies what the sketch represents.

EXAMPLE

Here are two different ideas for a solution to take student attendance. Each idea is only a partial solution (first idea is for a smart device, second idea is for a web app - but these two ideas do not necessarily go together). The essence of each idea is captured using a simple sketch and description. Of course, there are many other possible ideas that could be generated to solve this specific problem.

YOUR TASK

1. Be sure each team member understands the specific problem your team is trying to solve. If necessary, review your team's personas, journey map, value proposition, and design requirements. These help define who you are designing for, what problem you are solving, what benefits your solution should provide, and what criteria your solution should meet.

2. Each team member should individually brainstorm and record at least 5 different ideas using simple sketches and descriptions. It's okay if an idea focuses on just part of the solution (just the smart device, just the web app, etc.). Don't worry yet about whether you have the necessary technology or ability to build the idea.

3. Your team should share its ideas with each other, and brainstorm additional ideas as a group. Your team should have a combined total of at least 10 different ideas recorded. Remember that you are not rejecting any ideas yet.

Now that your team has observed and interviewed stakeholders, you should compile and share all your user research data electronically, so that your team can analyze and use the data.

YOUR TASK

The research notes from each person (user) that was observed and interviewed will be listed in a separate row. Each user will be identified by a code (U1, U2, U3, etc.) instead of their real name (to keep them anonymous).

For each user, list the name of the team member who conducted the interview, and list the type of stakeholder that the user represents.

The spreadsheet has 3 generic columns to record: (1) relevant background info about the user, (2) notes from your observation of the user (either your direct observation or the user's recalled experience), and (3) notes from your interview of the user.

NOTE: It may be better to replace some or all of these 3 generic columns with specific columns for each of the questions listed in your team's user research plan. This will allow you to list specific notes under specific questions, making it much easier to compare and analyze the data from all the users.

Your team's is to design and build a smart device that could improve or benefit your school. Your goal is to create a useful and innovative solution that solves a problem, fulfills a need, or improves an existing situation in the school community or school environment.

YOUR TASK

Each team member should generate his or her own set of possible ideas for what problem your project might solve. Later on, your team will share and discuss their ideas, in order to evaluate and refine them to select the problem to tackle for your project. (After that, your team will go through another process to generate, evaluate, and refine ideas for the solution to your selected problem.)

Over the next couple of weeks outside of class (while your team is building a smart thermostat during class), you should "look and listen" by observing problems or issues around school and talking with stakeholders affected by these issues.

Stakeholders from the school community might include students, teachers, administrators, staff, parents, etc. Depending on the problem, the stakeholders might belong to specific subgroups such as: student athletes, students involved in extra-curricular activities, maintenance staff, cafeteria staff, etc.

Here are a few tips:

1. Don't worry about knowing all the details yet about the problems. Record enough information to be able to explain the ideas to your team. If needed, your team can gather more information later if an idea seems worth pursuing.

2. Don't worry about how "good" each idea is. Your team will discuss and evaluate the ideas later. Sometimes an idea that doesn't seem promising at first turns out to be a great idea.

3. Don't worry yet about trying to come up with solutions to the problems. Your team will focus on figuring out possible solutions later.

A value proposition is an “elevator pitch” for a product or service – a clear and concise sales pitch that summarizes the product or service.

There are different formats or templates for creating a value proposition statement. The most popular template for a value proposition provides the following answers:

• Who are the target users for the product/service?

• What problem or need does the product/service solve?

• What is the product/service?

• What benefit or value does the product/service provide?

VALUE PROPOSITION TEMPLATE

For [describe target users] who [describe problem or need], [name of product/service] is a [describe type of product/service] that [describe benefit or value].

EXAMPLES

For coffee drinkers who are annoyed by waiting in line to order and get their drinks, JavaGo is an app that lets you pre-order and pay for your drink, so it's fresh and ready when you arrive at our coffee shop.

For people needing a ride who are frustrated by trying to get and pay for a taxi, Lyft is a smart ride-sharing service that, with one tap in our app, quickly brings a car to your exact location, gets you to your destination, and lets you pay automatically without cash.

YOUR TASK

It may be helpful to refer back to your journey map since this shows some of the current problem(s) affecting your target users. The journey map can help you clarify the benefit or value that your solution will provide (compared to the current user experience).

Your team will build and program smart devices using an IoT electronics kit featuring the Photon P1 microcontroller, which is produced by a company called .

A microcontroller is a small computer on a single integrated circuit that contains a processor (CPU), memory (RAM and storage), and programmable inputs and outputs. The Photon microcontroller also has an integrated Wi-Fi chip, which makes it great for IoT products.

The that your team will use comes from another company called . SparkFun has incorporated the Particle Photon P1 microcontroller into an electronics board (which SparkFun calls a "RedBoard") that makes it easy to build devices using various inputs and outputs, such as the ones included in the kit.

VIDEO:

YOUR TASK

2. Turn on your Photon device by carefully inserting the USB cable into the Micro-USB port on the device (be absolutely sure the correct side of the Micro-USB plug is facing up) and plugging the other end of the cable into a USB port on a computer or charger. Your Photon will try to connect to Wi-Fi (we've already saved a Wi-Fi login on the device). Once you have verified that your Photon device is connected to Wi-Fi and the Particle Cloud, you're ready for the next step.

Design requirements list specific criteria that a new solution or system must meet in order to be considered successful.

It is helpful to identify these requirements up-front, so they can be used to help you generate, evaluate, and refine ideas for a solution.

There are different types of design requirements. Three key types of requirements are:

1. Functional Requirements

2. Usability Requirements

3. User Experience (UX) Requirements

Functional requirements specify the functions and features the solution should have to be useful to the target users. Functional requirements generally focus on making sure the system:

• has necessary functions to allow users to complete tasks to achieve their goals

• has innovative features that provide additional value to users

Usability requirements specify criteria to ensure the solution is easy to use. Usability requirements generally focus on making sure the system:

• is easy to learn and remember

• is efficient and effective to use

• helps prevent and fix user errors

User experience (UX) requirements specify criteria to ensure the solution is satisfying to use. UX requirements generally focus on making sure the system:

• produces desirable reactions (such as users feeling confident, engaged, relaxed, happy, etc.)

• avoids undesirable reactions (such as users feeling frustrated, bored, annoyed, angry, etc.)

In addition, other types of design requirements might include:

• environmental requirements (criteria for physical, social, and/or technical conditions that system must operate within)

• data requirements (criteria for data that system must process and store)

• security and privacy requirements

• maintenance and support requirements

• legal and regulatory requirements

• ethical requirements

An important aspect of any design requirement is the ability to objectively determine or measure whether the requirement was met (or to what degree it was met). After a solution has been designed and built, data from evaluations (such as user testing, etc.) can provide evidence of how well the design requirements were met.

YOUR TASK

• List at least 3 Functional Requirements

• List at least 3 Usability Requirements

• List at least 3 User Experience (UX) Requirements

• List at least 1 Other Requirement

It may be helpful to refer back to your personas, journey map, and value proposition to identify key requirements that will be needed in your solution.

Next your team will have stakeholders evaluate your solution design. Receiving constructive feedback early in the design process allows you to improve your solution before actually building it.

For each evaluator, your team will tell him/her the value proposition for your solution, and then show him/her each of these design artifacts:

• Refined Solution Sketches

• System Model for Solution

• Wireflow for Web App

• Storyboard for Solution

Your team should encourage the evaluator to ask questions and to provide specific feedback (positive and negative) by "thinking aloud" as they review the design artifacts.

If necessary, ask the evaluator questions to get him/her to provide more feedback or to clarify their feedback:

• What do they think is unclear or confusing? Why?

• What design features do they think are most useful or valuable? Why?

• What design features do they think should be changed or improved? Why?

It is important for your team to understand the reasons behind the feedback – why does the evaluator think that?

YOUR TASK

1. Your team should recruit 3-5 stakeholders to individually evaluate your team's solution design.

2. Each evaluation should take about 5-7 minutes to complete. While one team member presents the solution design artifacts to the evaluator, another team member should record the evaluator's feedback in this spreadsheet template.

3. Once all the evaluations are completed, your team should review and discuss the feedback from all the evaluators, in order to summarize your evaluation findings in this document.

Your team will create a system model of your smart device and web app to show how the different parts of your solution work together. This system model will help your team better understand how to build and program your solution.

Your system model should include the smart device's inputs (such as: sensors, buttons, etc.), outputs (such as: lights, motor, etc.), and its web app.

If your smart device and/or web app interact with a web service (such as: getting data from weather website, posting message to social media, etc.), then also include this in the system model.

EXAMPLE

Here is the system model of the smart thermostat prototype that your team built as practice.

YOUR TASK

1. Use your team's refined solution sketches to identify the specific inputs and outputs that will be used to build your smart device. If helpful, here are the list of parts available in your Photon kit. If necessary, your team may need to simulate certain inputs or outputs.

2. Modify this system model template to include each specific input and output. Include each web service being used – or remove if no web service is being used.

3. Add text boxes to the diagram to briefly explain the key functions and interactions of the parts of the system. The goal is that anyone should be able to use the diagram to understand how to build the smart device and how the device will work.

Your team will evaluate its set of solution ideas to select the most promising idea(s). This step is "Getting the Right Design" to solve your targeted problem.

Then your team will refine the selected idea(s) to improve the solution and make it more clear and complete. This step is "Getting the Design Right" by making your solution as good as possible.

Your team should evaluate its solution ideas by using the design criteria listed in the project challenge:

• Useful: Would this help solve the problem?

• Usable: Would this solution be easy for people to understand and use?

• Feasible: Would it be possible for your team to make a prototype of this solution?

• Innovative: Is this different from existing solutions?

If your solution idea for the smart device would require a special part that is not in your Photon kit, then determine whether it is possible to order the part – or to simulate the part. (For example, your smart thermostat prototype used a red LED and blue LED to simulate a heating and cooling system.)

If necessary, your team can browse or search the SparkFun website to see if the part is available to order and reasonable in cost. If browsing by category, check under Components or Sensors. Your team will be responsible for finding out how to connect and program the part.

Your team should use these criteria (as well as your team's design requirements) in order to select the most promising idea(s) for a smart device and web app that could work together to solve your problem.

It might be the case that your team doesn't have a complete solution yet. For example, your team might have a great idea for the smart device, but your current ideas for the web app don't match this device. If that's the case, it's okay – your team will think of new ideas for the web app when refining your solution.

Your team will refine your selected solution by generating additional ideas to show details of the smart device and web app. You could also show alternate versions or variations of the smart device and web app – such as different ways to build the device or different ways that the app could look or work. You will record these ideas using simple sketches and descriptions.

EXAMPLE

Here are several refined sketches for a smart lock solution. Each sketch shows a detail of the smart device or the web app.

In the next set of assignments that will follow, your team will create several project deliverables to provide even more details of your solution design:

• System Model showing how the parts of your smart device system work together

• Wireflow showing a sequence of screens for interacting with your web app

• Storyboard showing a person's experience using your solution in a real context

YOUR TASK

1. Your team should review its set of solution ideas to identify the most promising idea(s) for a smart device and web app that could work together to solve your problem. Your team should select its best idea (even if it is only a partial solution). You can select multiple ideas if you can combine them into one solution.

2. Your team should refine its selected solution by creating 8-10 sketches to show details (and/or variations) of the solution. Be sure to include sketches for both the smart device and the web app.

3. Your team should show and explain your refined solution sketches to another design team to gather feedback. Use the feedback to clarify and improve your team's solution.

Before building your solution, your team will give a formal presentation explaining your targeted problem and your proposed solution. This will be an opportunity for other project teams to provide constructive feedback through a design critique.

Your team's presentation should briefly explain and show:

1. Problem Being Solved: describe the problem, its impact, and its cause

2. Personas for Stakeholders: mention how many people were interviewed, and highlight some of the key characteristics of both personas (if necessary, clarify key differences between the two personas)

3. Journey Map of Current User Experience: introduce the persona and scenario, and briefly explain the current user experience (by highlighting problems in the current experience)

4. Value Proposition of Solution: be sure it is clear what value your solution will provide to people

5. Design Requirements for Solution: highlight some of the key requirements, and briefly explain how these are related to your user research findings

6. Refined Sketches of Solution: highlight some of the ideas shown in the sketches

7. System Model of Solution: briefly explain how the parts of the system work together

8. Wireflow for Web App: introduce the task, and briefly explain how the user interacts with the app

9. Storyboard of Future User Experience with Solution: briefly explain the story shown

10. Evaluation of Solution Design: mention how many evaluators were involved, and briefly summarize the evaluation findings (positive and negative)

YOUR TASK

• Prepare and practice your team's presentation. The presentation should have 10-15 slides and take about 8-10 minutes to deliver. Each team member should participate equally in the verbal presentation. Be sure to include a title slide identifying each of the team members. Be sure your presentation is clear and engaging.

• After your team's presentation, the other project teams will ask questions and provide constructive feedback through a design critique (about 2-4 minutes). Be prepared to respond to questions and to record notes on the audience feedback.

A storyboard is a series of pictures – similar to a comic strip – that illustrate a brief story of a person using a product or solution to complete a task in a real context. A storyboard is helpful for showing the future user experience of a solution that you've designed.

EXAMPLE

Here is a storyboard of a person walking by a bulletin board in a hallway, who pauses to use his phone's camera to scan a code on an announcement, in order to download the information to the phone.

As you can see, a storyboard can use simple drawings and still be very effective at showing what happens. Each panel also includes a brief description to help clarify what is being shown.

Your team will create a 6-panel storyboard to tell a brief story of what happens before, during, and after a person uses your solution (the smart device, the web app, or both) to complete a specific task:

• BEFORE = 2 panels for problem (show setting of story and what task the person needs to complete)

• DURING = 3 panels for solution (show the person using your solution to complete the task)

• AFTER = 1 for panel for benefit (show how the person feels after using solution)

The task that you select for this storyboard should be core to the purpose and experience of using your smart device system. Therefore, do NOT select a mundane task such as: creating an account, logging into the app, etc.

TYPES OF CAMERA SHOTS

A storyboard can be more effective if the panels use different camera shots depending on what each panel is trying to communicate, similar to how movies use different camera shots to help tell a story. Some common types of camera shots that are useful in product storyboards are shown below.

NOTE: Your storyboard won’t necessarily use all these camera shots, and your storyboard won’t necessarily use them in this exact order. Select and order your camera shots to tell your story in the most effective way possible.

• Wide shots and long shots are useful for showing when and where the story takes place and who is involved. They are often used for the first panel of a storyboard.

• Medium shots are useful for showing the person’s emotion. They are often used to show a person’s reaction to a problem and/or their reaction to using the product.

• Over shoulder shots, point of view shots, and close-up shots are useful for showing what the person is doing and seeing as they use the product to complete the task.

YOUR TASK

1. Use this planning document to help develop the storyline for your 6-panel storyboard.

2. Print and use this storyboard template to sketch your storyboard panels. Be sure to include a brief description for each panel to help explain what it shows.

Project teams need to track their progress on tasks – as well as any issues that arise – in order to complete their projects on time. This is why a detailed task schedule is such an important tool for managing a project.

This next phase of the project requires your team to develop its solution based on your team's design. There are six major components to complete during this development phase:

• Build smart device from parts

• Create Photon app for smart device

• Create web app to interact with smart device

• Conduct integration testing of solution

• Create video demonstrating use of solution

• Create product marketing website

Over the next several weeks, your team should be working on multiple components in parallel (i.e., at the same time). Each team member should be assigned to work on one or more components.

Here are progress checkpoints that will help keep your team on track. These checkpoints do not necessarily represent equal amounts of time. For example, it may take less time to complete Checkpoint 1 but more time to complete Checkpoint 3.

IMPORTANT: Each team member should be contributing at all times throughout the development phase. If a team member completes their current task, he or she should either continue on to the next task for that component or help complete a task for a different component.

NOTE: Keep in mind that both the Photon app and web app require coding, so your team may need more than one person to work on coding. (The product marketing website can be coded – or it can be built without coding by using a tool such as Google Sites, etc.)

YOUR TASK

1. Your team should review the progress checkpoints, along with any deadlines that have been established by your teacher. Discuss and decide which team members will work on the various project components.

2. Over the next several weeks, track your team's task progress by updating the "Task Progress" sheet in this spreadsheet.

   • List the name of the team member(s) assigned to each task.

   • When a task is started, enter the start date (MM/DD).

   • When the task is completed, enter the completion date.

   • There is an optional column for due date, which your team can use for its own deadlines or any deadlines established by your teacher.

3. During this time, also track any significant issues that your team is unable to resolve, in order to follow up and get help as needed. Record these in the "Issues Log" sheet of the spreadsheet.

   • Describe the issue. Be sure to include specific details that may help figure out the cause of the issue. (For example: What happens or doesn’t happen? What have you checked or tried? What information do you need?)

   • Use the drop-down menu to select the component affected by the issue (such as: smart device, Photon app, web app, etc.).

   • List the name of the team member(s) assigned to follow up and resolve the issue.

   • When the issue is added to the log, enter the date.

   • When the issue is resolved, enter the date.

Your team needs to create a Photon app that will run on your smart device to perform the functions envisioned in your team’s solution design.

You will need to use online references (such as: References for Wiring & Coding, Photon Experiment Guide, Wiring Framework Reference, etc.) to figure out how to program a Photon app that will read data from your device’s inputs, analyze the data to make decisions, send commands to your device’s outputs, and interact with your device’s web app by sharing data through the Internet (via Particle Cloud).

The Photon app will be created in the Particle Build online code editor using the Wiring programming language. You will need to plan out your Photon app, and then program it in stages, testing and revising the code as you go.

YOUR TASK

1. Plan out Photon app

   1. Use your team’s system model to identify all the inputs and outputs connected to your smart device, the function of each part, and the interactions between parts of the system.

      • If your team's system model does NOT clearly and correctly describe the functions and interactions of the parts, then revise your system model to be accurate.

   2. Answer these questions to help plan out your Photon app. Don't worry about creating "code" for the answers – answer in plain English.

2. Code Photon app - Part 1 (add libraries, declare global variables, code setup() function, test each part)

   1. CREATE NEW APP: Login to your team's Particle Build account. Create a new app, and give it a title that makes sense. Particle Build will automatically insert a blank setup() function and blank loop() function for your new app.

   2. LIBRARIES: Determine whether any parts (such as: OLED display, servo motor, etc.) need a special code library added to the Photon app. If so, then search for the necessary library in Particle Build, and add the library to your Photon app. Particle Build will insert an #include statement for the library at the very top of your app code.

   3. GLOBAL VARIABLES: Declare (create) global variables near the top of your app (after any library #include statements but before the setup() function). Each variable must have a unique name. You get to decide what the names are, but try to use names that will make sense to someone else reading your code. Remember that variable names cannot have spaces (and cannot be a keyword in the programming language).

      • Create global variables for each part’s I/O pin. This I/O pin number should have been recorded by the person who wired and connected the parts. If necessary, visually verify the I/O pin number used by the part on your Photon device.

      • Create global variables for any object variables that are needed. Parts that needed a special code library usually require an object variable.

      • Create global variables to store any other data (numbers, text, etc.) that your app needs to track or needs to share with your web app.

   4. SETUP( ) FUNCTION: Within the setup() function, add code needed to prepare your device for use. Remember that the setup() function runs only one time when the device is first started (or is reset).

      • Set the pinMode() for each input or output. Be aware that some parts do not need a pinMode() statement.

      • Parts that needed a library (such as: OLED display, etc.) may need certain commands added within the setup() function. For example, the OLED display needs oled.begin(); added within the setup() function.

      • Add any other commands that you want to occur one time when the device is first started. For example, if you are using an LED light, you may want to either turn it on (or turn it off) when the device is first started.

      • Later (in step 3 below), you will add Particle Cloud statements within the setup() function, so your Photon app can send data to your web app and/or receive commands from the web app.

   5. TEST EACH PART: Within the loop() function, add temporary code to test each part, in order to verify the part is wired correctly and working. This "test" code should make the part do something simple that you can observe or verify in some way.

      • OUTPUT examples: turn on LED (or make it blink), have speaker produce a tone, make servo motor rotate, display message on OLED screen, etc.

      • INPUT examples: turn on built-in D7 LED when button is pushed (and turn off when button is released), turn on built-in D7 LED when motion detected (and turn off when no motion detected), display measurement from accelerometer on OLED screen, etc.

      • After adding the "test" code, "flash" (download) the app onto your Photon device to run it. If the part doesn't work properly, then first check your code in the Photon app to make sure it is complete and accurate. For example, does the pin number you listed for the part's global variable match the actual pin that it is wired to? Did you set the correct pinMode() for the part? If necessary, revise the code, and re-flash the Photon app to your device. If you've verified the code is correct but the part is still not working, then check whether the part is wired correctly to the Photon device.

      • Once the parts are tested to work properly, the "test" code can be removed from the loop() function (but do not remove the libraries, global variables, or code in the setup() function) – or the "test" code can be turned into comments by typing two forward slashes at the beginning of each line of "test" code: //

3. Code Photon app - Part 2 (code loop() function, code any custom functions, add Particle Cloud statements)

   1. LOOP( ) FUNCTION: More details coming soon...

   2. CUSTOM FUNCTIONS: More details coming soon...

   3. PARTICLE CLOUD: More details coming soon...

4. Once the smart device, Photon app, and web app have all been completed, conduct integration testing to verify they work together properly.

Your team needs to build its smart device prototype by connecting the necessary inputs and outputs to your Photon board. Your team’s system model should identify each of the parts needed for your device.

You will need to use online references (such as: References for Wiring & Coding, Photon Experiment Guide, etc.) to verify how to correctly wire the parts to the I/O pins and power. (I/O = Input/Output)

Your team will need to test the wiring of each part by adding temporary code in the Photon app to do something simple with each part (such as: turn LED on and off, rotate servo motor back and forth, etc.).

In addition, you may need to construct other non-electronic parts for your team’s smart device prototype. For example, if your smart device locks a door, then your team should build a small-scale model door (using cardboard, etc.) that can be locked and unlocked by your device.

YOUR TASK

1. Connect the necessary parts to build the smart device:

   1. Use your team’s system model to identify and gather all the parts needed for inputs and outputs.

      • If your team's system model does NOT clearly and correctly identify all the specific inputs and outputs needed for your device, then revise your system model to be accurate.

      • If necessary, you can simulate certain parts. For example, the smart thermostat prototype used a red LED and blue LED to represent heating and cooling systems.

      • TIP: If people will interact directly with the device, consider whether you need to add parts to provide visual and/or audio feedback to indicate the device status or a device response. For example, if a user presses a button on the device, how will the user know the device detected this? Devices and apps that don't provide any obvious feedback can be frustrating or confusing to users.

   2. Research the wiring connections for each part, and fill out this wiring table. Here's an example wiring table for a smart security system.

      • How many wires does the part need, and what do the wires connect to? Each part will connect to at least one I/O pin and to GND. Certain parts (such as: LED, etc.) connect to GND using a resistor. Certain parts (such as: OLED display, etc.) connect to additional I/O pins and/or to a power supply pin (3.3V or 5V).

      • Will the part gets its power from its I/O pin, the 3.3V pin, or the 5V pin (V-USB)? Some parts get power directly from their I/O pin, while other parts have separate wires for power. Certain parts (OLED display, etc.) are limited to only 3.3V of power, while other parts (servo motor, etc.) require 5V of power.

      • Does the part need to connect to specific pins? Certain inputs (such as: photocell, etc.) need an analog pin. Certain outputs (such as: servo motor, etc.) need a PWM pin. Certain parts (such as: OLED display, etc.) need to be connected to other specific pins.

   3. Plan out where the parts will placed on the breadboard, so the layout will be easy to understand and use (e.g., if users need to look at device and/or physically interact with device).

   4. Determine whether you need to connect one or more power rails on the breadboard:

      • Use a jumper wire to connect one of the negative power rails on the breadboard to a GND pin on the Photon board. Then connect each part’s GND wire (or resistor) into this negative power rail.

      • If there is one (and only one) part requiring 3.3V, then connect that part directly to the 3.3V pin on the Photon board.

      • If there are multiple parts requiring 3.3V, then use a jumper wire to connect one of the positive power rails on the breadboard to the 3.3V pin on the Photon board. Then connect each part’s 3.3V wire into this positive power rail.

      • If there is one (and only one) part requiring 5V, then connect that part directly to the V-USB pin (5V) on the Photon board.

      • If there are multiple parts requiring 5V, then use a jumper wire to connect one of the positive power rails on the breadboard to the V-USB pin (5V) on the Photon board. (If you already connected one positive power rail to 3.3V, then connect the second positive power rail to V-USB). Then connect each part’s 5V wire into this positive power rail.

      • If there are no parts requiring 3.3V or 5V, then do not connect a positive power rail (because all the parts will receive power from their I/O pins). However, you will still use the negative power rail for the GND wires.

   5. Connect each of the wires (and resistors, if applicable) for each part, and use your wiring table to record which I/O pin each part is connected to. This information will be needed to code the Photon app.

      • NOTE: Several analog pins are duplicated on the Photon board. A2, A3, A4, and A5 are each represented by two pins. If you use one of these pins, you cannot use its duplicate.

      • TIP: You may want to connect one part at a time, and then test the wiring of that part using Photon code (step 2) before connecting the next part.

2. Test the wiring of each part using temporary code in the Photon app. The "test" code for each part should do something simple to verify the part functions correctly.

   • For example, an LED light could be programmed to blink on and off repeatedly, a motion sensor could be programmed to briefly turn on the built-in D7 LED if movement is detected, etc.

   • For inputs that take measurements (such as: photocell, accelerometer, etc.), you will have to do a bit more work to test that the part is working correctly. For example, if you first connect and test the OLED display screen, then you could display a measurement taken with another part. (Later, you could remove the OLED screen if it's not needed as part of your final device.) Another option would be to share the measurement variable with a simple web app that would display the measurement value.

3. Construct any additional parts needed to demonstrate how your team’s smart device prototype works.

   • For example, if your smart device locks a door, then create a small-scale model door (using materials such as cardboard, etc.), so that your device can actually lock or unlock the model door.

4. Once the smart device, Photon app, and web app have all been completed, conduct integration testing to verify they work together properly.

Your team will create a wireflow of your smart device's web app to show how someone would interact with it to complete a task. Wireflows are prototypes that allow you to design, test, and revise a website or app before coding it.

What is a wireflow? It's a combination of wireframes and a flowchart:

• A wireframe is a sketch or mockup of a webpage or app screen (also called the user interface). A wireframe shows how elements are visually arranged in the user interface (such as: navigation menus, icons, text, images, buttons, etc.). Early in the design process, wireframes are simplified outlines of the user interface. Later in the process, more detailed mockups are created.

• A flowchart is a diagram representing the steps in a process or task from start to finish. The flowchart includes steps completed by the user and steps completed by the system (i.e., the app). A flowchart might include decision points where the process or task can follow different paths. Flowcharts are helpful for figuring out how to design and program your app.

• A wireflow is a sequence of user interface mockups (wireframes) showing the steps in a task flow (flowchart) as a user interacts with a website or app.

The easiest way to create a wireflow is by sketching a sequence of wireframes representing a task flow. There are also tools available (such as: InVision, Marvel, NinjaMock, etc.) to create (or import) wireframes and turn them into interactive wireflows (with clickable links, buttons, etc.) that can be tested with users.

EXAMPLE

Here is an example of a wireflow for a task in a smart light web app. This wireflow shows how the user interface changes as the user turns on a set of lights and adjusts the brightness of the lights.

As you can see, a wireflow can use simple screen mockups and still be effective for showing how a user interacts with the app. Each mockup also includes a brief description to help clarify what the user does and what the app does in response.

Your team will create a wireflow with 3-6 screen mockups to show how a person would use your web app to complete a specific task that involves interacting with your smart device.

As you decide what tasks your web app could include, keep in mind there are three main ways that your web app can interact with your smart device through Particle Cloud:

• web app can receive and display data from smart device (by getting Photon variables)

• web app can send data and commands to smart device (by calling Photon functions)

• web app can receive notification alerts from smart device (by streaming Photon events)

The task that you select for this first wireflow should be core to the purpose and experience of using your smart device system. Therefore, do NOT select a mundane task such as: creating an account, logging into the app, etc.

YOUR TASK

1. Use this planning document to help develop the sequence of screen mockups for your wireflow.

2. Print and use a device template to sketch your wireflow. There are templates for a smartphone, tablet (7 inch or 10 inch), or desktop web browser. (You may need multiple copies of your device template to create all the screen mockups.) Be sure to include a brief description for each screen mockup to help explain how the user and the app interact.

Most entrepeneurs or companies create a website to help promote and market new products. Sometimes this is done as a webpage on a crowdfunding website (such as , , etc.). Other times, this is done as a webpage or mini-site on a company website.

Your team will create a one-page product marketing website for your smart device solution, which will include your . This website will be made public to allow more people to learn about your smart device project.

YOUR TASK

1. Create and/or gather the content (text, images, video, etc.) for your team’s product marketing website. Be sure the content is clear, concise, engaging, and professional. Your website should include the following content (but you can determine the best order – and you can add other content if helpful):

   • Product Name

   • Value Proposition (could be shortened even further into a tagline phrase)

   • Functions and Features (what does product allow you to do, what benefits does it provide)

   • Tech Specs (list the inputs, outputs, etc.)

   • Video demonstrating use of solution

   • Image(s) of smart device prototype

   • Screenshots of web app

   • Names of team members and their project roles

2. Create a visual design for your team's one-page website that will be engaging, professional, and reinforce your product concept.

   • Generate and sketch possible ideas for the layout of the content on the webpage.

   • Decide on the overall style for the website (such as: fonts, colors, etc.)

3. • Include temporary placeholders for the product demo video and certain images (smart device, web app screenshots).

Later, your team will conduct an evaluation of the website by testing it with users.

Once your team's smart device, Photon app, and web app have been created, your team needs to conduct integration testing to ensure that all these parts of your system work together properly.

YOUR TASK

Conduct integration testing of your smart device, Photon app, and web app:

• Test all the functions and features of the smart device, Photon app, and web app to verify they are working correctly and interacting with each other correctly.

• Record detailed notes for any issues that occur (something that doesn't work correctly, something that could be improved, something that is missing, etc.).

• Troubleshoot the cause of each issue, implement a fix, and re-test until any significant issues are resolved. Don't worry about trying to make your solution absolutely "perfect" – just identify the most serious issues and fix as many as you can, depending on how much time is available.

Later, your team will conduct an evaluation of your solution by testing it with stakeholders.

Once integration testing is completed, your team needs to evaluate your smart device and web app by testing it with stakeholders to gather feedback on what is working well and what could be improved.

The evaluation will focus on testing the functionality, usability, and user experience of your solution. This evaluation can provide evidence of how well your solution meets your .

YOUR TASK

1. Identify one or more tasks that people could complete using your smart device and web app. Create a brief scenario describing a realistic context in which someone would need to complete the task(s).

   • For example, a scenario and task might be something like: "Imagine you are a student that needs to get something from your locker before your next class starts. Open up your smart locker, and then lock it again when you're done."

2. Recruit 3-5 participants that match one of your target stakeholder groups, as represented by your . Each participant will individually evaluate your team’s solution. Each evaluation will take about 5-10 minutes.

3. At the start of each evaluation, briefly introduce your solution to the participant using your team's . Be sure to mention that:

   • the product is being tested, not the participant

   • the product consists of a smart device and a web app that work together

   • the product is an early prototype, so you want constructive feedback on what’s working well and what could be improved

4. Describe the scenario to the participant, and identify the task that he or she should complete using the device and web app. (If you have multiple tasks to test, give the participant one task at a time.) Tell the participant to provide feedback by “” as he or she interacts with the device and web app.

   • Since the device is an early prototype (which may be very unfamiliar), it may be necessary at times to provide limited help if the participant doesn't understand what to do next.

   • However, as much as possible, let the participant figure out how to interact with the device.

5. As the participant completes the task(s), record notes on the feedback being provided.

6. At the end, have the participant complete this .

Repeat Steps 3-6 with each participant.

Your team needs to create a web app (for a phone, tablet, or desktop) that will interact with your smart device to perform the functions envisioned in your team’s solution design.

You will need to use online references (such as: , , etc.) to figure out how to code a web app that will get data from your smart device through the Internet (via ), use the data to dynamically update the web app, and send data and commands to your smart device through the Internet.

The web app will be created in a code editor using HTML, CSS, and JavaScript. You will need to plan out your web app, and then program it in stages, testing and revising the code as you go.

YOUR TASK

1. Plan out web app

   1. • If your team's system model and wireflow do NOT clearly and correctly describe and show the web app, then revise them to be accurate.

      • If necessary, create additional screen mockups in order to have a wireflow for the entire web app. (You can do this either before or after completing the plan for your web app.)
2. Code web app - Part 1 (HTML, CSS) - More details coming soon...

3. Code web app - Part 2 (JavaScript: variables, functions, Particle Cloud) - More details coming soon...

Once your product marketing website is completed, your team needs to evaluate the website by testing it with users to get feedback on what is working well and what could be improved.

The evaluation will focus on testing the functionality, usability, and user experience of your website. This evaluation can provide evidence of how effective your website is at marketing your product.

YOUR TASK

1. Recruit 3-5 participants that match one of your team’s target stakeholder groups, as represented by your team's . (Avoid using participants that evaluated the smart device and web app, since they will already be familiar with your product.) Each participant will individually test and evaluate your team's product website. Each evaluation will take about 5-10 minutes.

2. At the start of each evaluation, briefly explain that your team wants to get feedback on a website for a new product. Be sure to mention that:

   • the website is being tested, not the participant

   • the website is the focus of the evaluation, rather than the product

   • the website is a work in progress, so you want constructive feedback on what’s working well and what could be improved

3. Tell the participant to provide feedback by “” as they interact with the website. Tell the participant to use the website to learn about the product by finding answers to these questions:

   • What does the product do?

   • Who would use the product?

   • What benefit or value does the product provide?

4. As the participant uses the website, record notes on the feedback being provided.

5. At the end, have the participant complete this .

Repeat Steps 2-5 with each participant.

Reflecting back to think about what you've experienced is an important part of learning and improving. Reflection is useful throughout an experience, but it is especially helpful at the end because you have the benefit of reflecting on the entire experience from start to finish.

YOUR TASK

Write brief personal responses to the prompts in this project reflection document.

Your team will participate in a public poster presentation to demonstrate and explain your project to an audience.

The people attending the presentation will walk around to each team to learn about the projects, spending a few minutes with each team. You will most likely have to present multiple times to different small groups of people.

YOUR TASK

• Prepare and practice a basic 2-3 minute presentation that describes the problem your team targeted and demonstrates the solution you developed. Then if the audience seems interested in learning more, you can explain in more detail how you researched, designed, developed, and evaluated your project.

• Each team member should be prepared to help present as needed.

• On the day of the event, be sure you have your project poster, smart device prototype, and a laptop or mobile device to demonstrate your web app. You may also want to have your product marketing website available for viewing on a laptop or tablet.

• During the presentation, be friendly, confident, and engaging. When demonstrating your smart device product, give the audience members an opportunity to interact with it, so they can directly experience using your solution.

• Be prepared to respond to questions from the audience members.

• Treat every audience member as a potential judge (because some of them may be judges).

Once your smart device, web app, and product marketing website have been evaluated, your team needs to determine what is working well and what could be improved. Then your team will implement improvements, as feasible.

YOUR TASK

• For your smart device and web app, review the evaluation notes and survey responses from all the participants. Use this document to summarize the most positive features of your smart device and web app, as well as any issues to potentially change or improve.

• For your product marketing website, review the evaluation notes and survey responses from all the participants. Use this document to summarize the most positive features of your product website, as well as any issues to potentially change or improve.

• Determine what changes or improvements are most important to make – as well as most feasible to make – based on how much time is available before the public poster presentation.

• If there are changes to your smart device or web app that are not feasible to make at this time, you can describe those during your public poster presentation and/or in your product marketing website as features coming in the next iteration (version) of the solution.

A video can be a very effective way to introduce and explain a new product to people. Your team will create a product demo video to include in your team's product marketing website.

YOUR TASK

1. Create a script and storyboard for a video that will demonstrate someone using your smart device solution in a realistic scenario. You can modify and extend your team’s original storyboard – or you can start fresh.

   • Outline the storyline for a short video (minimum of 30 seconds, maximum of 2 minutes) that shows what happens before, during, and after a person uses your product:

     • BEFORE = establish setting of story, introduce person, and show what problem or task the person needs to complete

     • DURING = show the person using your product, including some key details of the product

     • AFTER = show the benefit of your product and how the person feels after using product

   • Write out a script that explains who the people are in the story, when and where the events take place, what each person says and does, what needs to be shown, and what needs to be explained (by a narrator or captions).

   • Based on the script, sketch a complete storyboard that includes every scene in the video. Think about which types of camera shots will best communicate the storyline and show the important details.

2. Practice and prepare for the video.

   • Determine when and where to film, especially if showing a particular environment or context is important.

   • Determine what costumes or props may be necessary (if any).

   • Determine who will be the actor(s), who will be the narrator (if applicable), and who will record the video.

   • Use the script and storyboard to practice acting out the scenes and practice capturing the camera shots through different camera movements (tilting, panning, zooming, etc.). It would be ideal to record the video in one continuous take (to avoid or minimize the need for editing).

3. Record and finalize the video.

   • If necessary, record additional takes.

   • If necessary, edit the video (e.g., cut and splice scenes, add captions, add music, etc.).

   • Upload the final video (such as: Google Drive, YouTube, etc.), so it can be embedded into your team’s product marketing website.

Your team needs to create a poster that helps show how your team researched, designed, prototyped, and evaluated your solution to your targeted problem.

The poster will be a visual reference to supplement the explanation and demonstration that your team gives during the public presentation event. The goal is for the poster to be clear, concise, engaging, and professional in terms of its content and visual design.

The standard size for a large poster is 36 inches wide by 24 inches tall. Your teacher will assist with getting the posters professionally printed.

YOUR TASK

1. Gather the content (text and images) for your team’s project poster. Be sure the content is clear, concise, engaging, and professional. Here is a recommended list of content for the poster (and you can add other content if helpful):

   • TEAM

     • Team Name (if applicable)

     • Team Member Names

   • PRODUCT

     • Product Name

     • Value Proposition (or tagline phrase)

     • Functions and Features (optional)

   • RESEARCH

     • Persona for Target User

     • Journey Map of Current User Experience (optional)

     • Design Requirements for Solution (optional)

   • DESIGN

     • Refined Sketches of Solution (optional)

     • System Model of Solution

     • Wireflow of Web App

     • Storyboard of Future UX with Solution (optional)

   • PROTOTYPE

     • Photo of Smart Device

     • Example of Code from Photon App (optional)

     • Screenshot(s) of Web App

     • Example of Code from Web App (optional)

   • EVALUATION

     • Evaluation Findings (optional)

2. Determine the visual design for your team's poster.

   • Generate and sketch possible layouts of the poster content. You can use a regular sheet of paper to sketch a simplified, small-scale mockup.

   • Decide on the overall visual style for the poster (such as: fonts, colors, etc.)

3. Create your final poster using a tool such as Google Drawing.

   • You can use this Google Drawing template which is preset to 36 inches wide by 24 inches tall (zoom in or out as needed to add and edit text, images, etc., but do not change the canvas size).

   • Be sure your poster doesn't have too much text (people may not read it all) or too little text (people may not understand the poster). For example, include some kind of label or description for diagrams, images, etc.

   • Be sure you have strong contrast between the text color and its background color. (If the background color is dark, the text color should be light. If the background color is light, the text color should be dark.)

   • Be sure the font types and font sizes used on the poster will allow people to easily read the text from several feet away. (Fancy fonts may be hard to read. Bold text may be easier to read. Font sizes less than 30 might be too small.)

4. Save or download a copy of your poster as a PDF, and provide the PDF to your teacher for printing.