The So Fresh 9000:
A washing machine interface built with state charts

November 4, 2017


I had a bad experience with a washing machine so I tried building my own using a state machine. The project has convinced me that I want to keep doing product design with state machines and state charts.

The Cabrio that never stops

A year ago, I was trying to wash the linens at a friend's vacation home before I left for the airport. I was using Whirlpool's Cabrio WTW7300DW.

Not sure what the green, red, and blue lights in the center mean.

With seven minutes left on the wash, the Cabrio got stuck in a loop. Each time I went back to check on it, it still showed seven minutes and the linens were spinning in water, far too wet to put in the dryer. Doesn't this machine have a spinning teacups mode for extracting as much water as possible?

Obviously there's an error but there's nothing telling me what's wrong.

Problem #1: no user feedback for an error.

Problem #2: the error is looping. Why is there a state with no exit?

My options are just to pause the cycle and try to run another cycle. Preferably just the spin cycle. Problem #3: I didn't notice the option to Rinse & Spin.

On the interface, this is a small label above something labeled Utility Tools. Is it an option I can select? I'm not sure.

Tools that are so full of utility.

I stumbled on the solution. I shuffled the linens around in the wash tub and once I started the machine again, the time remaining began to count down. Turns out the laundry was unbalanced and for some reason that was preventing the cycle from finishing.

The machine is top-loaded so the laundry sits in a vertically-oriented cylinder that is spun by a motor. If the laundry is unevenly distributed, more weight on one side of the cylinder than the other, then the cylinder will wobble as it spins. An unbalanced laundry tub can cause wear on the motor and its connections to the tub. It can also makes disturbing thumping noises.

I'm not sure why the unbalanced load caused the machine to loop. Seems like it would do more damage that way.

Anyway, this is how the story starts. I was worried about either missing a flight or creating a moldy laundry monster for the next vacationers. It was a crappy product experience.

But I don't want to just throw shade, I decided to try to make something better.

The problem to solve

My goal was to build a washing machine interface that:

  • allows users to choose their wash preferences or use presets

  • runs the wash based on the user inputs

  • displays the time remaining

  • displays an error when the machine is unbalanced

In addition to these basic goals, I included the usual things you expect from a washing machine. For example, if you open the door, it should pause which means that it remembers what it was doing and resumes when you close the door. Give it an elephant's memory. I won't list the rest of these details here.

The solution

The solution could've been much simpler. I could've just drawn you a picture or even marked up a photo of the current interface to say "Add an error message here when the sensor registers an unbalanced load!"

I wanted to work through designing the whole system to see how things like settings and sensors on the machine could work together to present a clear, usable interface.

So I built a web-based prototype of the interface that I could interact with and move through its various states.

For unbalanced loads, I've simply made an unbalanced load message appear on the interface that is cleared if the balance is regained. I'm just working with the interface here so I've made assumptions about the physical sensors and how frequently they report back to the washing machine's control system.

How it's made

The washing machine prototype is basically a functioning website.

The core of the program is a state machine. The state machine is terrifically useful because it controls the app by moving between states. For example, when the washing machine is inactive, it's in the Dim-Display state. I can tell the interface to dim the display when the washing machine is in this state.

Then, when someone presses the Start button, the machine knows to transition from the Dim-Display state into the Ready state.

The awesome thing about state machines is that you create a system of logic for your program to follow. Based on this state machine in this chart, there is no way to move from the Ready state to the Done state. So in creating the machine, I can declare the behavior I want and prevent behavior I don't want.

I built the state machine with a tool my partner, Kevin, has been working on. He hasn't shared anything about it publicly yet so just ask if you're curious.

I was able to define the state machine in code which generates an interactive chart. Being able to see the chart and navigate it helps me test out the system I've created. I can explore the possibilities I've created and look for gaps in functionality or behavior I want to prevent.

In addition to defining the state machine, I can code up an interface that responds to events in the system. That's what you saw above.

Statecharts make design better

My process for designing interfaces used to start with

  1. a bit of writing – goals, use cases, a list of screens I think I need to draw,

  2. an information architecture diagram,

  3. sketching out the screens,

and so on.

None of these tools does a good job of conveying the underlying functionality of the system.

The information architecture is the closest I used to come to looking at the system from a high level. And to be honest, an information architecture is a poor representation of a program. It's a rough approximation of how websites used to be built using just HTML and CSS, before programs on servers began generating the HTML, CSS, and Javascript that web browsers read. Information architecture is best used for communicating how a website will be organized.

With a state chart I can define the control system that affects how people interact with what I'm designing.

I'm curious to try this out with other folks. I hope state machines will make it easier for the teams I work with to align and get a prototype working quickly.