Defining Kasa’s Style

Finding a way to stand out in the
crowded smart home market with 3D

Project Overview

Situation

Existing in-app artwork was constrained by legacy decisions and the team was struggling to maintain a consistent, branded look-and feel as we supported larger screen sizes and more complex products

Task

Find a way to make artwork as modular and reusable as possible while leveraging the team’s unique architectural background to create a visual design that would be stunning, innovative and iconic

Action

Create an object library for reuse throughout the app, especially for installation-intense products
Define a style guide for our artwork to ensure consistent results, regardless of the designer
Leverage the new style to incorporate animations to convey complex actions

Result

Created a library of 3D artwork with an architectural flair, becoming a visually unique entry in the crowded market place of smart home devices. Additionally, the enhanced visual focus helped support customers in regions where the app was not localized through clearly illustrated setup and install guides.

Tools

Rhinoceros 3D
Sketch
After Effects
Lottie

Time

1 Month Concept Development

1 Year Complete Deployment

My Role

Design Lead

Style Progression

To understand how radical a departure this change was, consider the original smart plug artwork compared to the final animations used for a newer device.

Original Kasa artwork that relies heavily on text to convey the desired action. Images are just a corollary to the text instructions.

New Kasa artwork that focuses on an artwork-first layout, leveraging animation to convey the instructions. Text is still provided, but secondary.

Complex or non-obvious actions, like resetting a smart plug, are accompanied by illustrative instructions, all but eliminating the need for text.

Swedish Inspiration

Whatever your opinion of Ikea and their furniture design, they have to solve an almost identical problem as our installation experience. Ikea ships user-assembled furniture to 38 different countries and manages to do it with very limited text localization. Using their assembly guides as inspiration, we decided to adopt high-quality 3D artwork that could convey all of the complex installation instructions inherent to our products while simultaneously leveraging the team’s background in architecture and surface modeling.

Intentionally International

One of the amazing things about working on customer-facing products is that you end up with users all over the world, often in places you’d never expect speaking, languages you don’t have a budget to support. Setup and installation is one of the hardest parts of the IoT device user journey and we need to make sure that users can follow our steps regardless of their spoken language - because with users on every continent except Antarctica, there’s a high chance they speak a language other than the few localized in the app.

Our Goals

Changing our artwork style needed to accomplish more than just looking pretty; we had efficiency and business requirements that needed to be met, too.

Make complex installation tasks easier to understand through clear and concise artwork
Increase the legibility of instructions for users in non-localized countries
Help us present as a “single designer”
Offset for complicated industrial design

Planning for Volume

When we looked to adopt an artwork-first design model, we knew that would generate a lot of artwork as we insisted on step-by-step instructions for everything, including corner cases, to ensure no customer is left high and dry.

As illustrated below, installing a multi-way Smart Switch could generate six error flows and at least one happy path, all with their own artwork.

At this point, the Kasa app supported a handful of devices but the roadmap was easily going to triple that quantity in the next year.

More Complex is Actually Less Effort

Something of a theme on the Kasa Design Team whenever work quantity becomes an issue is our reliance on modularity and reusability. Flat, 2D artwork can be re-used but a 3D model can be reposed endlessly.

Legacy 2D Artwork

The 2D wire-in guide artwork shown here forces the designer to illustrate a complex, three-dimensional problem in two dimensions. Any additional depth or angle changes requires new artwork.

Modern 3D Scene

By introducing a 3D model posed in Rhino, the designer can manipulate the camera until they find the best perspective to illustrate the concept for the customer.

Reposed 3D Scene

Here, the same scene has been reposed to view the opposite side of the switch install. While we never implemented it, we had designs that allowed customers to manipulate the 3D model themselves to find the angle that might be useful for them.

Building a Library

We can populate 3D scenes with an object library. The team has created a large library of furniture, fixtures and objects that we can add to any scene to create context for our instructions. Our devices are installed in homes after all, not endless white voids.

Broad Reusability

We can share 3D scenes across products and mediums. With a subtle cinematic flair to the artwork, the same content can extend to marketing materials like packaging and product pages. And the inherent vector nature of the design ensures print or digital is not an issue.

Rhino, Meet Sketch

Creating the final artwork as seen in the app required several steps that moved the artwork through three apps: Rhino to create the scene, Illustrator as an intermediary, and Sketch for final styling and export to Zeplin for implementation.

Rhino 3D

In Rhino, the scene is composed and posed. We leveraged isometric perspectives to make things like animation easier and to ensure a smoother transition to 2D.

Illustrator

The Rhino artwork is forked into a 2D drawing and any cleanup happens to ensure clean lines. From here, the artwork is ready for illustrator as a pass-through on its way to Sketch. The bright colors are only placeholders to identify the different layers for Sketch’s styles.

Sketch

Sketch can import the 2D vector Illustrator artwork with a simple copy and paste. The fill colors and stroke styles are saved to the library and quickly applied to the colorless artwork, giving it life and the characteristic Kasa style.

Adding Animation

When it helps convey a complex action or convoluted procedure, we deployed animation to simplify the communication of a multi-step procedure. In keeping with our vector artwork system, the Lottie framework was used to move between Sketch and After Effects.

To simplify the animation process, specific scenes were created in Sketch and then imported into After Effects. These were then used to maintain accurate positioning as the layer groups were animated with simple keyframes.

Awkward Actions

Some actions are simply better described visually, regardless of the language used. Describing how to remove a stucco-installed doorbell, for example, is just easier to show than write.

ID Constraints

While the Kasa app team was able to provide feedback on product industrial design, we often had to work around cost constraints that dictated where a critical feature would be placed. Since we couldn’t make a customer’s life easier at the hardware level, we shifted the burden to our artwork explanations.

Sequenced

The three positions of the Kasa Smart Doorbell as it is affixed to the mounting bracket. Due to the complex nature of the downward hinge motion, communicating this is simplest with a basic animation.

Measuring Our Success

Something like an artwork style is more subjective than quantifiable but we can look to customer feedback to see if the style change has been helpful.

Senior install
Concise enough that I was able to do it and it actually worked. Finally a straight forward installation product

Five Stars for Install Guide
I am so impressed by the instructions to install this system that I wanted to write a review… I was so relieved that I didn't have to struggle or find out the hard way if I messed up. 5 Stars for the install process and 5 stars for the product.

Novice DIYer
I’m a novice on switch changing and had no problem installing them by following the Kasa App instructions.

The Sincerest Form of Flattery?

Perhaps even more indicative of our success with the artwork style is the fact that our competitors have adopted a strikingly similar style. You can be the judge of who does it better, but Kasa did it first.