Your personal shower assistant


Tyle is a system to help people personalize their showering experiences through the smart hub, the app and the extended product line.    

How can we create a more personal showering experience?

UX/UI, System Design


The challenge



Concerns about water usage prevent users from fully enjoying the showering experience


People often come up with ideas in the shower but no product addresses this



Users feel little sense of ownership for their bath rooms with limited options to customize



A bathroom doesn’t reflect different moods and motivations that people have


How Tyle system works


       Water, orchestrated.


Tyle offers uninterrupted showering experiences. You can control the amount of the water by slowly lifting or lowering the hand, like a maestro in the orchestra. The infrared censors detect your movement and adjust the water for you. No more hassle to save water!


     A  Gentle reminder


The circle light gently reminds you of how much time you have left based on your settings. You can fully enjoy your shower time without worrying about spending too much time on a hectic day or on a busy morning.


    Need something? Talk to me


From playing your favorite playlist to asking about today’s weather, you can just ask to your hub without interrupting your shower time.


Summary at a glance

The tyle app delivers the summary of your activities and helps you set the water limit. You can understand the weekly, monthly, yearly water consumption and how much water you’ve saved based on your goals. 


Customize for your moods

Quick and hot shower in the morning or slow and relaxing shower in the evening with your favorite set list? We’ve got you covered. Preset all the parameters to your preferneces. All you need to do is tap the mood and enjoy your shower time!

       Capture aha! moment


As we all know, a great idea a.k.a aha! moment in the shower room hits you unexpectedly. Now all you need to do is activate voice recording mode and just talk your idea to tyle Hub. In your downtime, you can review your voice memos and automated transcripts on your app.

Don't let your great ideas flow down the drain!


 Diving in

Design Process 


In order to identify design opportunities and user pain points, I conducted foundational secondary research, field observation and user interviews with people ranging from a stay-at-home mom with two kids to early career professionals. As the project evolves, I constantly loop between designing assets and testing them with people to make sure the physical/digital experience is plausible and appealing.  


Finding the sweet spot


As I peeked into the bathroom market, I found two categories; the easy-to-install single purpose products and the luxurious products to create the entire showering experience. What if we create something in-between, a system that people can expand based on their needs to have comprehensive showering experiences?


Interviews and key findings


Exploring directions


Based on the interviews and secondary research, possible directions were explored through sketches and post-it brainstorming. I decided to focus on the direction of modular smart “tile” units because of the simplicity, the expandability to accommodate different user needs, and the aesthetics that visually and conceptually fit in common bathrooms. 


Physical product development


Base on the modular smart tile concept, I drew some sketches and created prototypes to check proportion and small details. The programmed LED light is used to visualize the user experience for the final prototype.


Navigation architecture for the app


One of the initial steps of the app design process was to categorize each content category and identify what kind of content is included that also work with the physical components.



Low-fidelity sketches


Once the basic navigation architecture was settled, I sketched out many different ways that people can access their showering information. Through rough sketches, I explored multiple aspects of the app; data visualization for water consumption, navigation, goal setting, time scale,  transitions, e.t.c.


Mid-fidelity wireframes


Based on the low-fidelity sketches, I created these wireframes to show and test the flow between screens and the overall layout for each category.


Design Goals

  • Allow users to access each content category in a clear manner

  • Allow users to navigate through shower activity report

  • Allow them to edit limits and parameters 

  • Give them visual clues to quantify water activities


User feedback and iterations


I created 3 inVision prototypes in total to test out with users. The feedback highlight includes;


Layout - “I’m a bit confused on the font page. It needs better hierarchy” (on Version 1) 

Terminology - “The word ‘goal’ makes me feel like I’m not achieving my goal” (on Version 1) 

Specific feature - “I don’t want to open my phone and tab every single time before I go to bathroom” (on Mode setting)

Component - “This section feels too big/small. A bit hard to read.” 

Based on the feedback I got on each version, I iterated and brought it back to them to test again.


Visual Development


Once the wireframes were settled, I developed the visual variations and assets. I chose the final direction (light,white,clean) because of its clarity.

icon set