Imagine a home where everything can be controlled with one tap on your smartphone. You can change the lighting according to your mood, lock and unlock your doors from anywhere, create a perfect environment for watching your favorite movies, and the list goes on. This indeed seems fascinating and sounds like we are living in a magical world, but all these things already exist in reality. Thanks to the Internet of Things (IoT) which makes the concept of a smart home possible.

During the winters of 2017-18, I got a chance to design a smart home application for Smartify that deals with smart home products. This article describes my journey in understanding and implementing the idea of controlling your home with your phone.

Before working on this project, I knew very little about the Internet of Things or the smart home. It was necessary to have a good understanding of the technology, how it works, target users, problems with current products, etc. to provide a solution that works towards improving the user experience.

Before I went on to the design of the app, I made the following things clear in my mind.

Internet of Things

The Internet of Things is an ecosystem of connected physical objects (things) that are accessible through the internet. The IoT is actually a pretty simple concept, it means taking all the things in the world and connecting them to the internet.

Smart Home system

A Smart Home system involves the control and automation of lighting, heating (such as thermostats), ventilation, air conditioning (HVAC), and security, as well as home appliances. It allows you to control devices in your home from a mobile/web device anywhere in the world.

Smart Homes - how do they work?

The Smart Home system is one step towards the Internet of Things. All the smart devices of a brand are connected to a cloud network. There are various brands which offer their services like Nest, Amazon, LG, Samsung, etc. All of them work almost similarly.

Let’s take Amazon as an example. Amazon developed an intelligent personal assistant called Alexa. When a user makes a change to a device setting in the Alexa app, it sends a message called directive to a controller that controls the device. This controller can have multiple devices associated with it and can control them via a device cloud.

Let’s say you turned on a light on the Alexa app. It identifies the concerned controller and sends a directive. Then the controller reads the directive, identifies the light in its cloud and turns it on.

As there are a lot of smart home brands out there, a user may have smart devices of many different brands. But they couldn’t always connect or communicate with each other. The controller for a Nest thermostat won’t read the directive sent by the Alexa app. Thus a user will have to install a bunch of apps for each brand of devices. The abundance of smart home apps that don’t work together leads to a bad user experience.

Suppose you have five smart devices in your home each of which comes from a different brand. Each time you want to control a device, you’ll have to open a new app. That is obviously a frustrating thing to do and the problem increases with more number of brands.

User Demand

I went through the user reviews of the existing apps to know the actual problems the people were facing. Though the apps solved the basic need of controlling devices by a smartphone/computer, there were significant complaints regarding the user interface and interaction elements.

After reading the reviews and through a discussion with the product manager, I found that we need to design an app which makes it really easy to control the smart devices. It should be a bit playful with a smooth overall user experience.

User Flow

Below is the user flow of the entire app. The purple sections represent the main navigation of the app.

Wireframes

These are the initial sketches that I prepared before designing high fidelity interfaces. Paper and pen is a convenient way to put your ideas together and analyze different solutions.

Onboarding

Being the first interaction of the app with the user, the on-boarding process is a very important part of the design. It gives the overall look and feel and guides the user through the app’s features.

My Home

My Home contains all the smart device controls in your home. The devices are divided into a room-wise and device-type hierarchy. This is useful when a user has many devices and he has to find a particular device. For less number of devices, he can always go to the All Devices section.

Automation

While we can control the devices using a smartphone, there is something more which smart homes can do. A device or a group of devices can be programmed to a specified setting which can be triggered to give personalized environments, workflows or schedules.

"Automation is the technique of making an apparatus, a process, or a system operate automatically."

Scenes

Scenes let you create personalized environments according to your mood. A scene can be triggered with a touch on the Activate button. Scenes are basically third-party settings in our app so they can’t be edited.

Schedules

Schedules are used to change the devices’ settings for a duration of time. These can be used to create routine scenes for the user. One advantage of schedules is that they aren’t third-party settings, so we can easily edit a schedule and create new schedules according to our need.

A schedule has two things:

Devices - Add devices and change their attributes according to schedule.

Timing - Set the duration and repeat options.

Favorites

The favorites section is a dashboard of frequently used devices for quick access to their settings. On touching a particular device, a bottom slider comes up with the device controls.

Notification and Settings

Notifications can pop up on any screen. They are displayed date-wise on a separate Notification screen. The Settings screen contains options for adding new devices, syncing, additional information, help, etc.