News and blog posts from our students and faculty

Thermostat Version 3: Third Time is the Charm

Wednesday, December 4th, 2013 | Posted by James Lewis

This is the latest installment of posts about the iterative design and user testing process I’ve used for designing a thermostat user interface (UI). You may read my previous post here.

I have gone through major design changes throughout the process of designing my thermostat UI, and I think I’ve come to something I really like. My first version was too basic. The second version was much improved upon, but it revealed some issues in testing and I felt it was too influenced by the Apple iOS system interface.

One issue the last round of testing revealed was that the home screen where a user changes the temperature and the scheduling screen where a user can set the temperature at a specific date and time, looked way too similar.

While it was my intention to keep them similar – I wanted to keep a consistent look and feel so the user wouldn’t be confused – my plan backfired. During user testing a user got to the future temperature screen (as seen on the right in the image above) and thought they had returned to the home screen. They commented: “It says done.. but i didn’t make the temperature change — I’m getting frustrated cause I don’t know what I’ve done .. as the temperature didn’t change.”

Scheduling seems to have proved the most difficult out of all the features for both myself and many of my classmates. It’s no wonder – scheduling has many functions which have to be set, while other tasks like manually changing the temperature or switching from heating to cooling are much simpler.

I also wanted to come up with a consistent action or motion that could be applied throughout my thermostat interface. While sketching I came up with a different UI that I really liked. Actions, like changing the temperature or navigating between different functions were completed by swiping right or left. The main home screen, where a user manually manipulates the temperature is below.

 You may view the full annotated wireframes here.

Creating the scheduling function was more complicated. I was inspired by a dial on the radio, tuning into your selection. But rather than turning, the motion was swiping. You align up your day and time, and then click on a stationary “+” symbol to add a new scheduling point. Once you click the check box, you can copy that scheduling point and set it to multiple days – which was something I did in previous versions of my thermostat. An animated hero flow – the ideal flow a user would take – of the scheduling function is in an animated gif below.

Because I started from scratch, I didn’t have a chance to test this version. However, I put a lot of work into this and made some significant strides. You’ll hear all about testing next week!

No Comments »