Thermostat Wireframe: Iteration 4
ISDE 102: Chelsea Hostetter
Chelsea Hostetter - Page 1
Adjust the temperature from 70 degrees to 73 degrees
currently
70
FAN OFF
71
F
SCHEDULE
FAN OFF
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 (without heat or
cool) is shown in gray.
FAN OFF
F
SCHEDULE
Chelsea Hostetter - Page 2
Adjust the temperature from 70 degrees to 73 degrees
I noticed that you’re cold. Would you like me
to turn the heat on?
YES
NO
73
FAN OFF
Great, I’ll turn the heat on.
73
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. Because they have significantly
adjusted the temperature, they also
receive a popup asking them if they would
like to turn the heat on.
FAN OFF
HEAT ON
73
F
SCHEDULE
When the user presses “Yes,” the heat is
turned on, and displays a feedback
message as well as an icon on the main
screen to indicate that the heat is turned
on. Pressing this icon will turn the heat off.
FAN OFF
HEAT ON
F
SCHEDULE
The notification automatically slides up
after 3 seconds, revealing the main
screen.
Chelsea Hostetter - Page 3
Toggle the Fan On/Off
currently
73
FAN OFF
currently
73
F
SCHEDULE
FAN ON
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
73
74
F
FAN ON
SCHEDULE
FAN ON
75
F
SCHEDULE
Goal: Turn the Heat On
Goal: Turn the Heat On
Just like adjusting the temperature, if the
user wishes to turn the heat on, they must
adjust the temperature at least three
degrees hotter.
When the user starts to adjust the
temperature, the temperature turns black
to indicate that the system is setting to 74
instead of indicating the current
temperature.
The current temperature is in gray.
FAN ON
F
SCHEDULE
Chelsea Hostetter - Page 5
Turn the Heat On/Off
I noticed that you’re cold. Would you like me
to turn the heat on?
YES
NO
76
FAN ON
Great, I’ll turn the heat on.
76
F
SCHEDULE
Goal: Turn the Heat On
When the user adjusts the temperature,
after 3 degrees a dialog box will pop up
asking the user if they want to turn the
heat on.
FAN ON
HEAT ON
76
F
SCHEDULE
When the user presses “Yes,” the heat is
turned on, and displays a feedback
message as well as an icon on the main
screen to indicate that the heat is turned
on. Pressing this icon will turn the heat off.
FAN ON
HEAT ON
F
SCHEDULE
The notification automatically slides up
after 3 seconds, revealing the main
screen.
Chelsea Hostetter - Page 6
Turn the Heat On/Off
currently
76
FAN ON
HEAT ON
76
F
SCHEDULE
FAN ON
73
F
SCHEDULE
Goal: Turn the Heat Off
Goal: Turn the Heat Off
To toggle the heat off, the user simply taps
on the flame icon.
The heat is turned off. The flame icon
disappears. If the system has not yet
acheived the 76 degree temperature...
FAN ON
F
SCHEDULE
The temperature will slide back to its
current temperature without the heat.
Chelsea Hostetter - Page 7
Turn the Cool On/Off
currently
73
72
F
FAN ON
SCHEDULE
FAN ON
71
F
SCHEDULE
Goal: Turn the Cool On
Goal: Turn the Cool On
Just like adjusting the temperature, if the
user wishes to turn the cool on, they must
adjust the temperature at least three
degrees cooler.
When the user starts to adjust the
temperature, the temperature turns black
to indicate that the system is setting to 72
instead of indicating the current
temperature.
The current temperature is in gray.
FAN ON
F
SCHEDULE
Chelsea Hostetter - Page 8
Turn the Cool On/Off
I noticed that you’re warm. Would you like
me to turn the cooling on?
YES
NO
70
FAN ON
Great, I’ll turn the cooling on.
70
F
SCHEDULE
Goal: Turn the Cool On
When the user adjusts the temperature,
after 3 degrees a dialog box will pop up
asking the user if they want to turn the
cooling on.
FAN ON
COOL ON
70
F
SCHEDULE
When the user presses “Yes,” the cooling
is turned on, and displays a feedback
message as well as an icon on the main
screen to indicate that the cool is turned
on. Pressing this icon will turn the cool off.
FAN ON
COOL ON
F
SCHEDULE
The notification automatically slides up
after 3 seconds, revealing the main
screen.
Chelsea Hostetter - Page 9
Turn the Cool On/Off
currently
70
FAN ON
COOL ON
70
F
SCHEDULE
FAN ON
73
F
SCHEDULE
Goal: Turn the Cool Off
Goal: Turn the Cool Off
To toggle the cool off, the user simply taps
on the snowflake icon.
The cool is turned off. The snowflake icon
disappears. If the system has not yet
acheived the 70 degree temperature...
FAN ON
F
SCHEDULE
The temperature will slide back to its
current temperature without the cool.
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
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
11:15 AM
DAILY SCHEDULE
70 70 70 65
F
F
F
F
BACK
BACK
10 AM
1 PM
6 PM
10 AM
11:30 AM
1 PM
F
70 70 71 65
70
AT
11 15
AM
Goal: Adding a schedule at 11:30 AM for 72
degrees
The time is adjusted by 15 minute
increments.
F
F
F
BACK
6 PM
10 AM
11:30 AM
1 PM
F
70
70
F
AT
11 30
AM
F
6 PM
CANCEL
CANCEL
F
SCHEDULE
CANCEL
71
F
AT
11 30
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
SCHEDULE
11:30 AM
1 PM
F
70 70
F
F
BACK
6 PM
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
72
F
AT
11 30
CANCEL
Schedule created
successfully.
AM
F
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.
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.