SecurityVue

Category

User Interface

Project Timeline

4 Weeks

Team Size

1

Project Goal

Design an interface using human-centered principles

finalproduct.png

Project Overview

As technology evolves, the end-user has the comfort of controlling several key operations of their home security from a tablet. 

 

I use the human-centered process to reach a design solution for a home security system app. The human-centered design process is used as a tool to reach a desirable design solution for the user. This process begins with observing your intended target audience, generating ideas, producing prototypes, and testing them.

Project Goals

Research gaps in current home security UI

Design a home security app covering current gaps

Test solutions with users

My task for this project was to build on current UI gaps to depict necessary visualization solutions using a series of screen designs showcasing how a user will operate the tablet console. Users have the ability to control the room temperature in the house, arm the house for away, stay, or night mode, control the lights in each room, and lock their home doors. 

Research

Competitive Audit/Lit Review

To get gain a better understanding for the potential user of my security application, I researched many interfaces for various security apps. Here are a few competitors below: 

adt-2-logo-png-transparent.png
20170111032344_109.jpg
simplisafe.png
90.jpg

After researching various security systems ranging from Lockit, ADT, Ring, SimpliSafe, Alarm and Digoo, a few issues that I found were that the systems did not necessarily match the feel of a security system, as well as, limitations with functionality. Aesthetically, there could be improvements to better suit the users emotional needs but while saying that, it is a security system at the end of the day and the user wants to put full trust into the system he or she is interacting with. For example, it would not be appropriate for a security system to exert a feeling of playfulness through the color scheme, choice of fonts, and its use of icons. There are limited emotional elements being implemented throughout the system interfaces and the connection between user and the action allowed through the interface could vastly be improved through feedback and iconography. The system interface does not have to be designed in a fancy manner, the design must support its audience and the users perception of security. As for functionality gaps, users want to be in control and from the various systems that I researched, users were not given the ability to control different areas associated with their home. Many systems allow the user to control the security of their home and the temperature of their homes. Systems also do not give the user the ability to automatically open garage doors or turn lights/fans on and off. 

Ideation

During the brainstorming phase I like to get an idea for how the interface will be laid out, basic functions that will be present during main-level and sub-level interaction, and aesthetics. I always remain conscious of who my users are and how their needs are met.  

 

Sketching

ideation 1-03.png
ideation 1-01.png
ideation 1-02.png

To begin the sketching process I like to get anything and everything that is in my head pertaining to the project, on paper. I take into account the information analyzed from my competitive audit/literature review as it gives a better feel for how similar apps are designed, what language these apps use, and becoming familiar with the trends between visual elements.

dash_weather.png
ideation 1-04.png
dash.png

Dashboard

I now have a good understanding for who I am designing for and what they need in a home security system. The app will consist of a dashboard and four main features (arming, lights, temperature, and locks) users can experience. During this stage I decided on the app name, logo, and color scheme. I went with a dark blue color scheme because during research I found that blue is often associated with security, stability, confidence, and trustworthy.

ideation_flow.png
secure_home.png
surveillance.png

Temperature/Automation

temp:light:fan.png
lights.png
lights:fan.png

Security (Arm)/Surviellance 

automation.png
temp:light:fan.png
temperature.png

Lights/Fan

Prototyping

After sketching, I moved into Adobe XD to begin high-fidelity prototyping. Having done my wireframe sketches beforehand made the prototyping process more efficient. 

 

Having an app that users can connect with emotionally was something that I focused on through the application of color, icons, and typography. 

 

The decision to have a circular button for the arming feature was inspired by the 'push to start' button in my car. Once users press the button a timer will begin and a line will follow the shape of the circle to inform the user of the systems status.

Creating a prototype becomes easier along the way after you have designed an interface that will serve as a framework or template for the remainder of the interfaces. 

I wanted to keep the interface simple and clean so users perceive it to be an app that they trust and desire to use. 

Usability Testing

 

Usability testing is a way to see how easy to use something is by testing it with real users. Users are asked to complete tasks, while being observed, to see where they encounter problems and experience confusion. Feedback is then collected from the user and then analyzed as the design moves toward the refinement stage.

Participants

  • Dante (23 y/o) — Level of Experience: Beginner

  • Phillip (52 y/o) — Level of Experience: Intermediate

  • Cindy (18 y/o) — Level of Experience: Beginner

  • Jacob ( 21 y/o) — Level of Experience: Beginner

  • Olivia (50 y/o) — Level of Experience: Intermediate

Objectives

  • Observe participants while he or she completes a specific task

  • Participant will rate the task based on the tasks level of difficulty

User Tasks

 

Participants were give 3 tasks to complete while using the app prototype. Here are a list of tasks that were created for user testing:

  • Arm system for home/away

  • Disarm system

  • Turn on/off heating and cooling system

  • Turn on/off lights

  • Open/close garage door

  • Check front door camera

  • Lock all windows in home

Cons

  • Participants found it difficult to differentiate between cooling and celsius

  • Some buttons were too small to recognize

  • Logo is too big through the application, needs to be subtle

Feedback

Pros

  • Icons matched the verbiage, which made it easy for participants to find and complete tasks

  • Participants felt welcomed and in control

  • Tasks were not difficult to complete

Refinement

I was able to get some pretty good feedback from the users that I tested. I can now take the feedback analyzed and begin to refine areas of my prototype where users encountered problems and confusion.

dash_after.png
dash_before.png

After

Before

fanlight_after.png
fanlight_before.png

After

Before

automation_after.png
automation_before.png

After

Before

Final Product

 
finalproduct.png

Closing Thoughts

Three key elements of this project have really stuck with me; iconography, layout design, and user testing. I did not realize the level of importance the selection process was when it came to icons. The way elements on an interface are laid out can determine the amount of time it takes a user to complete a certain action. I think this is key to a successful interface design but of course we would not know until we tested this information with users. Testing was something that I felt comfortable doing but I have come to enjoy the process, especially observing users as they explore my interface design. 

I am pleased with the visual design of the interface, even more so, I am pleased that I was able to design an interface that was desirable for my users. Although my process can always improve, it was awesome to create something from an idea, along a structured path, to a finish that satisfies the needs of the user.