CARING FOR EVERYTHING WE CALL
HOME
INTRODUCTION
An opportunity came across to help build a startup focusing on smart home technology. A chance to mix my passion for helping better people's lives through design, my love for the water, and my inner carpenter heart for building better homes.
Phyn Pilot Study
After nine years of research and product development in smart home plumbing, early Phyn created a test pilot gathering billions of data points in 150 homes across various regions in North America. In this study, people had been given a test pilot device along with a mobile application that tracks water usage, leak detection, and calibration. The goal was to collect as much data as possible to collect the different types of leak signatures so that our machine learning part of Phyn knows when and where the leak is.
Pilot Dashboard
We spent our first few months as a small product team of 6 working together on our Pilot application. The pilot app was originally designed to be a utilitarian tool, simple user interface. It’s use, as mentioned above, was to collect data and perform tests. Tests that would pave the way for our future core features.
My first few tasks consisted of applying a more unified design system to the user interface. One of the simplest changes, yet most dramatic changes was typography. By properly assigning font classes into a more structured hierarchy. Once this was in production, I moved on to other pieces of the app, re-thinking and building out new additions for our pilot users to test. I spent a great deal of time exploring different solutions for our dashboard page, trying to get a few ideas in the works for what would be coming down the pipeline.
Core App
The app on-boarding process was constantly evolving with changes in compatible device tech requirements, firmware and machine learning. As we rounded out the requirements, I began applying the first pass of ui to the onboarding process wireframes. I set up a few simple typography patterns, keeping all ui clean and simple. We needed something flexible so that we could have the flexibility to move things around while we continue to refine the experience. We had a few core "golden path" flows built out which would consist of onboarding, login, dashboard, leak alerts, pressure test, and settings.
Phyn Dashboard
Playing with the idea of a chat bot experience, we huddled together to figure a way to make this thing come to life. The original idea from our UX team was to have a line representing the flow and pressure of water paired with water stats that map to your homes plumbing system. I spent roughly a week or so creating concepts that would align to the wireframe version seen in the first frame above. I wanted to take this idea a bit further leading me to explore about thirty different styles under several compositions.
I suggested these two directions. The first being a molecular concept with motion in the background as an abstract representation of water. The conversation would move over top of the animation in speech bubbles on top of response actions. Second concept is an animation of water pressure over top of a conversation block of text and response action below. We had to play it safe and go with the second version. Many foreseen too many issues with trying to develop the conversation piece over top of video, along with the legibility of the speech bubbles.
I applied the new dashboard style to the existing user flows the ux designer had ready for handoff. It wasn’t long before we had our chat bot experience in full swing. In the early stages of the app we had a few primary features. Obviously the dashboard conversation experience would interwine, tethering all of our main features together.
Phyn Features v1.0
The most important feature following the dashboard revolved around the devices ability to conduct a plumbing health check. The health check would connect to the phyn plus device which monitors the water inside of the pipes through pressure waves. From this pressure check to leak check, we would map types of leaks to patterns in our machine learning data points. We were still figuring out the best way to pull this off with ML improving on a daily basis. We would find low flow leaks, moderate flow leaks, and high flow leaks which would enable you to contact your plumber, shutoff your water, or specify what the pressure change could have been in terms of flow/water usage — all helping our learning database identify pressure signatures.
This early version of plumbing checks and leak types would set us up with the test environment we needed to help us refine the inner workings of our tech’s capabilities. The app was quickly growing into a larger product architecture. We had been testing the conversation dashboard for a few weeks with great success in finally getting the app to where we wanted it to be.
The Sketch
Determined to get this idea on screen, I continued creating concepts with any time I had to spare. I started sketching out the concept in photoshop of how the visualization could take form as a subtle background element, whilst maintaining a visual hierarchy leading from your home’s water system stats, to conversational text, followed by response actions.
The Welcome sequence
I needed some way of showing how this would animate through the different sequences. So I experimented with aftereffects plugins Trapcode 3D, Flow, MIR, and Particular. Once I was ahead of the learning curve, I made a concept animation of the app.
The screen would darken, as particles would begin flowing through the screen like water. After the startup sequence, the conversation would begin floating up, with response actions below. I showed the concept to a few team members around my desk who suprisingly liked where I was going. I felt like the idea could really work, and would also line up with our vision for the brand, the visibility into your homes water system.
The animation sealed the deal, so we had it outsourced to GRAFX Co who turned the abstract water concept into a realistic water flow which stops and starts in parallel to the devices shutoff system.
Menu & Shutoff Switch
After some testing, we needed to focus on the most important feature, the shutoff valve control. My concern about having the shutoff on the dashboard was the room for error. Anyone could accidentally tap the shutoff toggle. So to prevent this from happening, I wanted us to move the switch into the menu. I created several different concepts to see what would work best.
Settling on this menu design, we’d then need to work on the different states of the shutoff switch. I ran us through the ringer trying to figure out the best possible switch that would have several different states that would properly respond to the status of the Phyn Plus device shutoff valve. This stage required intensive testing for weeks and a very close correspondence between the developers, myself, and our QA lead Tyler Hauf. After many trials our attempts paid off. We got it working with the help of lottie files.
With our CES reveal approaching, we put the finishing touches on the app. This part of the design process takes us back to the previously mentioned bit about flexible patterns in the early stages of product design. Since we had little to go on in terms of branding and style direction, I found the best approach to designing a scalable app for Phyn was to start small. A few basic patterns. Building out the app with a focus towards function. Once the app is fully functional, you begin to add in more style, molding the app into a more brand centric design language.
The Reveal CES 2018
As I was putting the finishing touches on the app, I was also switching gears to the design of the Phyn CES Booth, Phyn App Prototypes/functional demos, and our Phyn Marketing Campaign around Speak Water. Working with Pinnacle and our marketing director, we designed our booth to have a modern museum—esque inspired look and feel. Keeping it light and airy, and as clean as marketing would allow. After landing in Las Vegas, I rushed to the convention center to help set up.
Phyn’s first impression at CES turned out to be a huge success. Constant interactions with people from all around the world. The vibe we created had everyone talking about water in ways we’d never expect. There was a state of mind that switched. I could see first hand how many communities and countries are coming together to find ways of solving issues around water resources.
Design Language System
Once CES was over I had time to assemble the Design Language System for core product. I devoted two full sprint towards refining our system so that our design language can evolve into a scalable design ecosystem. This consisted of reassuring all layers and folders we’re proper across sketch files and pages with proper naming conventions, a complete design component archive alongside a fresh sketch symbol library, then once again assuring all typography classes were assigned properly, cleaning up all illustrative elements, rechecking animations, all with the intent to maintain an organized design language system.
