Alarm Manager
A redesign of a mobile web application designed to help cancel or confirm multiple alarms
My Role
- User research, prototyping, UI design
- Interactions and developer handshake
- Stakeholder communication
Goals
- Make fast and easy to use for everyone
- Less confusion around terminology
- More focus on what users actually want
Results
- Decrease in confusion and flow time
- Easily scannable screens and terms
- Decreased amount of operator calls
Alarms are stressful. Navigating a confusing interface with a time limit is even more so.
Alarm Manager, a STANLEY Security mobile web application was created for the purpose of reducing the amount of wasted operator calls and to give users the ability to cancel and confirm alarms for locations they manage, alongside those who work with them. We were tasked with redesigning the experience.

Original design we were tasked with redesigning
The Challenge
How can we create an efficient digital experience in canceling or confirming alarms to increase confidence?
During our initial research, we found the most common complaint was that the existing experience was confusing and made users feel frustrated.
"The buttons are hard for me to reach and there are a lot of glitches I experience. I want to not worry about pressing the wrong thing."
Solution
A user centered interface with concise flows, hierarchy of information, and friendly terminology
By doing a deep dive on what users want and identifying where they’re getting confused led us to a solution that addressed pain points and greatly reduced wasted call time.
We created a mobile web application which eliminates the need to users to download a new app and only exist for helping them complete their desired actions as easily as possible.

The Process
Double Diamond Design Process

Our team decided to use the double diamond design process in our approach for our projects, including this one. Empathy is the core of user experience, and by using a human-centered approach to all stages of thinking, we deliver the best experience possible for people.
Discover Phase
Starting at the beginning
Before diving straight into the redesign process, we decided to take a big step back and start by understanding problems to be solved, opportunities, and identify user needs and wants. We wanted to understand, rather than assume the context of the problem.
How might we...
Reduce unwanted false alarm dispatches?
How might we...
Create a more usable group chat interface for users to make a decision?
How might we...
Make users feel confident they know relevant alarm information and actions?
The users of Alarm Manager are mainly monitoring center managers who are either solely responsible for managing alarms or those on a list of managers responsible for alarms at single or multiple locations.
To redefine the architecture and design of the app, as well as understand our users better, we asked our users to define what are some of the most important questions that come to mind about managing their alarms. Those were shortlisted to top 3:
• What type of alarm is going off?
• How can I more easily see alarm history and who took action?
• How can I trust the text message that’s sent to me for this web app?
Crazy 8 Session
Since a constraint we were given at the beginning from stakeholders involved creating a quick iOS style Alarm Manager redesign, the team (UX director and me, UX designer) held a fun crazy 8 session in which we each sketched out our 8 different ideas for redesign based on key functionality and our hypothesized optimizations. These mockups gained us approval to take a step back, conduct research, and then redesign based on findings.

Collaborative Research Session
Before conducting user interviews, we wanted to understand what questions to ask as well as who are users even are. We held a 3 hour long Figjam collaborative session on mood boarding, identifying needed features, text message copy, and creation of user flows.

Competitive Analysis
We also conducted competitor research and analysis to better understand the competitive space. We identified what our competitors are doing that we aren’t, what they were doing well, and what could be improved. These included ADT Alarm Messenger, Rapid, Alarm.com, and COPS Monitoring.

User Interviews
One of the best ways to learn more about our users is conducting user interviews, so we decided to create key questions and a script. After recruiting four different users, we held remote user interviews discovering more about them and their frustrations and ideas for optimization, taking turns being the interviewer and notetaker/observer.

