X

Combining physical and digital experiences

We worked with Kohler to create a voice-enabled platform to support its growing ecosystem of connected hardware.

001. Brief

Kohler needed a smart platform that would provide users an easy way control their kitchen and bathroom appliances.

002. Solution

We created a unified experience, connecting Kohler’s products, simplifying daily routines, and adding voice control.

003. Outcome

Kohler’s voice-integrated platform debuted at CES 2017, gaining the spotlight and winning a number of awards.

Putting voice first

With an eye toward the future of user-aware, voice-controlled kitchens and baths, thirteen23 worked with Kohler to design and architect its first digital platform. The new ecosystem allows users to control and personalize their product experiences, simplifying daily routines.
Products

UNDERSTANDING THE PRODUCTS

We worked closely with Kohler’s teams to establish a digital strategy that seamlessly integrated with popular voice technologies while also creating an extensible platform for Kohler’s own services. Understanding how each product worked at the hardware level and determining which features to surface was critical to our strategy.
Wireframing

ESTABLISHING WORKFLOW

Strategy in place, a final feature matrix was established to inform both design and prototyping. The team created a global framework and an exhaustive set of wireframes that covered every user flow, including adding products, creating routines, managing rooms and locations, and voice personalization.

Visual Design

After mapping out the primary digital experience, we established a comprehensive design language that could be extended across the rest of Kohler's digital products and software. We took our visual cues from the bold, modern character of the Kohler brand.
System

AN EXTENSIBLE SYSTEM

We created a custom design language consisting of updated typography and colors, repeatable UI elements, and hero device controls that could be reused and expanded across the software.
Library

AN EXPRESSIVE ICON LIBRARY

Instead of using product photography that would quickly become outdated, we created a detailed library of product illustrations representing each of Kohler’s smart products and appliances.
thirteen23 is an exceptional part of our extended design team. They skillfully approach functional complexities with understanding and care, distilling them down into our desired minimalist expression.
— RAFAEL REXACH, DESIGN STUDIO MANAGER - SMART HOME, KOHLER

Experiences and Products

To accommodate the needs of users who want both easily repeatable, personalized routines and experiences, and individual device control, we organized features into two categories: Experiences and Products.

EXPERIENCES

Experiences give users the ability to have one-touch access to custom routines and experiences from the home screen. They also provide Kohler with a foundation that can grow to include synchronized devices and inteligent voice control.

PRODUCTS

Product views allow users more detailed control over their devices. We created a suite of hero controls that simplify each product and focus the user on the most important actions. Additional configuration is still available in settings.

EXTENDING THE LANGUAGE

We also considered how our visual design language could be extended across Kohler’s hardware products. We focused on creating a seamless visual experience that continues when the user switches between their smartphone and built-in Kohler displays.

Adpative Interface

To support advanced customization, we provided Kohler with an adaptive interface that can switch from light to dark based on user preference or time of day.
Dark ui
Dark ui
Voice

VOICE INTERFACES

In addition to the visual design, we also considered how the app functionality could translate into voice experiences. We ensured that experiences and products could easily be called upon for via voice, to make sure interactions felt conversational.
Mirror

SMART MIRRORS

Additionally, we made sure our interactions would fit well into Kohler’s growing ecosystem of voice-driven product experiences powered by Alexa.

Kohler at CES

Kohler took our application, along with their suite of products, to the Consumer Electronic Show. In addition to the app, Kohler leveraged our visual design elements into their larger marketing effort as well. The app, along with their ecosystem of smart products, represented a well-received into the consumer electronics space by Kohler.