Case study · Quick WinsDay #3

Nest’s Schedule Has Never Heard Of Its Own Dial

A redesign of the Google Nest scheduling flow that reuses the dial people already know, so setting a week of temperatures feels like setting one.

Try the prototypes

Role
Product designer, self-initiated
Platform
Google Nest app, iOS
Deliverable
Interactive prototype, two directions
Redesigned schedule screen: day buttons, mode and start time controls, and a 24-hour dial with orange and blue temperature dots

The problem

Two taps to change the temperature. A different app to schedule it.

Current Nest thermostat screen with the Cool set to 78 dial
The home screen dial: one number, one ring, two chevrons. Familiar and fast.

As a Nest user, I can change the temperature in seconds. But tapping Schedule turns the phone sideways into a blank grid that works nothing like the dial.

Adding a temperature means finding a small text link, dragging a bubble along a crosshair, and repeating the whole thing in a separate schedule for heating.

Current Cool schedule week grid in landscape with two blue temperature bubbles
The week view. Heat and Cool each have their own separate schedule.
Current day view with a temperature bubble being dragged on a gray crosshair, and Add and Remove text links in the corner
Placing a temperature: drag the bubble on a crosshair. “Add” and “Remove” sit in the bottom corner as text links.
It forces landscape

The rest of the app is portrait. Scheduling is the only place the phone has to turn.

Small touch targets

“Add” and “Remove” are text links well under the 44 × 44 px minimum, in the corner farthest from a thumb.

Heat and Cool are split

Two separate schedules, with no way to set a heat-and-cool range for part of the day.

No familiar interaction

Dragging bubbles on a crosshair shares nothing with the dial people use every day.


Goals

Make the schedule feel like the thermostat

Dial

Reuse the ring, chevrons, and big number from the home screen.

44 px

Every control meets the minimum touch target, most go well past it.

Any way

Works held upright or turned sideways. The layout adapts instead of forcing a turn.

Nest look

Nest’s slate background, orange for heat and blue for cool.


Direction A

The dial becomes a 24-hour clock

Editing the 8:30 AM Heat and Cool temperature, set to 64 and 82, with Cancel and Update temperature buttons

The ring maps the day from midnight at the bottom left, through noon at the top, to midnight at the bottom right. Each scheduled temperature is a dot you can tap, drag, or place by tapping anywhere on the ring.

The chevrons at the bottom work exactly like they do on the home screen. Mode and start time sit in one row above the dial, away from the ring so older users can hit them without touching the dial by accident.

Each temperature keeps its own mode, so a day can mix Heat in the morning, a Heat • Cool range during the day, and Cool at night.

Heat Cool Heat • Cool
Default view with Add temperature button
Add. Pick a day, a mode, and a start time, then Add temperature.
Editing an existing temperature with Update and Cancel
Edit. Tapping a scheduled temperature switches the button to Update, with Cancel.
Mode sheet listing Heat, Cool, and Heat and Cool
Mode. The same bottom sheet Nest already uses for Heat, Cool, and Heat • Cool.
Empty schedule with three steps: choose a day, choose a mode, choose a time
Empty. A first-time schedule starts with three steps, and any control gets you going.

Direction B

The dial sets temperature. Time becomes a timeline.

Option B with a temperature dial from 50 to 90 degrees and a scrollable day timeline
The dial runs 50° to 90°, like the home screen. Heat fills up to its target in orange, cool fills down in blue.
Option B with a timeline block selected inside a white trim frame with handles
Tap a block on the timeline and drag its handles to change when it starts and ends.

The second direction keeps the dial for what people already use it for: temperature. The day moves into a scrollable timeline, one hour per 60 px, so each 15-minute step is a real distance for a finger.

Selecting a block puts a trim frame around it, borrowed from how people cut a video on their phone. Handles stop before they run into a neighbor, and they respond to arrow keys for anyone not using touch.


Orientation

Upright or sideways

The old schedule only worked sideways. The redesign works either way: turn the phone and the dial stays pinned on the left while the day, mode, time, and list move to the right. Sheets and dialogs center on screen so they never stretch edge to edge.

Direction A in landscape: the 24-hour dial on the left, day buttons, mode, start time, and Add temperature on the right
Direction A sideways. The list scrolls on the right while the dial stays in view.
Direction B in landscape: temperature dial on the left, timeline with a selected block and Update temperature on the right
Direction B sideways. The timeline moves up beside the dial.

Prototype

Try it

These are the working prototypes, upright and sideways. Tap a day, drag a dot around the dial, open the mode menu, swipe a row left, or scroll Option B’s timeline.

Direction A · 24-hour dial
Open full size
First-time user · empty schedule
Open full size
Direction B · timeline + temperature dial
Open full size
Direction A · landscape
Open full size
Direction B · landscape
Open full size
First-time user · landscape
Open full size

Process

How the design changed

I built the prototype and then worked through it screen by screen. These are the changes that mattered most, in the order I made them.

  1. 1Add became the primary action

    The first version had Add, Remove, and Copy in a bottom bar. Add moved to a full-width button under the dial; Copy and Remove moved to a swipe on each row, with a ⋯ button for anyone who can’t swipe.

  2. 2Selected vs. scheduled dots

    The dot being edited became larger and filled, with a glow. Scheduled dots became small rings, so the two never look alike.

  3. 3Tried full-screen mode color, then reverted

    A full orange background matched Nest’s heating screen, but white small text on that orange measured about 3.1:1, below the 4.5:1 standard. The slate background came back and color moved to the dial.

  4. 4One button color

    A half-orange, half-blue button for Heat • Cool was hard to read. Every call to action now uses one blue, and orange and blue only ever mean heat and cool.

  5. 5Modes per temperature

    Switching modes used to swap the whole schedule. Now each temperature keeps its own mode, and switching only changes the one being edited.

  6. 6Time controls off the dial

    Arrows inside the ring were too close to it for older users. They moved to a Starts At control, with a dropdown of every time and any time allowed.

  7. 7Add vs. Update

    Tapping a scheduled temperature now switches the button to Update, with Cancel. Leaving with unsaved changes asks first: Save, Discard, or Keep editing.

  8. 8“Setpoint” became “temperature”

    Setpoint is an HVAC term. Temperature is what people picture: “68 at 6 AM.”


Accessibility

Built for thumbs, screen readers, and older eyes

Every control is at least 44 × 44 px. Day buttons are 52 px tall and the main button is 56 px.
Every gesture has a button alternative: arrows and a time list for the dial, a ⋯ menu for swipe actions.
Dots, blocks, and handles have spoken labels, like “Start of block: 6:00 AM.”
Mode never relies on color alone: every row and control also names it in text.
3.1 : 1

Nest’s heating orange behind white body text measures about 3.1:1. That’s fine for the big temperature number, but below the 4.5:1 AA minimum for small text, which is why the redesign keeps the slate background.


Next steps

What I would test next