Published on <a href="https://blog.prototypr.io/modal-prototyping-process-blog-shower-control-interface-5c8ca443c526?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nicole McGovern 
This is a prototype for a shower control interface for a high-end, multi-feature valve and temperature control.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tRVlzrceeih6j2-z3i_klQ.jpeg">First iteration of the shower control interface modal prototype
<h3>Requirements</h3>
My first step in starting this process was to read through the product requirements. They were as follows:
<ul>
<li>product controls and interface/display must fit within the dimensions of approximately 4 x 4 x 2 in volume</li>
<li>product weight is approximately .75 pounds, and should be able to be mounted on a wall</li>
<li>digital display will show settings such as temperature, volume, valves (this could be used to control whether water comes out of the tub spout, the shower head, a handheld wand)</li>
<li>Physical affordances and controls must be easy to use when visibility and dexterity are challenged by soapy hands, steamy showers, and absence of corrective lenses</li>
<li>Apply OXO brand and design elements to this new product space.</li>
</ul>
<h3>The Idea</h3>
I was drawn to this idea (as opposed to a smart screwdriver or smart pet grooming device) because ALL I WANT WHEN I HAVE MONEY IS A FANCY SHOWER WITH AN AMAZING SOUND SYSTEM :).
So I knew I wanted be be able to play music from this device, and I wanted it be just as easy to play music as it would be to start the shower (because why bother showering if you can’t listen to music the whole time???)
My last goal when thinking through the project initially was to make sure this device was as accessible as possible.
Functionalities: Play/pause music, next and previous button for music, sound controls for music, change bluetooth device, turn on/off shower head, handheld wand, tub spout, change temperature.
Contraints: User must have a smart phone to use music features.
<h3>Sketching</h3>
In order to better understand what I wanted from this interface, I felt it necessary to visualize the entire showering experience. In my first sketch, I created a rough visual of the idea overall shower layout, imagining a large, walk-in experince. The user could set up with this interface and turn water on without being splashed, leaving time for the water to warm up and music to play.
I also wanted to provide multiple ways to set most relevant controls to be more accessible and easier to use. Changing the temperature, valve type, and music volume could all be set using both the screen and physical buttons or knobs.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AYPKF4NTKfVyf7F68VEvbw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_zP8Gz7_1sn4KnPwzqigwQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5FUU2qF1j0lfHj2zakzrMA.jpeg">Initial sketches
<h3>Modal Prototyping</h3>
After sketching out my ideas, I grabbed some cardboard and a box cutter and got going. I built the base and temperature adjustment knob with cardboard and tape. I then used a paper fastener to secure the knob to the base. Using just paper, pens, pencils, and sticky notes, I created all interfaces for the main screen. I also created labels for the physical aspects of the prototype this way.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IFEG9MxnDripyiGWb4Kc8Q.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tRVlzrceeih6j2-z3i_klQ.jpeg">Prototype Iteration 1
<h4>General flow</h4>
A typical interaction with the device might look as follows:
<ol>
<li>Step into shower and tap the screen to start.</li>
<li>Using the screen, you turn on the overhead shower to let the water start warming up. This is a fancy shower and your device is opposite to the shower head, so you won’t be splashed by cold water as you get set up.</li>
<li>Set up music. You’re phone is already connected, so you just press play. You hit next a few times until you find a song you want to listen to. You turn the music up a bit using the screen slider.</li>
<li>Ok, time to check the temperature. It’s a little warmer than you’d like, you use the screen slider to turn down the temperature.</li>
<li>You shower for a while, then decide you actually want to temperature to be a bit warmer. You have soap in your eyes, so you reach for the device, find the knob, and turn a bit to the right. Temperature goes up.</li>
<li>You’re down with your shower, and you turn off the shower head by pushing the button on the side, because the glass is a bit foggy.</li>
<li>You dry yourself off while the music is still playing, brush your teeth, and then stop the music from your phone.</li>
</ol>
<h3>Usability Testing</h3>
Time to try it out. I ran a quick usability test, around four minutes, to get a sense for what was and wasn’t working, and to help me see thing I may have overlooked.
Here’s a 60 second clip.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F251249983&amp;dntp=1&amp;src_secure=1&amp;url=https%3A%2F%2Fvimeo.com%2F251249983&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Ffilter%2Foverlay%3Fsrc0%3Dhttps%253A%252F%252Fi.vimeocdn.com%252Fvideo%252F677553635_1280x720.jpg%26src1%3Dhttps%253A%252F%252Ff.vimeocdn.com%252Fimages_v6%252Fshare%252Fplay_icon_overlay.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1280" height="720" frameborder="0"><a href="https://medium.com/media/80884686fbe97b1d527899f0bac98b04/href">https://medium.com/media/80884686fbe97b1d527899f0bac98b04/href</a></iframe>
<h4>Task List:</h4>
<ol>
<li>Get started and turn on music</li>
</ol>
2. The shower control interface is connected to someone else’s bluetooth device. Change this so your device is connected.
3. Play music and adjust the volume.
4. Turn on the overhead shower and adjust the temperature to how you like it.
5. You’ve been showering for a while now, the glass screen is a little fogged over. Turn up the temperature without using the screen.
6. Next, turn the volume down without using the screen.
7. Now start the tub without using the screen.
<h4>What I learned:</h4>
Task 1: Get started and turn on music.
The participant was unable to complete this task without my intervention. They did not realize that to start interacting with the screen, they needed to tap it. This could be improved by adding a bit of text beneath the time that states, “tap to begin.”
Once the participant moved to the second screen, they said,
<blockquote>“I’m going to start the shower first, and then I’ll come back and turn on the music, because I’m cold.”</blockquote>
This was interesting, and I would like to do more research here. This participant made it clear that they would prefer to start the shower before starting music. If many others feel this way, I would adjust the hierarchy in this app to prioritize shower controls.
Task 2: Turn on the overhead shower and adjust the temperature to how you like it. (adjusted for participant).
The particpant had no trouble starting the overhead shower and adjusting temperature with the screen.
Task 3. Play music and adjust the volume.
The participant did not need to be prompted, and immediately moved over to music, pressed play, and adjusted the volume after finishing setting up the shower.
I realized a mistake here, and saw that I didn’t add a way to change the bluetooth device from this screen. This is something I needed to fix in the next version.
Task 4: You’ve been showering for a while now, the glass screen is a little fogged over. Turn up the temperature without using the screen.
The participant went straight for the knob, and completed this task quickly. The stated,
<blockquote>“Oh, I’ve been wanting to play with this for a while!”</blockquote>
This feature seemed to be well-received, so I decided to keep it in my next iteration.
6. Next, turn the volume down without using the screen.
This task was completed quickly as well. the participant immediately pushed on the minus button on the front of the device.
7. Now start the tub without using the screen.
This task was also completed quickly. The participant remembered seeing this button on the side when they first examined the device when trying to get started.
Task 8: Let’s say you did decide to start the music first. Change the bluetooth device to your own.
I had to do a little back-tracking here as I forgot to add a “change bluetooth device option” to the other music screen. The participant had no trouble changing the device once on this screen, but I definitely need to make sure bluetooth settings are easy to access everywhere.
<h3>Round Two</h3>
Moving on to my second iteration. Through this usability test, I found most feedback related to the screens. For my next prototype, I left the physical features the same, but modified the screen experience.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6lgKrcg-9P79uxRKd9DZXQ.jpeg">Prototype Iteration 2
This prototype is very similar, with main changes working to simplify the interaction.
<h4>What I changed:</h4>
<ul>
<li>Added “tap to start” to home screen to clarify how to start.</li>
<li>Removed the separate screens for music and shower setup to remove hierarchy (different people may like setting shower or music first) and simplify.</li>
<li>Thought through the bluetooth connection process and developed screens for this interaction.</li>
</ul>
<h3>Next Steps</h3>
With my second iteration prototype, I received quick critiques from a number of my classmates. Some of their feedback included:
<ul>
<li>Switching screen location of music and shower settings to match physical controls (shower controls on the same side as knob, music on the same side as volume.)</li>
<li>Larger buttons on screen</li>
<li>Add shower pressure</li>
<li>Indicate current location for temperature on knob</li>
<li>Clarify that volume controls are for music volume.</li>
</ul>
I would use this information to continue modifying my prototype.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AQxPcI3NDpaauA_X3fkXPg.jpeg">Prototype Iteration 2 Critiques
<h3>Takeaway</h3>
Overall, I’d call this prototyping experience a success. My modal prototype was fast, cheap, and provided a lot of insight. In a fast-paced, iterative work environment, modal prototyping can be a smart way to test before putting time and money into higher fidelity work.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5c8ca443c526" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/modal-prototyping-process-blog-shower-control-interface-5c8ca443c526">Modal Prototyping Process Blog: Shower Control Interface</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Modal Prototyping Process Blog: Shower Control Interface

Top Stories