SmartThings

Introduction

SmartThings is an IoT platform that integrates all your smart home devices from different companies onto one single app. I primarily focused on designing from scratch a new developer web console which included some user research as well as creating new flows, wireframes, prototypes, visual design assets, and a new design system. My design scope also grew with being able to work with other engineering and design teams at both SmartThings and Samsung managing current assets, assisting in crafting UX requirements for engineering, and creating new UX guides and flows.

Role
‍UI/UX Designer

Tools
‍Figma, Sketch, Zeplin, Adobe Illustrator

The challenge

To design a new web developer console for our third party company users allowing them to more efficiently go through the certification process of publishing and maintaining new and existing smart devices and their respective software.

Guiding principles of the project

Efficiency— make the long process easy to use
Clarity— effectively communicate the needs of what needs to be submitted
Flexibility— allowing for a wide variety of users and all types of companies to utilize the web console.

Discovery & Research

Understanding the user

Interviewing the stakeholders

I interviewed several product managers and those who had been involved with helping the onboarding and integration of third-party companies and their own smart home devices to the SmartThings IoT ecosystem. These managers often had ongoing relationships with external companies and would serve as points of contact for integration.

"Having no ability to keep track of a certification status keeps me on edge"– Marissa

"Only relying on email makes it frustrating when a mistake is made"– Kat

"...our process can take forever..."– Richard

Problems I found

Inefficient information exchange— most of the data and information necessary for a product's integration was exchanged over email leading to important elements being accidentally left out.
A clear need for a more streamlined and transparent process.
If there was new information that a business wanted to update there was often a significant lead time and could sometimes take days if the point of contact was out of office or on vacation.

Ideation

UX Workflow

Putting together a high level flow

Creating a workflow allows me to visualize how the user will accomplish their goal as well as show me which pages need to be designed. It also allows me tell the story clearly and quickly to other stakeholders in order to show the depth and engineering resources.

Card Sorting

Maximizing information

With the high density information of the certification process, we completed card sorting to help identify areas where we can group as much information as possible and try to flatten the initial learning curve.

Wireframes and Prototypes

Early mockups and testing

Creating early iterations of mockups and prototypes allowed me to conduct usability and A/B testing. Seeing what works and what doesn't allows me to gain valuable insight.

A/B testing from early designs

We found that modals made navigation and discoverability of info actually harder to accomplish the process

What I Learned Testing So Far

Throughout my time gathering research while iterating and testing designs these were some of the recurring themes so far.

No way to track progress and manage expectations; there was a lack of clarity of the overall end-to-end process and technical requirements for a product's complete and successful certification; a user wasn't sure what they needed to finish or how much was left
No visibility on the status of a product's certification— did it fail? Why or why not?
Missing link for the consumer— we found that there was a missing link for communication between the third party user and the consumer end-user.

Design

Problem solving clarity

Showing progression

We needed an effective way to communicate where a user was in the process and how much they had left to complete. A simple solution like a progress bar allowed us to give clarity to the user.

Saving progress

Minimizing data loss

The ability to simply save your information along the way because a significant point of friction was data loss in the early days.

Design System

Creating a guide for consistent design

Working with engineering along the way I created a design system that would fit within the overall Samsung ecosystem but was still complimentary to SmartThing's overall branding and design.

I touched everything from typography and colors to designing reusable components like buttons, switches, drop downs and tables.

Final Design

Onboarding profile

Allowing for a streamlined process for third party companies to help communicate their onboarding procedures helped to minimize friction and way for users to troubleshoot common issues like connectivity and linking.

Mobile web

A small feature, allowing for third party users and their stakeholders on-the-go to quickly find out whether or not their device/product had successfully passed or not.