Thermostat Wireframe: Iteration 5
ISDE 102: Chelsea Hostetter
Chelsea Hostetter - Page 1
Adjust the temperature from 70 degrees to 73 degrees
currently
70
FAN
HEAT
COOL
71
F
SCHEDULE
FAN
HEAT
COOL
72
F
SCHEDULE
Goal: Adjust the temperature from 70
degrees to 73 degrees.
Goal: Adjust the temperature from 70
degrees to 73 degrees.
To adjust the temperature, the user adjusts
the temperature by one degree by tapping
the red up arrow on the touch screen
interface.
Once the user adjusts the current
temperature up or down, the color will
change from gray to black, indicating to the
user what they are setting the temperature.
The current temperature is shown in gray.
FAN
HEAT
COOL
F
SCHEDULE
Chelsea Hostetter - Page 2
Adjust the temperature from 70 degrees to 73 degrees
73
FAN
HEAT
COOL
F
SCHEDULE
Goal: Adjust the temperature from 70
degrees to 73 degrees.
After tapping the red up arrow three times,
the user acheives the goal of adjusting the
temperature from 70 degrees to 73
degrees. The temperature will stay black
until the temperature is acheived, and then
it will turn gray.
Chelsea Hostetter - Page 3
Toggle the Fan On/Off
currently
currently
73
FAN
HEAT
COOL
73
F
SCHEDULE
FAN
HEAT
COOL
F
SCHEDULE
Goal: Turn on the Fan
Goal: Turn on the Fan
To turn the fan on, the user taps the fan
icon.
After the user taps the fan icon, the fan
will display feedback that the fan is on. If
the user wants to toggle the fan off, they
tap the fan icon again.
The main screen is set to the current
temprature (in gray).
Chelsea Hostetter - Page 4
Turn the Heat On/Off
currently
currently
73
FAN
HEAT
COOL
73
F
SCHEDULE
FAN
H OFF C
72
F
SCHEDULE
Goal: Turn the Heat On
Goal: Turn the Heat On
To turn the heat on, users simply tap the
heat icon on the bottom of the screen.
When the user taps the heat button, the
icon changes to indicate that the heat is
on (by changing color).
Also, the “off” button slides in from the
bottom, allowing the user to turn the
system off.
FAN
H OFF C
F
SCHEDULE
The system will not allow the user turn the
heat AND the cool on at the same time—it
will only allow one or the other to prevent
the thermostat from confusing the system.
Additionally, if the user adjusts the
temperature down three degrees...
Chelsea Hostetter - Page 5
Turn the Heat On/Off
I noticed that you’re warm. Would you like
me to switch from heat to cool?
YES
NO
71
FAN
H OFF C
70
F
SCHEDULE
FAN
H OFF C
Great, I’ll turn the cooling on.
70
F
SCHEDULE
...the user gets a prompt to turn the
cooling on if they are too warm. If they
select yes, the system will switch from
heat to cool.
FAN
H OFF C
F
SCHEDULE
Chelsea Hostetter - Page 6
Turn the Cool On/Off
currently
currently
73
FAN
HEAT
COOL
73
F
SCHEDULE
FAN
H OFF C
74
F
SCHEDULE
Goal: Turn the Cool On
Goal: Turn the Cool On
To turn the cool on, users simply tap the
cool icon on the bottom of the screen.
When the user taps the cool button, the
icon changes to indicate that the cool is
on (by changing color).
Also, the “off” button slides in from the
bottom, allowing the user to turn the
system off.
FAN
F
H OFF C
SCHEDULE
The system will not allow the user turn the
heat AND the cool on at the same time—it
will only allow one or the other to prevent
the thermostat from confusing the system.
Additionally, if the user adjusts the
temperature up three degrees...
Chelsea Hostetter - Page 7
Turn the Cool On/Off
I noticed that you’re cool. Would you like to
switch from cool to heat?
YES
NO
75
FAN
H OFF C
76
F
SCHEDULE
FAN
H OFF C
Great, I’ll turn the heat on.
76
F
SCHEDULE
...the user gets a prompt to turn the
heating on if they are too cool. If they
select yes, the system will switch from
cool to heat.
FAN
H OFF C
F
SCHEDULE
Chelsea Hostetter - Page 8
Edge Case: Turning on the Cooling in Cold Weather
Cooling now may break your A/C unit. If you’re
warm, I can turn off the heat and
turn on the fan.
currently
76
FAN
H OFF C
YES
76
F
SCHEDULE
If the user would like to turn the cooling
on in cold weather (which would break the
system), the system has access to the
month and region of the thermostat via
access to the internet.
The green wireless signal indicates the
thermostat is connected to the internet.
If a user should try to turn the cool on
during typically cold months...
FAN
H OFF C
Great, I’ll turn the heat off and turn the fan
on.
NO
76
F
SCHEDULE
...the user gets a prompt to turn the
heating on if they are too cool. If they
select yes, the system will switch from
cool to heat.
FAN
HEAT
COOL
F
SCHEDULE
Chelsea Hostetter - Page 9
Setting up the Internet
Hey, you haven’t set up the wireless yet!
Tap here to set it up.
Searching for Wireless
Networks....
70
F
2WIRE111
hellointernet
2WIRE145
2WIRE231
CANCEL
CANCEL
What’s the password for
your wireless?
F
Don’t see your network? Tap here to enter it.
70
Setting up hellointernet...
BACK
70
Internet Setup
Internet Setup
F
delete
done
FAN
HEAT
COOL
SCHEDULE
Goal: Setting up the Internet
Goal: Setting up the Internet
Goal: Setting up the Internet
When the system detects that it is not
connected to the internet, a dialogue
box will pop up to ask the user to set up
the internet.
The thermostat searches for wireless
networks, and the user chooses from the
available networks. If the network is not
shown, the user can manually enter it
below.
Once the user chooses their network, a
prompt opens for the user to enter the
password, as well as a keyboard. The user
pressed the “Done” key when they are
complete.
The user can tap either on the dialogue
box or the wireless signal.
In this example, the user chooses their
network, hellointernet.
Chelsea Hostetter - Page 10
Setting up the Internet
Internet Setup
Internet Setup
hellointernet has been
set up!
70
70
If you need to access the wireless
settings anytime, just tap the wireless
signal at the top-right hand side of the
screen.
F
OK
FAN
HEAT
Searching for Wireless
Networks....
70
F
COOL
2WIRE111
hellointernet
2WIRE145
2WIRE231
CANCEL
F
Don’t see your network? Tap here to enter it.
SCHEDULE
Goal: Setting up the Internet
Goal: Setting up the Internet
The user gets a completion screen and
further instructions on how to access the
wireless settings.
The wireless network now appears as
green to show the user that it is connected
to the wireless network.
If the user selects the “Cancel” button and
they have not set up the time/date...
Chelsea Hostetter - Page 11
Setting up the Internet
Time and Date
Time and Date
OK
I need at least the current time and
date to provide you with the best
service possible.
70
F
12 12 6 00
AT
PM
Thanks for the time and
date!
70
70
If you need to access the wireless
settings anytime, just tap the wireless
signal at the top-right hand side of the
screen.
F
OK
FAN
A prompt displays for the user to enter
the time and date.
HEAT
COOL
F
SCHEDULE
Once the user sets the time and date, they The wireless will display—but not as green
select the “OK” button to confirm.
if the network has not been set up.
However, it will not display the
pop-up dialogue to remind the user of the
wireless settings if it has been connected
with the time/date.
Chelsea Hostetter - Page 10
Turning the Schedule On
BACK
BACK
SCHEDULE
SCHEDULE
70
FAN ON
COOL ON
DAILY SCHEDULE
DAILY SCHEDULE
OFF
F
70
10AM
F
11AM 12PM
65
1PM
OFF
ON
F
2PM
5PM
70
6PM
F
7P
70
10AM
F
11AM 12PM
65
1PM
ON
F
2PM
5PM
70
6PM
F
7P
SCHEDULE
Goal: Open the Schedule
Goal: Open the Schedule
If the user wishes to open the schedule,
they locate the “Schedule” button on the
lower right hand side of the screen and
tap it.
The schedule menu slides up and reveals
the “Daily Schedule.” There is a toggle to
switch the schedule on and off and a
“Back” button to take the user back to the
main menu. The user flips the toggle to turn
on the schedule.
With the goal acheived, the user can press
the “Back” button to see the main menu.
Chelsea Hostetter - Page 11
Turning the Schedule On
70
FAN ON
COOL ON
F
SCHEDULE
RUNNING
On the main screen, the schedule button
has changed colors and is now
indicating that a schedule is currently
running.
Chelsea Hostetter - Page 12
Schedule: Adding a Schedule at 11:30 AM
BACK
BACK
SCHEDULE
SCHEDULE
70
FAN ON
COOL ON
DAILY SCHEDULE
DAILY SCHEDULE
OFF
F
70 70 65
ON
F
F
BACK
70
10AM
F
11AM 12PM
65
1PM
F
2PM
5PM
70
6PM
10 AM
11 AM
1 PM
F
70
F
6 PM
F
OK
CANCEL
7P
70
SCHEDULE
RUNNING
F
AT
11 00
AM
Goal: Adding a schedule at 11:30 AM for 72 Goal: Adding a schedule at 11:30 AM for 72 Goal: Adding a schedule at 11:30 AM for 72
degrees
degrees
degrees
The user taps on the schedule to access
the schedule menu.
The user taps on 11AM to set the schedule
to 11:30 AM (they can also tap any time on
the schedule line and adjust the time to
11:30 AM.
A submenu appears underneath the
bubble with a default temperature of 70
degrees. The rest of the bubbles are
grayed out as they are currently inactive.
The user then can adjust the temp/time
with the arrows.
Chelsea Hostetter - Page 13
Schedule: Adding a Schedule at 11:30 AM
BACK
BACK
BACK
SCHEDULE
SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
70 70 65
F
F
F
11:15 AM
70 70 70 65
1 PM
70
AT
F
F
6 PM
OK
F
DAILY SCHEDULE
F
BACK
BACK
10 AM
SCHEDULE
11 15
11:30 AM
1 PM
AM
70 70 71 65
70
F
AT
F
F
F
BACK
6 PM
OK
CANCEL
Goal: Adding a schedule at 11:30 AM for 72
degrees
The time is adjusted by 15 minute
increments.
10 AM
F
11 30
10 AM
11:30 AM
1 PM
70
71
F
AT
F
6 PM
OK
CANCEL
AM
F
11 30
CANCEL
AM
Chelsea Hostetter - Page 14
Schedule: Adding a Schedule at 11:30 AM
BACK
BACK
BACK
SCHEDULE
SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
70 72 65
F
F
BACK
10 AM
11:30 AM
1 PM
F
70 70
F
72
AT
F
BACK
6 PM
OK
F
SCHEDULE
11 30
10AM
72
DAILY SCHEDULE
F
11:30 AM
12PM
65
1PM
7 70 72 65
F
F
F
70
F
BACK
2PM
5PM
6
10 AM
11:30 AM
1 PM
6 PM
CANCEL
OK
Schedule created
successfully.
AM
OK
72
F
AT
11 30
Goal: Adding a schedule at 11:30 AM for 72 If the user wants to cancel schedule
degrees
creation, they tap the cancel button.
After the user waits for three seconds, the
schedule will display a notification that it
has been created successfully.
F
CANCEL
AM
Chelsea Hostetter - Page 15
Schedule: Adding a Schedule at 11:30 AM
BACK
BACK
SCHEDULE
SCHEDULE
DAILY SCHEDULE
70
72
F
BACK
F
11:30 AM
10AM
12PM
65
1PM
F
2PM
5PM
7
6
DAILY SCHEDULE
OFF
70
10AM
F
11AM 12PM
65
1PM
ON
F
2PM
5PM
70
6PM
F
7P
Cancel schedule
creation?
YES
NO
This will bring up a dialog box that
confirms if the user would like to cancel
the schedule.
Once the user confirms, they are brought
back to the main schedule screen.
Chelsea Hostetter - Page 16
Schedule: Deleting a Schedule at 11:30AM
BACK
BACK
BACK
SCHEDULE
SCHEDULE
SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
OFF
70
F
BACK
10AM
72
ON
F
11:30 AM
12PM
70 72 65
F
65
1PM
F
2PM
5PM
7
F
70 70
F
F
11:30 AM
1 PM
6 PM
OK
6
72
F
AT
72
BACK
BACK
10 AM
F
11 30
F
11:30 AM
10AM
12PM
65
1PM
F
2PM
5PM
7
6
DELETE
Delete the
schedule?
AM
YES
NO
Goal: Delete a schedule at 11:30 AM
Goal: Delete a schedule at 11:30 AM
Goal: Delete a schedule at 11:30 AM
When the user wants to delete a schedule,
they tap on the schedule that they would
like to delete.
On the schedule subscreen on the right
hand side, there is a red “Delete” button.
The user taps this button and...
The user receives a dialog box to confirm
that they would like to delete the schedule.
Chelsea Hostetter - Page 17
Schedule: Deleting a Schedule at 11:30AM
BACK
SCHEDULE
DAILY SCHEDULE
OFF
70
10AM
F
11AM 12PM
65
1PM
ON
F
2PM
5PM
70
6PM
F
7P
Once the user confirms, they are brought
back to the main schedule screen.
Chelsea Hostetter - Page 18
Schedule: Adjusting a schedule from 70 to 72 degrees at 6PM
BACK
BACK
BACK
SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
OFF
70
10AM
F
11AM 12PM
65
1PM
ON
F
2PM
5PM
70
SCHEDULE
SCHEDULE
2PM
5PM
70
6PM
F
7PM
10PM
2PM
12AM
5PM
71
6PM
F
7PM
10PM
12AM
F
6PM
OK
When the user wants to edit a schedule,
they tap on the schedule that they would
like to edit. In this case, they tap on the
schedule at 6PM.
DELETE
7P
70
Goal: Editing a schedule from 70 to 72
degrees at 6PM
OK
DELETE
F
AT
6 00
PM
Goal: Editing a schedule
When the user taps on the schedule, this
brings up the edit submenu. When they
want to edit the temperature/time, they
press the up/down arrows to edit. To
change the temperature to 72 degrees,
the user would press the up arrow twice.
71
F
AT
6 00
PM
Chelsea Hostetter - Page 19
Schedule: Adjusting a schedule from 70 to 72 degrees at 6PM
BACK
BACK
BACK
SCHEDULE
SCHEDULE
DAILY SCHEDULE
DAILY SCHEDULE
2PM
5PM
72
6PM
F
7PM
10PM
2PM
12AM
OK
72
F
AT
5PM
72
6PM
SCHEDULE
DAILY SCHEDULE
F
7PM
10PM
12AM
2PM
5PM
72
6PM
F
7PM
10PM
OK
DELETE
6 00
PM
Goal: Editing a schedule
When the user taps on the “OK” button, a
dialog box pops up to inform the user that
the schedule is edited successfully.
12AM
Schedule edited
successfully.
OK
72
F
AT
DELETE
6 00
PM
If the user taps anywhere outside of the
edit submenu, the submenu will close.