Model Prototype: Shower Control Interface

Andy Shaw
4 min readOct 11, 2022

--

By: Andy Shaw

In this article, I will cover my design process for a shower control interface I prototyped in HCDE 451. I chose to design the shower control interface because I enjoy working with digital UIs.

Context

For the shower control, a few specifications were necessary.

  1. Dimensions of 4" x 4" x 2".
  2. Weigh approximately .75 pounds.
  3. Wall mountable.
  4. Display settings like temperature, water flow volume, and valves.
  5. Easy to use controls due to challenges from soapy hands, steamy showers, and absence of corrective lenses.

Design

In the early iterations of the shower control, I imagined a thermostat-like interface that had a few buttons to press. However, there were a lot of buttons and icons that could easily confuse a first-time user.

Sketches for possible designs.

I eventually revamped my original rectangular idea into a digital round display that could be turned with the use of a rubber grip after completing some user testing of my rectangular design. This was inspired by OXO, since they design with ergonomics in mind and follow universal design practices.

To clean up the actual UI of the final designs, I wanted to use Figma.
Screens for possible user testing.

Prototype

The first prototype consisted of paper, pen, and tape. I knew this was not going to be my final design so the prototype was very scrappy, but it was a proof of concept of what a shower control interface could look and feel like. This prototype was built before I thought of the final designs of a round shower control.

The first prototype.

After building out the prototype, I conducted a usability test with my friend Timothy Chen. It was during this testing that I realized that it wouldn’t be practical for the temperature and water flow to change value in a device like this, especially since everything else was clickable. A few points of feedback he said were: change the icons and combine the buttons.

User Testing with the first prototype.

The second and last built prototype was something I was really proud of. A lot of thinking went into the design. Initially, there were no buttons on the bottom and the user would need to switch screens with a small button on the side. However, I decided against it to better align with NNG’s usability heuristics (visibility of system status). I employed this heuristic by instead having buttons on the bottom that lit up the state of the screen and what each screen represented when pressed on.

The final prototype and default screen.

I expect for the white ovals on the bottom to be replaced with LEDs that light up in a high-fidelity prototype. In addition, I want the lines that underline the words to blink to indicate that the selection can be changed.

The final prototype and valve screen.

Analysis

The shower control interface was able to meet all the specifications. What worked well for this design was its simplicity. Only a few type of interactions are needed, which makes it intuitive. Plus, the spots for LED indicators of each button are useful for when the shower is steamy.

A few things could be improved about the current design. The design lacks a home or idle screen that could be useful for those who don’t want to adjust anything and want to see the current state of the entire system (temperature, valve, and flow). Also, there should be limits to what the user can input for the temperature and flow, which could be shown with a radial progress bar on the respective screens. Finally, the design could be a bit smaller to be more ergonomic for users’ hands.

Overall, the deliverable gets a 7/10 for effectiveness. There is room for improvement when it comes to visuals and aesthetics, but for a second prototype it was able to meet the assignment’s requirements. I also did not spend much time when it came to aesthetics, so next time it would be something I would consider and work on. I think the design does a good job of being futuristic and useful and I could definitely see something similar to it being sold in the current market.

--

--