Published on | Prototyping: From UX to Front End — Medium Milan Maheshwari Dribbble shot

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 last winters, 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.

Understanding the Product

Before working on this project, I knew a 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.

Understanding the problem thoroughly is essential to design successful solutions.

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

Internet of Things (IoT)

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.

Click here to read and learn more about IoT.

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.

The Problem

Source: machinedesign.com

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.

The Solution

As many people who were using the company’s products were facing this problem, our product team came up with the solution of building a single app which could control all the devices.

This is where the use of developer APIs comes into the picture. APIs or Application Programming Interfaces, in the most general sense, are the lines of code that allow various software components to talk to one another to allow various tasks or actions to happen. Numerous companies now offer APIs to developers for their smart home products. Using these APIs, our developers could build a third party service which would interact with all the devices of various brands.

Thus we could make a single application for our users which would control all their smart devices.

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.

Designing the App

So far so good, and I was ready for the task of designing the smart home app. The rest of the article describes my implementation process of designing the app.

User flow

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

Low fidelity wire-frames

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.

On-boarding

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.

App Interface

I tried to keep the interface a playful and easy to use. It was necessary to ensure a that controlling the devices by a smartphone is an enjoyable thing to do than manually controlling them. Below are the different sections of the app.

1. 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.

2. 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.

a. 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.

b. 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.

3. 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.

4. Notifications & 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.

That’s all folks! Thanks for reading it to the end. This is the first design blog that I have written. Click the clap button if you enjoyed reading and learned something from it.

If you have a project that we can work on, or just wanna talk, inbox me: milanmundra98@gmail.com

Follow me on dribbble for more such designs.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How I designed Otomate – Smart Home App was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How I designed Otomate – Smart Home App

Cool stuff, every week

More Articles