Phyn

Phyn, a company spun out of Belkin, makes a series of smart water assistants that monitors water usage and detect leaks in a home. The device is connected to the home’s main water line and can be controlled via a dedicated app on mobile devices.

Background

Phyn approached us when the flagship model, the Phyn Plus, was under development. As the device is intended to be placed on the water main which is typically located in basements, closets and hedges, the user is not expected to interact with the device once it’s set up. As a result, there are no controls on the device other than a button and an LED strip.

My task was to design and prototype animations for the LED strip. The goals were twofold:

1. Provide sufficient feedback using the LED display for set up and troubleshooting in situations where the app is unavailable.
2. More importantly, the design needs to plant the device squarely in the future: smart, slick, and futuristic.

Constraints and set up

The final shipping hardware had an array of 3x19 RGBW LEDs. When we first started the project, it was on a 3x13 array but that ended up looking spotty because the distance between the LEDs were too wide. We also iterated with the ID team to test different diffusers to find one that could produce the desired visual effect.

The prototype was written in C++ in Arduino. The hardware board was compatible with Adafruit’s NeoPixel library but I had to write a library to help control and time the animations. Some animations were responsive to external inputs like the flow of water. For this, I connected a potentiometer to simulate the effects.

Creating states and shaping lights

As a first step, we had to list the various states in the device lifecycle that will require a distinct animation. Speaking with the technical team, we synthesized all the requirements and arrived at the following.

Designing for LED strips was unlike any other types of motion and animation design that I’ve done. For one, I quickly realized that the workable range of colors is way smaller than I expected. Colors in light adds differently than print and flat panels. In this specific configuration and diffuser, only the 6 main colors are distinct and recognizable. In addition, it is impossible to render dark colors; there is only bright and dim, and black looks like the LED in the specific position is malfunctioning.

Where the light is

Creating the animations for the individual states was an exercise of expressing the concept in a 3x19 LED array. For the main state, which was indicate water flowing through the pipes, we quickly arrived at an animation that mimics air bubbles and water currents traveling through. When the device is searching for Wi-fi, the screen sends out a pulse that radiates outwards.

For others, it was more difficult to make obvious the meaning. In diagnostics mode for example, we ended up devising an animation where the diagnosis corresponds to a progress bar. If an error is found, the progress bar will stall and the installer can then reference the progress bar to where the error may be.

To quickly prototype these animations, I had to build a set of libraries to support color blending and transitions between pixels. Here’s an example, a code snippet that provides a quadratic easing in/out curve for a specific LED node at a time slice within the animation.

1
2
3
4
5
6
7
8
9
10
uint8_t easeInOutQuad(uint32_t step, uint32_t numSteps, uint32_t start, uint32_t len) {
  uint32_t halfSteps = numSteps / 2;
  uint32_t halfLen = len / 2;
  if (step < halfSteps) {
    return easeInQuad(step, halfSteps, start, halfLen);
  } else {
    // Because we don't use floating point, we have to compensate for round downs
    return easeOutQuad(step - halfSteps, halfSteps, start + halfLen, len - halfLen);
  }
}

Here is a video of the project towards the end state, showing me cycling through the various animation states.

Epilogue

Phyn Plus launched in CES 2018 and is now available to purchase from all major big box stores.

In 2019, Phyn Plus won a Red Dot design award. From the press release:

Phyn Plus’ minimal, modern aesthetic elevates plumbing into the realm of the connected home, while seamlessly blending into the installation environment. An RGB LED panel runs the length of the device, simulating the flow of water, to provide device status feedback to users.

If you enjoyed this work, you should consider purchasing a Phyn Plus and make sure you don’t get anymore water leaks!