Custom Preset.png

Copy of Two Ways To Improve Apple Home App

How Apple can improve the current Home app design based on usability testing

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.

 

Usability Testing

np_search_426318_000000.png

Define

Before diving into user research, I began by defining who my target users were and what distinguishes them.

Target Users:

  • Men and Women

  • Homeowner

  • Apartment renter

  • Ages 22 - 40

My goal was to interview an older Georgia Tech students who may be more interested in decorating and automating their home utilities.

np_task_1863709_000000.png

Tasks

After defining my target users, I created tasks which interviewees are going to solve. As I provide these, I asked them to simply verbalize their thoughts as they move through the user interface for “Thinking Aloud” testing.

Example Tasks:

  • You just got home and wanted to turn on the bedroom light. Show me how you can do the task.

  • You want to check the accessory status in a kitchen. Browse to the kitchen tab and turn off the kitchen light.

np_feedback_2032570_000000.png

Feedback

After the user testing, I spent some time hearing their opinions on the app.

Ideas I gathered:

  • Two suggested a floor plan-like design for reorganizing the home screen.

  • There’s a room list button on the Rooms tap which four testers weren’t able to find. They suggested enlarging it or use a relevant icon.

 

Problem Statement

During user ability testing, I found:

  • Four interviewees instantly felt overwhelmed as they saw grid button sets.

  • Four interviewees accidentally learned the swipe gesture while they tried to figure out how to navigate to a different room.

  • Three interviewees did not see the room list button on the top of Rooms.

 

Persona

 

Wireframing

I started prototyping ideas with a low-fidelity wireframe on 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 an inspiration from Windows Phone’s “Live Tiles” design by implementing a Manu list on the top of Rooms tap.

 

Hi-Fidelity Prototype

After a few iterations, these are the final designs for Apple Home app. My goal was to ensure the interface seamlessly adopt new additions on top of the original design.

 

1. Floor Plan

As users open Home app, they see the floor plan with the current home summary and temperature at the top. Active buttons have designated colors such as light color or cooling temperature. Users can also create multi-floor layout.

 

2. Rooms

Inspired by Windows Phone UI, I adopted the menu list on top. This UI 1) gives a hint that the swipe gesture is present and 2) provides a new way to navigate rooms. Just like the floor plan layout, multi-floor rooms can be organized in hierarchy.

 

The Second Research

image.png

After creating a prototype, I conducted another usability test. In a same environment, I found five different interviewees doing same tasks using a prototype. Here are a few findings:

  1. All five understood the floor plan design and completed the task.

  2. All five used the rooms list on the top to navigate rooms.

  3. Additionally, two used the swipe gesture for navigation at first. When asked why they chose to swipe, they told me invisible menu items hinted they could swipe.

 

Reflecting on Findings

In the future I would want to improve the visibility of the top rooms list for accessibility. I would also want to dive into Automation based on location, time, and additional triggers to automate home accessories.