UX, VISUAL DESIGN

Kohler Unified App

Designing a platform for the connected home experience

Lockup of screens for a connected home app

PROJECT OVERVIEW

Kohler needed an app that allowed smart bathroom owners to control their ecosystem of connected devices.‍

Need

Kohler needed an app that would support their forthcoming ecosystem of connected, voice-enabled products. Their initial desire was to provide users with a “remote control” app experience to bring together their disparate products.

work

I focused on streamlining the experience by prioritizing how device controls were surfaced and providing users access to routines through preset experiences and voice control, instead of relying only on remote control.

RESULT

The resulting app debuted at CES alongside Kohler’s new hardware. Since the initial release, I’ve continued to work with Kohler to bring new devices to the app and evolve
the functionality as new use cases arise.

my roles

Project lead

UX designer

WHAT I DID

UX design

Visual design

teammates

Natalie Vanderveen

VISUAL DESIGNER

Scott Staab

CREATIVE DIRECTOR

Lani DeGuire

PROGRAM MANAGER

Marc Vandehey

NATIVE ios prototyping

Whiteboard with screen designs printed and taped to it

A subset of the feature inventory

UNDERSTANDING THE NEED

Documenting the hardware functionality

To start, we needed a solid understanding of the device features. To do this, I took existing user stories and descriptions of functionality, and created a feature inventory. I used this to prioritize primary controls alongside of Kohler and determine which secondary functionality should be surfaced in settings.

During this process, we found that there was more overlap between the granular features than we thought. This inspired Natalie and I to take a modular approach to our control design, ensuring that “modules” could be repeated across the app.

Understanding customers

Natalie and I also reviewed Kohler’s existing customer research. From their interviews, we realized that people frequently talked about their bathroom in terms of routines, referencing taking their favorite shower every morning or having their kids’ bath waiting at night.


Based on this, we advocated for moving away from just providing remote control and to instead focus on giving users the ability to access repeatable routines through preset experiences that could be called by voice.

"I can think of many times I've gotten into a shower at the right temperature and it's like an ahh experience"

A quote from a research participant

THE DESIGN PROCESS

Mapping out the experience

To get describe our recommended architecture, I created this lo-fi map of the experience. This helped us get buy-in from Kohler and give us a plan to follow as we prepared to start wireframing.

User flow for someone using a credit service

More throughly documenting the architecture of the application, showing the difference between primary, secondary, and tertiary functionality

Wireframing the flows

To demonstrate flows, I wireframed out each screen of the experience. During this process, I relied on high-fidelity wires that not only described functionality, but gave Natalie and I a sense of how our visual hierarchy could work. This resulted in the creation of hundreds of wireframes over the course of the project

These were also critical in getting buy-in from Kohler’s dev team. We walked through these a lot to make sure the intended functionality could be supported by the software and hardware before getting totally into design.

The wireframe flow for the Autofill bathtub device, including the primary control and secondary controls

Developing the design language

For the visual design, I worked with Natalie to come up with the design language for the software. We took our cues from the bold feel of Kohler's hardware and character of their current brand. 



RESULTING PRODUCT

The app experience

The resulting experience centered brought devices with very different features together for the first time. To simplify the experience, the app prioritizes primary actions and preset “experiences” but still allows for granular control as needed.

Bringing together disparate devices

This app represented the first time all of these devices were brought together in one place. To make different products feel consistent, I concepted full-screen, highly-visual primary controls that would feel similar to the experience of using physical knobs or dials (like the ones on traditional bathroom products).

Creating repeatable experiences

To get at the user need of repeatable routines, I focused the application around easy to start preset actions

Users can use current device settings to create an "Experience" that lives on the home screen that can be easily repeated and "played". This allows people to do things like set their kid's bath or their post-workout shower without having to go into the device view.

By rolling pre-defined actions into one place, I also opened up the ability for users to call these presets by voice ("Kohler start my Morning Shower" for example) and to schedule set routines.

"I can think of many times I've gotten into a shower at the right temperature and it's like an ahh experience"

Prioritizing main controls

The primary goal of the device controls was to streamline the app experience and make functionality less overwhelming to users. 



To do this, I put the controls we had defined as primary on the main screen and organized more granular controls and feedback to settings. This ensured that they remained accessible but out of the way of the major jobs to be done.

DEVELOPMENT

Developing the app


Throughout the  process, we worked closely with Kohler’s dev team to talk through functionality, answer questions, and iterate based on their needs. We relied heavily on tools like Zeplin to facilitate our conversations and pass deliverables on as needed


As needed, I worked with our internal dev team to prototype controls to share working functionality with the Kohler team to describe our intended behavior.

"I can think of many times I've gotten into a shower at the right temperature and it's like an ahh experience"

THE RESULT

An ever-evolving application

After the 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. 


Since then, I have continuously worked with Kohler to evolve the app as new use cases, business goals, and technology implications arise. This includes adding new devices, changing user flows to support the needs of new voice technologies, and adding a dark mode.


OTHER PROJECTS

Morgan Wheaton

OTHER PLACES