User experience design covering all functions of a full smart-home app: accessory overview/control, remote control capability, systemic grouping, historical charts, security notifications, infographic data.

The app design encompassed a variety of product functions which include: smart plugs, smart bulbs, smart switches, temperature/humidity monitors, motion sensors, smoke detectors, and door sensors. 

ServicesUI/UX DesignGenresIoT Consumer ElectronicsToolsSketchWorked withApp Developers


PROCESS:

01

User Scenario


02

Functional Map


03

User-Flow Chart


04

Wireframe


05

UI Design


06

UI Spec


Flow Chart


In defining an easy-to-use user flow, I set out to construct a few screen flows during the initial prototype phases when I took over the entire UI design.

A decision that continued to benefit the project throughout every phase such as opting in new devices, expanding on more functions, while stabilizing the entire app structure even if certain UI reorganizations are required.

Defining User Scenario


Based on design research, the top most encountered troubles for modern homeowners would be as follows:
“Did I lock the door…?”
“Please don’t let the cat slip out the back door.”
“Did I turn off the coffee machine?” “Are the security systems online?”
“I turned off the oven, didn’t I?” “Nobody deserves coming back to a pitch-black home…”

A connected home.

To smartly address these modern troubles with technology, this app would allow Smart Home devices to transform the “house” into a “lively home.”

When you’ve fallen asleep at the end of the day, there is no need to drag yourself up just to turn off the lights.

Forget about forgetting to turn off the lights, they will turn themselves off before wasting any unnecessary power. And when you’re up at the night for whatever reason, the night lights themselves shall light up to assist you.

Purposed design solution


With the basic app structure outlined in these wireframes, design options can be accrued during discussions with PMs, engineering and product team.

UX Specification


Delivered UX specification+assets when handing over designs to developers:

1. Outlining the high-fidelity screen flow with annotations.

2. The Style Guide ensures the overarching structure and cohesiveness throughout UI designs.

Main View of Devices

Infographic “Accessory Statuses” The graph simplifies visual complexities in displaying power consumption, electric bill estimates, and overall power statistics by using colors to distinguish operational devices in an intuitive data display. Users may immediately grasp an overview of power consumption through a glimpse of the graph.

Working Together!

ΣLink allows devices to talk to each other by creating scenes. These connections are shown in graphs of the UI display with an icon representing each device, configuration steps can be easily followed by tapping the ‘next’ button along the process.

“The night is deep, shades automatically fall into place.” “With but a blare of the alarm, intruders are scared away.”

“Then comes morning, the hot water bottle boils at 8:00 AM.”

Device links can be easily configured based on environment and personal needs.

History Review

‘Historical records’ allows users to review all device actions and detections, presenting a holistic sense of home security.

Data is shown in sequenced points and can be reviewed item by item scrolling through the timeline. All device actions are recorded, detailed to every instance a door/window has been opened.

Group Control 

Grouping function allows all grouped smart devices to be controlled through a single button.  For example, deactivate all electrical devices in the living room at once. Grouping functions are designed to incorporate devices such as smart bulbs, plugs, and switches.

Easy Set-Up for Everyone

The installation processes after device pairing/searching can be a bit cumbersome. The user experience design here is focused on simplifying the process as much as possible for users to grasp the controls in the least amount of time required.

The installation process is streamlined with graphs, displaying every action required from device to user. The contents are concise with the least amount of terminology in order to reduce the mental load on users while onboarding.