img of the home screen of the app on an iphone

About the Project

Smart home was an app that was created for large company working in wireless networking technology. This company wanted to extend the capabilities of there current line of cameras for home monitoring. They have a working app that allows the user to view and save video taken from the home camera system. Our task was to concept how to extend the interface into smart home automation for the up and coming “internet of things.”

My job was to create concepts, wire frames, visuals, and a prototype. In this project the DDSTUDIO team really had to dig deep in to the logic and structure of how people could potentially use their connected home.


User Information

Name: Kathleen Ellenbach
Occupation: Office Administrator
Age: 45
Goals in using the interface: Kathleen would like to use the interface to set up certain states for her house to be in during different times of the day. She would also like to program her house to be a certain way during certain events.
Tools or devices: The smart phone is the only tool that Kathleen has to interact with her smart home.
Prior Experience: Kathleen is very active on social media and is familiar with the touch and gesture inputs of the smart phone. However, she is unfamiliar with programing logic like “if this, then that” or “if, then, else”.


User Observation

Kathleen is a mother to 12 year boy and a wife to a loving husband. Together they live in a suburban house that is close to a school. Kathleen initially got the smart home for the video cameras after some of the neighbors had their houses vandalized by kids walking home from school. Since setting up the cameras was easy she has decided to get a few more smart objects to help “automate” her home. These items are smart lights and speakers that she can control using this smart home system application.

The visual brand language used in this project was dictated by the existing application. The primary colors are green and white. Shades of grey are used in the supporting elements. Icons were simple and flat viewed from the front with no perspective. Although this was the starting point, we were given some liberties with image, color overlays and use of contrasting colors for notifications in the UI.

The majority of the work in this project was in the logical thinking of how a user will think and interact with the phone to control other devices in their home. Not just controling but programing them to turn on and off with time or triggers. And if that wasn’t enough, our target user is not a programer and wants this application to be “plug and play” simple.


Wire Frames

sample of wireframes for the home automation project

The main area of the User Interface that I worked on was the schedule area. This was the part of the interface that allowed the user to program certain behaviors in select appliances in the house. At the same time the user would be able to set those behaviors to turn on and off at certain times and intervals. This was a big task considering that our target user would not have any experience with “if this, then that” logic statements. In the end we created a “Do, When” method for setting behaviors and then a simple duration picker to complete the setup of a behavior. Behaviors were then easily modified in the timeline. For our advanced users, we created discoverable hold and drag hot spots on the timeline. This gave the advanced user more editing features without having to re-setup a behavior.


Visual Comps

image of the intended visuals for the home automation app

The majority of the visual design was influenced by the existing brand language. Our main focus was to use the predetermined color palette and fonts to create understandable interface elements. Since many of the steps in setting up home behaviors were complex, it was important that desired interactions were visually defined. An icon that the user needed to drag to a new area must look like it can be dragged. The area the icon would land in, needed to look like it would except the icon. Since many of these behaviors would take place while the user was out of the house, confidence that they had set up the behavior correctly was crucial.


Outcome

img of the timeline screen of the app on an iphone

Although this application hasn’t been completely implemented yet, I believe the thinking and structure for the interface is sound. This project pushed me personally to really understand how controls and labels for an interface need to be created in a way that instills confidence in a user. I have learned that is is important to be sensitive to how the end user will see and understand what is happening in front of them so that they can quickly achieve their goals in the interface.