“ No flying machine will ever fly from New York to Paris. ”
—Orville Wright
  • Hanneke van der Horst
  • August 9, 2016
 

A labor of love: how we shaped the Toon UI

Quby designs and develops a smart thermostat. At the heart of our product is our user interface, and it is a labour of love: more than a decade of experimenting went into it. Together with a team of specialists, I was lucky enough to help shape the design into what it looks like today: a product that hundreds of thousands of people are using daily. Let’s take a journey into the history of our company.

Our co-founder Joris Jonker with our first product: the Home Control Box

Piecing things together
When I joined, the founders had this idea to create a box that could control everything in your house, a wild concept in 2004. With a soldering iron and a lot of DIY-ing we connected the traditional thermostat to the meter cabinet via one device: The Home Control Box. We envisioned the smart thermostat before it even existed. Even though we were ahead of the curve, our solution at the time wasn’t quite there yet; only installers or true technology enthusiasts could get it to work, as it was tucked away in the meter cabinet. A local webpage was added to configure the setup. The end-user could only control the system via their light switches.

“We envisioned the smart thermostat before it even existed.”
-    Hanneke van der Horst, Head of Design at Quby

The First Home Control Box display

I remember when the first commercial client, we showed them a live demo in a holiday home with a touch screen door monitor – they were truly impressed by our pioneering spirit, but we still had a long way to go before we were ready for the market.

Making the invisible visible
Our first proof-of-concept was a portal for an energy company, which outsmarted the traditional wall mounted thermostat by giving online insight.  It was accessible via interactive voice response, a phone call or directly via the menu. Designed with the web conventions and the pc users in mind (before the smartphone era), it had a tab menu with four temperature settings and you could view your annual energy consumption. Mind you, design thinking didn’t really make its entrance until a couple years later, these were still the “print days”. 

Our online thermostat interface

 

Putting information on a web interface didn’t work as well as we wanted, it needed to be closer to people, in the home, to truly engage and interest them. We went back to the drawing board and designed the first in-home display. Because it was not fixed to a wall, there was a risk that it would end up in a drawer. So we learned two important things: we needed a display that could show enough information and be a permanent and visible fixture in the home.

One of the early remote displays

"Information needed to be closer to people, in the home, to truly engage and interest them."

Now that we had a learning lab, we could continue to develop and gain experience at the same time. We decided to take a leap and create a cost-effective solution intended for the mass market: from the display and the software, even the modules to connect to meters were now going to be developed by us. 
This resulted in the first version of our smart thermostat, which we refer to as the “Quby classic”. This device came with a fresh new interface. Our journey onwards was geared towards creating a better, stable and more user friendly interface.

Thermostat back in the lead role
The defining moment came when we were able to put two thousand actual devices in customer’s homes, giving us a chance for actual field testing with click data and validating our reason for existence by collecting customer feedback. We experimented with making energy insight more fun and simple, with a screen that looked like a car dashboard. Parallel to this pilot, the smart metering discussion just opened up, and utility and metering companies started to realise that there was an important role to play for consumers.  

 

The Powerplayer was an experiment on its own






Display of Quby classic

After years of trying and testing, we we found a partner that wanted to collaborate with us to bring our product to the masses: Eneco, the largest sustainable energy company in the Netherlands. Finally, our expertise from different fields came together in one solution: our background in IoT and technology, our field testing knowledge, our understanding of the energy utility companies, and the experience in designing a user-centered product. The new design for “Toon”, the Eneco branded version of our smart thermostat, balanced out a simple, accessible display with a more detailed level of insight, with gas and energy graphs and features such as a benchmark/comparison with friends and neighbours. It would allow for multiple new features in the future as well, as we had, and still have, big ambitions to expand with Toon (internationally).

"Finally, our expertise in different fields came together in one solution."

Launching Toon
Toon came to the market in 2012 and was an instant hit: by the end of 2013, it had sold more than 50,000 times and by now, hundreds of thousands of users in Europe are connected to it. As Eneco has acquired all shares, the aim is to make Toon even bigger by selling it across Europe to a million people by the end of 2017.


Evolution, not revolution
But the journey of evolving our UI is never completed. The ongoing complexity of designing a truly smart thermostat lies in juggling with the fact that you have vast amounts of information that you want users to be able to access quickly and easily.

Older VS. New UI

For instance, we gradually shifted from a tab-menu to a tile design, and we added app interfaces for mobile and tablet. Going from Flash to Qt, allowed us more flexibility and scalability, plus room for more features. Our re-design created a striking new interface with a cleaner and more aesthetic appeal. 

We hired more designers over the years, shifting our focus from creating technology to making user centered products and services. Our design team consists of a vast amount of different disciplines: UX (User Experience) designers, UI (User Interface) designers, Visual Designers and field testers. But we also work with external design consultant and behavioural psychologists. To create the best product for the end-users, you need people that truly understand what makes them tick.

"You need different design principles in your team to truly understand what makes the users tick."

Killing some darlings along the way, we simplified the display without making concessions on our promise to consumers to give detailed energy insight. The key is to give insight when it is needed, offering alerts and actionable triggers at a glance, and a clean simple overview when it is less important, like when it’s night time. Drawing from behavioural psychology, state-of-the-art research and our own user base, we continuously come up with new improvements.

The future: layered and contextual
As technology evolves in the blink of an eye, it’s important to keep up with changing design trends. But our key design philosophy principle has always been to evolve with the user and the technology, rather than make drastic and sudden changes.

Looking to the future, we will continue to strive to create an optimal customer experience. The journey starts from an interactive onboarding program, when the user first receives their smart thermostat. 

Adding contextual and layered information, will enable us to cater to different users and levels of knowledge and interest. Learning about motivation and behavioural patterns can stimulate users to save more energy. Our users are on different axes – some are more interested in energy and sustainability, whilst others want to control as many devices in their home as they possibly can. Now that we have a really big user base, we can perform experiments with different segmentations and persona’s, to offer tailored, relevant and actionable advice and push notifications.

"Our key design principle has always been to evolve with the user and the technology, rather than make drastic and sudden changes."

The fact that people highly value our product (they give a solid rating of 7.8 and satisfaction increases every year) is a testament of our design expertise. The design of UI is about much more than what the display looks like. It’s about empowering the user. We want to continue challenging ourselves and foster the creativity to give more than a million customers an enjoyable experience.

"Design is about much more than what the display looks like. It's about empowering the user."