Alarm.com

iPad App Dashboard Redesign

Alarm.com works on cloud services providing home/business security, smart home, and energy management around the world. Our work focused on tackling some existing design issues for iPad smart-home App and adding event-centered functionality based on each specific use case.

ROLE

TEAM MEMBER

TIME

UX Design

Persona

Low- to High-Fidelity Prototyping

Hankun He (Lead)

Xiang Guo

Chang Xu

Oct 2017 – Dec 2017 (6 weeks)

PROBLEM

Alarm.com realized that some iPad user stopped using their product after downloading it, so they wanted to prevent losing users and increased usability of their product. They hoped to redesign the iPad application.

The layout of the Alarm.com iPad app is just a larger version of the mobile one, which is inefficient for tablet-user. Redesigning the iPad app in landscape orientation, especially the dashboard, could fit the size of the screens using more suitable layout and fulfill users’ needs using more functional features.

Layout on iPhone

Layout on iPad

MOTIVATION

Challenges Analysis

(a) Too much wasted space on the screen.

(b) Unclear meaning of symbols in the navigation bar increase the user’s cognitive loads.

(c) Looking through the whole page by scrolling up and down instead “Above the fold”.

Goals

Offering the user full control and monitoring view by utilizing the entire landscape of the iPad screen

Providing users with quick notifications and entries to the system

Keeping the navigations efficient and intuitive

Allowing users to react quickly to specific troubles (use cases) with minimal human errors

Offering the user full control and monitoring view by utilizing the entire landscape of the iPad screen

Providing users with quick notifications and entries to the system

Keeping the navigations efficient and intuitive

Allowing users to react quickly to specific troubles (use cases) with minimal human errors

PROCESS

Concept of Operations

Easy-To-Follow Interface

Intuitive notifications and navigations. Adaptive light and dark mode according to lighting conditions.

Event-centered Configurations

Pre-set scenes proofing against multiple safety issues based on different scenarios.

Real-time System Feedback & Reaction

Live streaming videos captured in real time reflects system status with auto-saved mechanisms.

Contextual Inquiry

We hired 6 potential users to participate in our contextual inquiry. 4 phone calls, and 2 in-person interview. Then we collected the information from contextual inquiries to learn more about our potential users, including their expectations, key tasks, concerns, and objectives.

Personas

Based on the data we gathered from the contextual inquiry and combined with demographic characteristics of our potential users, we camp up with 2 primary personas guiding us to make design decisions meeting the specific user group’s needs.

We concentrated on two primary user groups: babysitters; and the elderly who live alone.

Persona #1: Babysitter

Persona #2: Seniors Living Alone

Ideation

According to the user requirements generated from the user research, we started our design phase from ideation. We brainstormed a bunch of ideas and selected convincing ones as potential solutions of this project.

– Integrating information within a one-page dashboard provides an at-a-glance view for users.

– Facilitating users to pinpoint features with a functional navigation bar, including intuitive icons with labels.

– Grouping common parameters together to increase utility and decrease the user’s cognitive load (i.e. Multi-equipment control).

– Ordering sections depend on priority levels of information for users, which align with the natural eye-scanning pattern, ‘F pattern,’ from left to right, top to bottom.

– Adding an event-based feature facilitate users to customize their own solution dealing with specific issues.

Prototyping

Figma Workspace

Usability Testing

Testing users under different situations

Final Design (key features)

We tackled existing design issues for iPad smart-home App and adding an event-centered feature based on specific use cases. Finally, we delivered our final prototype through 3 loops of iteration: create prototype, test users, get feedbacks, polish our flow and design.

GENERAL

Light / Dark Mode

To avoid poor readability, adaptive screen-mode for different lighting condition is necessary. The content is positive (dark text on light background) in low-light environments, while the content is negative (light text on dark background) in high-light environments.

Light Mode (Positive)

Dark Mode (Negative)

Navigation Bar

Every single section in the navigation bar includes a section name and the corresponding icon. And the highlighted section indicates the user’s “current location”.

Event-based Section

We added this section based on users’ specific needs, which meant that the user could customize their scene-proof mode and activate or deactivate anyone depending on the particular scenario.

Status Changing

Users could control most sections on this ‘Above-the-fold’ dashboard. Here, I only took changing Security System and Thermostat mode as examples.

Changing ‘Security System’ from ‘Armed Stay’ to ‘Disarming.’

Changing thermostat’s mode from heating to cooling, and vice versa.

USE CASE #1: BABYSITTER

'Child Care' mode ('Event+' Section)

When Mary was preparing for the lunch in the kitchen, she mounted the iPad on the kitchen counter and activated the ‘Child Care’ mode. The system kept tracking Jack’s motion and showed the surrounding status all together on iPad.

LIVE: The camera view highlighted where Jack was.

ISSUES: 2 types of notifications
– Warning: Jack leaved a safe place to an undesirable place, text notification + sound alarm on iPad.
– Urgent Alarm: The motion sensor detected that Jack fell down, text notification + sound alarm.

CURRENT STATUS: This section showed the state of Jack’s current location. Mary checked quickly whether the environment was comfortable for Jack. If not, she changed the status remotely on the dashboard.

USE CASE #2: SENIORS LIVING ALONE

'Intrusion Alarm' mode

When Fiona went back to her room at night, she had no idea about whether she locked the front door or not. So she activated the ‘Intrusion Alarm’ mode on iPad and started watching a movie lying on the bed.

A drunk man was breaking into her house from the front door while Fiona was watching her movie. A pop-up alert showed on her iPad with two options: ‘Check’ in the App; or ‘Cancel’ the alert.

Clicking ‘Check’ to confirm the break-in event, she entered into the ‘Intrusion Alarm’ page to check the circumstance and react to it with the App.

LIVE: The camera view highlighted the stranger’s current location.

TEXT NOTIFICATIONS & SYSTEM REACTIONS:

The text notifications and the video clip update the intruder’s movement simultaneously in real time.
After clicking the salient button ‘Alarm’, the checklist reminded Fiona of the system process set as before, including locking doors/windows, opening lights and call 911.

VIDEO CLIPS: These clips recorded the moments the intruder entered into different rooms and were saved automatically as evidence, which could be used to identify the suspect’s characteristics later.

WHAT I GOT

Throughout the Alarm.com iPad App redesign process, I leveraged the design thinking from end to end. I am aware of the importance of creating personas from contextual inquiries as guidance to making design decisions. Because our strategy mainly focused on use cases for specific user needs, it made much sense and optimized usability and functionality of this product. Eventually, we got the “Top 3 Best Design” out of 27 teams with the guidance of Prof. Gregory Gerling, Prof. Inki Kim, and the design team of Alarm.com.

Top 3 Teams, professors, and The Alarm.com Design Team

> Tweet from the UVA Engineering

> LinkedIn Post from Alarm.com

Incredible Yún Jǐn

Responsive Web Design | Development

Say Hi !

I’m Hankun He, thanks for coming to look at my work. Currently based in Champaign, Illinois, but open to relocation. Having graduated from the University of Virginia in May 2019, I’m looking for a full-time job in the UX design space.

Here is my Resume –>

Feel Free to Contact Me. Let's Chat!

hankunhe@gmail.com

434.227.9517