Custom Preset.png

Reorganizing Smart Home Accessories for Faster Approach - Apple Home Case Study

Reorganizing Smart Home Accessories for Faster Approach - Apple Home Case Study

image.png

At Glance

Length
2 months

Tools
Sketch, ProtoPie

Role
Researching, Designing, and Prototyping (Individual Project)

 

Overview

Apple Home on iOS is a hub for compatible smart home accessories. When connected, customers can use their iOS devices to control and monitor these using the app or Siri.

I enjoy using Apple Home and HomeKit-enabled accessories over Google Home because, as an iOS user, different toggles are more approachable than Google, and the app is more straightforward as well. I was inspired to do this case study after reading John Voorhees’ article from MacStories about why Apple Home app needs a makeover. He mentioned many issues he struggled with, and I chose to break down larger pieces down into smaller, more digestible deliverables. For instance:

Image Credit: MacStories

“Home automation devices vary widely in type and functionality from a simple electrical plug that is either on or off to thermostats that control heating and cooling throughout your home. The trouble with Home’s UI is that everything is represented by the same gray square or rectangular tiles.

Devices have square buttons that are arranged in a grid. Each button includes a small icon, the name of the room to which it’s assigned, the device’s name, and its state. It’s a design that makes device buttons nearly impossible to distinguish from one another at a glance. When something is turned off, everything is gray against a gray background, which requires too much effort to find the right tile. Device names longer than 9 or 10 characters are truncated too, which makes giving unique names to similar devices difficult.”

This part was exciting since I never experienced this issue. I believe it’s because I don’t own many smart home accessories that my Home app icons are not as chaotic as his. I wanted to use my skills to replicate his situation, verify the problem, and make an improvement to the app.

 

Design Process

I followed IDEO’s Human-Centered Design process to make sure my design decisions were correlated with usability research and interview.

 

Persona

To start the process, I created a provisional persona of a potential Apple Home user based on online research.

Persona.png
 

Usability Testing

Based on the story and my understanding of the core functions of the Apple Home app, I developed a few scenarios with a series of tasks, such as:

  • Your kids just arrived home and pressed a doorbell. You heard the sound and want to open the entrance door using the Apple Home app. How do you do this?

  • You want to make sure kids turned off the light before leaving home. How do you check?

To conduct the testing:

  1. I found potential participants who fit the persona in Georgia Tech.

  2. Explain to them you are working on a project and ask for 10–15 minutes of their time.

  3. Give them a few scenarios with tasks to complete on your app.

  4. Jot down notes as they use the app

  5. Smile a lot and encourage them to think out loud.

  6. Take up more time than they bargained for and thank them genuinely for their help.

With this plan, I went to the library in Georgia Tech to find students or faculty members. I verified that they have never used the smart home app before starting the usability test. I tested the tasks with five individuals.

 

Problem Statement

I went through the notes after the testing and redefined the pain points below.

2.png

Pain Point 1: Undistinguishable grid icons

Despite there are different icons and active state to differ, these were not distinguishable enough for customers to instantly find the right trigger. They spent a few seconds scrolling up and down and read the texts to find one.

 
4.png

Pain Point 2: Unclear hint for navigating rooms on the “Rooms” tab

There are two ways for customers to browse rooms on the Rooms tab: a list button and a swipe gesture. However, the list button was not clear for four participants, and five participants learned the existence of the swipe gesture as they tried to figure out.

 

Ideating the Solution

I started prototyping ideas with a low-fidelity wireframe on the iPad. In this wireframe, I implemented inspirations from interviewees. For instance, I loved the floor plan idea, so I decided to implement this idea on the Home screen. I also got inspiration from Windows Phone’s “Live Tiles” design by applying a Menu list on the top of Rooms tap.

 

Prototyping and Validation

I used Sketch to create high-fidelity prototypes of my proposed solutions and used ProtoPie to create a clickable prototype. I tested the prototype with 5 new individuals. Insights from the validation test led me to reiterate on one of the screens. Below are the high-fidelity mockups of my final solutions including the results of the user testing before and after implementing my design solutions.

 

Pain Point 1: Undistinguishable grid icons

Design solution: Reorganize buttons with unique icons on a home floorpan layout. Customers can swipe left and right to see multi floors.

6.png
 

Pain Point 2: Unclear hint for navigating rooms on the “Rooms” tab

Design solution: Change the list button icon to one more related. Add a room layout on the top menu to browse and hint a swipe gesture.

 

Here’s an overview of the results of my design changes.

Desktop.png
 

Takeaways

Apple Home app is arguably one of the best smart home ecosystems. It connects many third-party accessories in one place and offers quick and deeply-integrated controls for iOS users. However, organizing many accessories can be painful, especially there could be same accessories used in different rooms. Hence, to keep the app experience consistently simple, offering a new way to organize accessories can make a huge difference for customers who are heavily invested in the ecosystem.