Define Phase
Early Insights from the Field
During this phase we synthesized our observations about our users, developed our clear problem statement, and pulled out key insights to focus on through mood boarding sessions and creation of customer journeys and personas. The below are our main insights, with three highlighted as most key.
Trust
Uknown sender, lack of trust, may think fraud if they haven’t seen before - RSA token?
System Status
Needs onboarding, copy improvement, clearer actions
Chat
Ability to hide, see who's chatting, way to see who's actioning alarm
System on Test
Almost all wanted the ability to put their systems on test
Alarm Info/History
More description of alarm info, type, and in-depth history wanted
Long Loading Time
Almost all mentioned long loading times, sometimes up to 30 seconds
Notifications
Notifications of actions taken, new messages, and reminders to get call list to respond
Customizable UI
Larger customers may want to brand UI, in Canada people deal with dealers, not STANLEY
Expired Link Info
Expired links should still show information, actions taken, follow up text messages possibly
Personas
Personas were created based on our understanding of major user types as well as their user stories to reflect the target user, their practice, and final goal.

User Flows
Once we had an understanding of our target users, we decided to do a deep dive of the current information architecture and map out the “golden path” for a desired outcome and create user flows for the different key actions that could be taken in Alarm Manager.

Key Terms
One of the main areas of improvement identified was around the copy, more specifically being the key terms used around major actions users could take such as cancel and confirm alarm. We identified potentially confusing copy and major actions we wanted to be clear, and ideated on alternatives with stakeholders.

Key Insights Breakdown
Before the next phase, we wanted to break down key insights, challenges, and identify what each interview had in common and what was unique, what we thought would be most important to include and optimize, and mood board potential designs and practices to fit those insights and on the same page.

Develop Phase
Designing and Iterating before the final phase
Taking our insights and research, moodboards, and action items, we moved into the develop phase where we moved from sketches to low fidelity wireframes and made iterations based on stakeholder feedback.
Sketches
Before jumping into low fidelity wireframes, we held a session where we each roughly sketched ideas based on our mood boarding session and collaboratively worked together to prepare what to wireframe in our next step.

Low Fidelity Wireframes
After we decided on what screens to tackle first, we held wireframing sessions in Whimsical to not get caught up on details and created different wireframe iterations for major screens.

Wireflows
After honing down on our top screens for each major state, we took the low fidelity wireframes and created a wireflow with three major iterations to correspond with identified major user paths and actions that could be taken.

Stakeholder Presentations
After creating the low fidelity wireframes and wireflow, we then held stakeholder presentations and presented the work thus far along with a low fidelity clickable prototype, and made iterations based on feedback in preparation for the next design phase.

Deliver Phase
Creating the Final Product. Let’s get this done!
After iterating and gaining stakeholder approval, we designed the high fidelity prototype, brainstormed usability hub testing questions, gained insights, iterated, created a live usability test, recruited users, and then outlined the screens and design system in Zeplin for better developer handshake.
High Fidelity Prototype Meetings
The high fidelity prototype was created collaboratively with frequent stakeholder meetings to gain feedback and make slight optimizations, and to prepare for testing.

Usability Testing and Insights
Once the prototype was finalized for testing, we held sessions to brainstorm key questions to ask and set up a usability test with 200 users with different demographics and went through the feedback together to pull key insights.

Maze
Once optimizations were made based on usability hub feedback, we created a live usability test in Maze and sent out recruitment emails to our customers who were interested and held live usability testing. Feedback was used to further back up design decisions.

Zeplin
To aid in developer handshake, we used Zeplin which caught small changes that needed to be made for consistency and then outlined the design system and screens. Once we sent the Zeplin and Figma to developers, ongoing communication and stakeholder meetings remained.

Final Product
Alarm Manager allows users to gain control of their alarms and manage in a streamlined, efficient way; mitigating the hassle of previous procedures.
Based entirely around the user, the redesign of alarm manager resulted in a much more user friendly and centric mobile web application that also aids in less operator calls, wasted resources, and accomplishment in company goals.
.gif)
Wrap Up
Takeaways
This project taught me a lot about the importance of user centered design, testing, recognizing potential biases, and stakeholder involvement. It was also a great opportunity to get more experience with different methods of testing and pulling key insights.
What would I do differently next time?
I would consider different approaches to testing and recruitment, and try to involve the larger team more in gaining different perspectives when ideating.
With more time and resources?
I would experiment with different solutions that would aid users, such as wanting to include different live feeds of videos that show activity, and possibly including a map, which we were experimenting with but had to drop due to constraints.