Kohler. Supporting an ecosystem of smart hardware.
UX Strategy & Design Oversight
Kohler needed a way to help their users simplify their routines and control their new connected bathroom products.
While Kohler has been creating innovative experiences in the home environment for years, software has never played a major role in their success. We created a unified experience for Kohler that connected all of their new connected products, simplified daily routines, and provided voice control.
Wait, smart what?
Starting from hardware
Before getting started, we knew it was essential that we understood exactly how Kohler’s hardware worked. We worked with Kohler and their development team to understand the features of each of their eight connected products, from showers that turn into steam rooms to self flushing AND heating toilets.
We then created feature matrices that organized each product's function into either control, feedback, or settings. This not only gave us a reference point for design and development, but also gave us an easy way to identify similarities between seemingly disparate products.
Understanding Kohler's users
In addition to understanding the hardware, we needed to understand Kohler’s users. We dove into Kohler’s existing research and realized that their use cases were more experienced-based than we thought. Their users talked about wanting to take their favorite shower every morning or have their kids’ perfect bath waiting for them at night.
The app architecture
As we started building the application, we realized our challenge was two-fold: We needed to create a structure that would not only support granular device control and configuration, but would also allow users to have access to repeatable routines and presets.
The app structure
Our resulting structure split the app into two main categories: Experiences and Products. Experiences give users the ability to start their devices to their specifications with one touch, while Product controls allow Kohler devices to be easily controlled and configured from one place. Additionally, Settings provided a place for all global user configurations.
To help give Kohler an idea of our proposed flow, we identified a high-level map of how we saw the screen flow working out. We used this architecture as a reference point as we began defining more detailed user flows. Eventually this architecture grew into a set of over 100 wireframes that detailed all of the functionality in the application.
For Experiences, we wanted to give users the ability to create a series of product presets that can quickly accessed from the home screen. However, more than just simple presets, we saw Experiences as the foundation for Kohler’s future connected product experiences.
Creating an experience
Users add experiences from the control view, automatically rolling up all of their pre-defined configurations into the experience. This makes setting up an experience as simple as creating a name.
Once an experience has been created, it gets added to a rail on the home screen where it can be quickly started and stopped. Users can also drill in to see experience details in real time and fine-tune their preferences
The future of Experiences
In the future, as Kohler’s products become more synchronized and more readily controlled by voice and user recognition, we see Experiences as the primary way users will interact with their products. Instead of manually starting or stopping presets, routine experiences could eventually be easily called, scheduled, and managed by conversational interactions or biometric recognition.
Creating the product controls
While experiences give users a quick way to start and stop their Kohler products, detailed device controls allow for straightforward, easy management of multiple smart products and their statuses.
Making the complex feel easy
While each product has varying degrees of functionality and configuration, we created a system that puts the most important controls act the top level and more detailed controls in settings. This simplified these seemingly complex products and focused the user on the most important actions.
Creating a design language
In addition to the UX work, I also worked with my coworker Natalie to come up with a visual design language for the software. We took our cues from the modern feel of Kohler's hardware and the bold character of their current brand language.
Preparing a consistent control library
To maintain consistency, we created a collection of reusable UI elements that could be used across the software. Establishing this library helped ensured that these products would feel familiar to one another and ensured that our dev team could re-use elements across the app.
Designing the hero controls
Prior to this application, all of these products had lived on their own. Since our software was bringing all of these devices together for the first time, we really wanted to create visual controls that would make things feel clear, consistent, and related. During the design process, I worked with our developers to test the feel of these large scale controls.
In the end, we were able to deliver a fully documented app ready to go for CES 2018
Throughout the project we worked closely with Kohler’s product and development teams to make sure we were meeting their expectations and creating an app that actually worked with their hardware and backend infrastructure. At the end of the project, we were able to deliver a complete application ready for development.
After initial development, Kohler took the app and their ecosystem of smart products to CES where they were named as a CES 2018 Innovation Awards Honoree.