A smart home app built just for the Apple Watch. Check on your house whenever and wherever you are. Be it during a jogging session, a business meeting, or any occasion that limits you from using your phone, a glimpse of your Apple Watch would save you from any unneeded worrying.

ServicesUI/UX DesignGenresIoT Consumer ElectronicsToolsSketchWorked withApp Developers


PROCESS:

01

App Architecture


02

Wireframe


03

Icons & Images


04

Visual Design


05

User Interaction


06

UI Spec


Cross-Platform Experience


With the launch of the Apple Watch, ever more personalized smart devices are appearing into our lives, bringing next level design challenges of putting entire smart home apps onto the tiny (42mm/38mm) watch screen.

Outlined in this article are the different scenarios and design intricacies encountered during developing a smart home system app for the Apple Watch.

App Architecture


Adhering to the Human Interface Guidelines for WatchOS.

With principles defining the Apple Watch as an extension instead of outright substitution of the iPhone, the core user flow and information architect would be simplified as much as possible. Focusing on the core three tenets of the smartwatch: ‘fast scroll’, ‘check notification’, ‘one-tap control’, most detailed configurations would be directed back to the smartphone.

Wireframe Development


‘A return to the very roots, simplify when possible.’ It is unrealistic for users to read through the smartwatch for longer than a few seconds, most usability scenarios involve only the receiving of notifications. With that in mind, we decided to focus on the core purpose of the smartwatch during designing the smart home app – to check notifications. Anything further would be directed back to the mobile app.

Easier for Users

Due to obvious limitations with the interface size, I opted to remove all unnecessary elements based on user experience. Focusing on simple on/off appliance controls.


Consistency of Icons & Images

To align the product experience and to eliminate possible confusion between mobile, Apple Watch, and the web app, all product experience, and UI styling adhere to the original iOS app design guidelines.


Glanceable

After specific discussions with the graphic designer, we chose to slightly modify the contrast and color tone values for the icons to better stand out from the black background of the Apple Watch. Increasing overall readability and better comprehension during quick glances and allowing for better selecting of devices from the watch interface.

UI Specification


My roles in this project include defining the specification documents and deep collaboration with developers and designers to ensure an aligned experience amongst the Apple Watch, mobile app, and web apps. It was my responsibility to draw out usability flows and user flow while defining icon and visual guidelines, fonts as well as the color scheme on different user interfaces. This UX document would also be of great benefit in future phases of expansion and function adjustments.

Color Palette


I had drawn from the official Human Interface Guidelines for WatchOS while putting together the color plans, using bright colors to highlight the graphs on the interface. Even when users are glancing at their watches while on the go, their eyes may effortlessly capture the exact text messages.

Clear displays without fault on a black background was the single most important purpose.

Home is where you are.

“Other than to check the time and the possible notification, we don’t really interact with our smartwatch screens.” It is an established user behavior that we don’t press on our smartwatch screens unless absolutely necessary.

Oftentimes it’s in between busy movements that limits us from checking our phones. Which is when the watch screen icons really readable, allowing users to understand the messages and respond with simple actions in a second (example event: humidity over 70%, dehumidifier activated.)

Power Plug

Power functions are assigned to smart switches in a one to one basis, leaving the most bare-bones info displays on the watch: device name, assigned zone (an account may have multiple houses and offices), and the ability to (de)activate through the smartwatch if needed.

Closed / Opened

What’s the status on the houses’ doors/windows/safes/cupboards? Did someone open the backdoor while you’re at the office? The smartwatch will let you know.

Events

Users may easily check the scheduled device actions, triggered events and notifications to fully understand what’s going on back home.

The dehumidifier will activate at 2:00PM. Coffee machine in the kitchen had been turned on at 8:46AM.

Smoke/Alarm

Smoke detectors emergency notification, alarms raised / high CO2 levels detected / smoke detected / fire emergency detected