An app to control your “Made for Homekit” smart fan

Assignment

ProblemMany people have ceiling fans. Most ceiling fans are under utilized for optimal comfort and energy efficiency. They typically have fixed speed intervals and are inconvenient to control and automate.

TaskDesign a solution that enhances the experience of the home ceiling fan and focuses on personal comfort.

ScopeResearch home automation and technology needs for creating a smart fan that integrates with HomeKit. Use Apple’s preliminary User Experience Guidelines for HomeKit and WWDC presentations to inform design decisions. Present app tasks with corresponding user flows and high fidelity screens that demonstrate each task being completed.

BackgroundJohn Hunter and son James C. Hunter invented the very first water-powered, belt-driven ceiling fan with whirling blades in 1886. Hunter Fan & Motor Company was established 1896. They develop the Turek Electric Motor and introduced a new ceiling fan that runs on alternating current. Over the years, Hunter has maintained a culture driven by design and technology. They believe you shouldn’t have to work up a sweat trying to make yourself comfortable. They strive to make Hunter ceiling fans effortless in every capacity—from how you install a fan to how you interact with it on a daily basis. Today, Hunter continues to combine 19th century craftsmanship with innovative design and technology to create ceiling fans of unmatched quality, style and whisper-quiet performance. Their ongoing goal is to make fans that are as tough on the inside as they are beautiful on the outside.

I studied Apple’s User Interface Guidlines for HomeKit, which gave me insight in to various requirements I would need to establish.

Research

Research

I did a deep dive into home automation. I researched potential hardware, such as radiant temperature sensors, that could be used to enhance the focus on comfort. I also found several insightful research studies one of which was the Standards of Human Comfort. The study was conducted at the University of Texas at Austin by the school of architecture. The study gave me an indepth look at the factors that influence human comfort some being physical and some being psycological. A key finding in this study later influenced my color choices for UI.

“The Role of Color. As a further complication, temperature is not completely determined by our sense of touch. The presence of particular colors found in a space can influence our perceptions of temperature as well as climatic qualities. Experiments reveal that rooms painted in hues between blue or green can feel colder than rooms with red or orange walls by as much as 7°F (3°C).”

Research

I disected the official Apple Homekit demo app and tested the Homekit Accessory Simulator app that Apple released for developers. This gave me insight into how accessories are detected and configured. It also gave me details about the device types supported by HomeKit and their respective services.

Research

Once I felt informed on the system requirements of HomeKit, I started defining all the tasks a user could want to accomplish with the app.

Strategy

InsightsHomekit is in beta. Most users will not have a “Home” set up yet. The task of creating a home, rooms, zones and adding devices needs to be as simple and concise as possible.

Users will want to use the home automation integration with Siri. The ability to add devices to a Scene, update a Scene and remove a Scene will be crtical for the in app experience.

After conducting reseach, I answer the following basic questions and use them as a guiding light through out a project.

Product Objectives - What do we want to get out of this product?A brand utility that enhances the user expericnce of a smart ceiling fan.

User Persona - Who are the users we want to reach?Home automation enthusiasts

User Needs - What do our users want to get out of this product?• I want to set up my Home for automation• I want to use Siri to control my ceiling fans

Scope

Design DirectionThe app navigation facilitates accessing devices quickly. A user needs to quickly filter fans by a room or zone if they have several ceiling fans configured.

Color choices are white and shades of blue in order to convey the perception of comfort.

Device controls are playful with subtle audio feedback when controlling the device in realtime. Animations are spring driven with a moderate tension and friction that are quick but not jarring.

The next few pages are a progression of sketches on my white board for the Home Setup user flow. I start by crudely laying out my user flow, visualizing content and making quick changes while I interate until I feel I have a solid concept.

Sketches - Home Setup

Sketches - Home Setup

Sketches - Home Setup

Launch App

Launch

Welcome

Name Home Add Home Success Add Rooms Add Rooms Success

Back Skip

Add Zones Success

Back Skip

Add Zones Rooms

Room 1

Room 2

Room 3

Room 4

Cancel Done

Assign Zones

Zone 1

Zone 2

Zone 3

Done

Add Home

Cancel

Home Setup Complete

Back Exit

1 User can choose to add Rooms. A default room is created by the system which has the same name as the home. Home Setup is complete if the user skips adding Rooms.

1 2

2 User can choose to add Zones. Home Setup is complete if they skip adding Zones. Zones are optional in HomeKit, so default zone is created by the system.

Fans - Empty

Homes Add

Fans

Homes Add

Fan A

Fan B

Fan C

Fan D

Skip Done

A user with no home setup

A user with an existing home

timer

timer

No Fans Setup

3 Users will be directed to the Empty Fans view If no fans have been added to the home. Messaging there will direct users to add a fan.

3

Fan Controls

Exit

Fan

Add Add a Fan

Add a Fan

Tour WalkthroughTake Tour

back back

Select Zone

Cancel Save

Skip

Add Add a Fan

User Flow - Home SetupThis is a detailed user flow that I create once my sketches have started to take shape. It helps to design the full end to end experince and uncover potential problem areas.

Visual Design for Home Setup

Visual Design - Home Setup

Visual Design - Home Setup

Visual Design - Home Setup

Visual Design - Home Setup

Visual Design - Home Setup

Sketches - Fan Controls

The next few pages are a progression of sketches on my white board for the Fan Controls and Scenes user flow. I start by crudely laying out my user flow, visualizing content and making quick changes while I interate until I feel I have a solid concept.

Sketches - Fan Controls

Sketches - Fan Controls

User Flow - Fan Controls

Fans

Homes Add

Fan A

Fan B

Fan C

Fan D

Fan - Dimmer

40

Done Add

drag

Fan - Controls

52

Done Add

dimmer

Fan - Action Sheet

52

Done Add

Add to Scene

Fans

Cancel Add

Get Up

Leave

Return

Go to Bed

Add to New SceneFan A - Controls

52

Done Add

Add

Cancel

“Added to Scene”Notification

Add

Cancel

Fan Settings

Done Edit

Fan Settings Edit

Done

Settings

Edit

Delete

Delete Scene

Done

DeleteCancel

tap

Saved Scene

Adjust Scene

52

Cancel Save

tap

Save

Cancel

This user flow focuses on the following:• Accessing Fan Controls and making adjustments• Adding a fan to Scene.• Adding a fan to New Scene• Editing a fan assigned to a Scene• Removing a fan from a Scene

Visual Design for Fan Controls and Scenes

Visual Design - Fan Controls

Visual Design - Add to Scene

Visual Design - Add to New Scene

Visual Design - Adjust Scene Settings

Visual Design - Remove Fan from Scene