Shower Control Interface — A Model Prototype
In the second episode of “Mastering Prototyping Techniques”, I kept up with the fast-paced environment of the series and conceptualized a smart shower control interface using the OXO brand. With the concept of the shower control interface developed, I created a prototype and tested it out in real users.
Design
The OXO brand
I started on my design process by researching a little bit about the OXO brand. Through browsing their products and brand statement, I found that OXO puts a strong focus on the tactile feeling and ergonomics of the product. They also strive to create products with simple and minimalist-style design. Thus, with these guidelines in mind, I started to conceptualize the shower control interface.
The constraints
In order to shape the formation of the concept, I carefully observed the provided constraints (there are minimal required constraints in this episode of “Mastering Prototyping Techniques”). I wrote the constraints down on a piece of paper and interpreted them along the way. This way I had a solid understanding of the constraints and was able to conceptualize within them.
Brainstorming
After understanding the constraints, I then started to brainstorm on ideas for the shower control interface. The most important constraint I kept in my mind while brainstorming was the real situations on how users would interact with the interface (soapy hands, blurry vision, etc.). Branching off from that constraint, I decided that my shower control interface should have a very obvious and relatively large digital read-out. Other than that, the users should also be able to reach their goal with minimum amount of steps. Based on these thoughts, I started to quickly sketched out some ideas:
Explain my sketch — how to change temperature and water volume?
To make things simple and seamless for users to use under challenging conditions, I decided to redesign the conventional interactions people have with shower control interface. I abandoned the conventional button design (users push buttons to change water temperature and such) and conventional knob design (users turn the knob the change water temperature and such). Instead, I decided to change the interaction to “sliding” so that the users might have more accurate control over the change. Together with LED-lighted progress bar and digital read-out, the users should be able to make changes to the shower state with little difficulties.
Explain my sketch — but how to turn this thing on?
Moreover, to make taking a shower even simpler, I ditched the on/off control. Instead, I integrated the on/off control with different modes of the shower. If the users push “tub”, then water will come out of the tub faucet. If the users push “tub” again, then water will stop coming out of the tub faucet. Pushing multiple buttons will make the water divide between different water outlets.
Keep iterating! — 2nd iteration
After having some initial ideas, I then considered the size constraint (4x4 inches) and modified my design around it.
However, as you can see above, the buttons and screens became really small once the size constraint was considered. This would not be ideal for users under challenging conditions because small buttons were simply difficult to use. In order to make the buttons and displayed bigger, I experimented with different shapes of interface and sketched them all out along the way.
Keep iterating !— 3rd iteration
After experimenting with different shapes, I determined that square was the shape that would provide with the most amount of space for buttons and display. However, I noticed there was a significant amount of space between the top features and the bottom features of the interface. Moreover, the space between the arc (temperature adjustment) and the bars (water volume adjustment) was too little. Thus, I sketched out another iteration!
Keep iterating! — 4th iteration
In order to address the problem recognized above, I changed the arc and bar into a straight sliding bar. This way, the space of the interface could be much more effectively used. The digital read-out screen could also be made bigger due to this change. This way also made sure the interaction with the interface was consistent (slide right to “increase”, slide left to “decrease”). To make this even more usable in challenging conditions, I integrated sticks with the progress bar (this might be hard to understand, but it is the little square below the long rectangle on the right side of the digital read-out). That way, people can easily change the shower state by tactile feeling.
Prototype
After sketching and defining the idea, I then proceeded to create a prototype, so that I could test it with real-world users and elicit feedback.
How did I make it?
Prototyping the interface was actually an incredibly simple process by the virtue of its simple design. To simulate the progress bar and sticks, I stuck a blue-color paper and a pipe cleaner together. I carved out slots in foam board to simulate the appearance of the actual interface. Further, for the buttons, I simply cut out cardboard to simulate its appearance. I then used different colored paper to indicate different digital read-outs.
Usability testing & Analysis
In order to test the concept of my shower control interface, I tested it on real-world user. I defined the user tasks around the functions of the interface prototype. The usability testing was carried out in a scenario-based manner to simulate a real experience. You can watch part of the usability testing in-action here.
What went well?
Participants reported that they were extremely intrigued by the idea of changing shower state by sliding, because this is something they had never seen before. They also thought this made changing shower state very easy. They really enjoyed the integration of on/off button with different modes buttons. They reported that this made taking a shower an extremely simple process.
What needed improvement?
Participants reported that they did not really understand the number-only display indicated the water volume. They suggested that a more intuitive display for them would be either percentage or water-drop icons (e.g. 1 drop to 3 drops). Participants also raised an interesting feedback on the tactile feeling of the interface — to maximize the tactile feedback of the interface, the buttons at the bottom could be changed to different shapes. That way, the users would not need to remember the correct order of the water outlets on the interface.
Conclusion
Overall, I think the design went very well because I was able to look into the user needs and came up with corresponding solutions rapidly. The entire prototyping process took no more than 2 hours and I believe that was the key to rapid prototyping techniques. I am also glad that through usability testing, the simplicity of my idea was supported by participants. However, further improvements such as changing the water volume display and different shapes of buttons can be made.
Thanks for reading this. Stay tuned for the next episode!
