top of page

Alarm.com's AI Chatbot

Leveraging LLM to guide users through their home security set-up

screens.png

The Challenge

Alarm.com, a smart home and business security company, was looking to integrate an AI chatbot into their mobile app to provide support to their users to accomplish complex, interactive tasks.

  • AI Chatbots offer an efficient and convenient way for users to ask questions and receive guidance.

  • Integrating the LLM into the app in a natural and intuitive way requires thoughtful decision-making.

  • The main goal is for customers to learn how to use the app and their devices.

Project Type & Timeline

  • A group project completed for User Experience Design at UVA during the Spring 2024 semester.

  • Project was completed in less than 4 weeks.

  • Team: 3 UED Students with the input from the professor and from our industry client.

Project Details

  • We designed screens to showcase our proposal for how mobile users would
    interact with Alarm.com's chatbot.

  • I led the creation of our designs in Figma and the storytelling structure of our presentation.

The Solution

A dynamic chatbot that engages users through interactive messaging and provides insight into Alarm.com’s complex features and capabilities.

Dashboard.png

Accessible location for user navigation

Chat.png
  • Ghost prompt buttons provide contextual guidance for new users.

  • Overlay design allows chat to sit on top of user's current screen.

  • New badge catches attention when the feature is first rolled out.

Our Process

Industry Research

chatgpt.png
bankofamerica.png
capitalone.jpg
image8.gif

To resolve potential inconsistencies, we first looked at how some of the industry-leading apps are handling the interactions a user can have with an AI chatbot. In the banking apps specifically, their agents function to make complex information more digestible to their users, which is a transferable need for home security. 

  • ChatGPT's question prompts that provide contextual guidance for users who may not know the capabilities of the AI.

  • Bank of America's insights that offer automatically generated summaries of the user's activity.

  • Capital One's messaging style that emulates text interactions.

  • Bank of America's navigation and redirection when necessary to take users to different pages.

User Persona

new.jpg

Anna is a working mom with a busy lifestyle, and she has recently implemented some devices in her home to make her life easier and to conserve energy. She's a new user to the Alarm.com app, and as such, the company would like for their chatbot to help introduce and explain the app's features, eventually converting her into a more experienced user.

First Iterations

Use Cases

We were tasked with handling the scenarios in which the chatbot would interface with Alarm.com's activity summary and video pages.

Low Fidelity Sketch Samples

Activity Summary Scenario

sketch 2.png

When asked a question about content available on the activity summary page, the chatbot will respond with a preview of that information and then provide a button for the user to navigate to the corresponding page so that they can see the full activity summary. 

Video Page Scenario

sketch 1.png

When asked a question about content available
on the video page, the chatbot will respond with a screenshot providing relevant information and then provide an interaction for the user to further
their request
such as adjusting the video settings or navigating to a specific video clip. 

Medium Fidelity Wireframe Samples

Opening Screen

version 1.png

When designing with more intentionality regarding color and style, we designed an opening screen with prompt buttons based on earlier findings from industry research.

Activity Summary

version 2.png

We also translated our sketches into this format to show what the specific interaction would look like.

Our initial designs were based off of the two use cases provided to us by the client (activity summary and video page integrations), along with their goal to convert new users to more experienced users (which for us evolved into the persona of Anna and her needs, as reflected in the text conversations).

Design Review

Following the creation of our draft designs, we presented the current state of our work to our class and to the client to obtain feedback.

Class Feedback
  • Our peers agreed with the use of buttons to provide users with prompts to initiate interactions.

  • Our professor found the integration of video interactions within the chatbot to be intuitive.

  • They all critiqued the idea of a proposed chat history feature.

Client Feedback
  • The client was receptive to our ideas regarding summarizing insights from users' activity logs.

  • Based on our designs, they informed us further regarding the technicalities of their app's capabilities that related to our proposed functionalities:

    • Through personal security codes, users can track who enters their building.​

    • There are multiple features that allow users to automate their security and temperature settings.

    • Most functions, such as adjusting video brightness, cannot be done within the chatbot.

Final Design

With our received feedback and new information about Alarm.com's capabilities, we refined our designs so that they accounted for user and client needs.

Chatbot Set Up and Video Use Case
Chat.png
  • Updated colors for better color contrast.

  • Ghost button design for a cleaner, flatter look.

  • Full overlay to make the chatbot its own section of the app.

Living Room Case.png
  • Messaging style emulates the gray and blue bubbles found in many other chat interactions, giving the user a sense of familiarity.

  • Button allows for user to choose to navigate away.

video request.gif
  • Sliding animations help to demonstrate navigation to and away from the chatbot.

  • Scrolling animations take user to intended destination and show them how to get there for future purposes.

Chatbot Set Up and Activity Use Case
Keyboard.png
  • Prompt buttons provide suggestions for user interaction, especially for new users.

  • Users can also type directly into the chat to ask their own questions.

Kids Case.png
  • Chatbot will always provide the answer to the user's question first if possible. 

  • Navigating away from the chatbot for more information is the secondary option provided by the button.

kids.gif
  • Sliding animations help to demonstrate navigation to and away from the chatbot.

  • Scrolling animations take users to intended destination and show them how to get there for future purposes.

Introducing Features with the Activity Use Case
Housekeeper Case.png
  • When asked a question the chatbot cannot answer, it will let the user know and provide further options.

  • The chatbot can recommend new features to the user in this way.

Access Code.png
  • When navigating away to present a new feature, the chatbot will provide a tooltip for continued guidance

  • Chatbot remains readily accessible at the top right of the screen.

housekeeper.gif
  • Sliding animations help to demonstrate navigation to and away from the chatbot.

  • This method allows for the user to learn more about the app's offerings and organizational structure.

Activity Insights Feature
Temperature Case.png
  • When asked a question the chatbot can provide further helpful information on, the user will receive an additional message with ways to improve their home management.

Temperature Insights.png
  • The activity insights page presents the user with information on how they are doing well and how they can improve, for issues such as energy consumption or home security measures.

activity insights.gif
  • Activity insights appear at the bottom of the chatbot's response as a way for the user to further engage.

  • Users can be introduced and navigate to new features from here as well.

Persona Update
For new users like Anna, our chatbot provides a way for users to get their questions answered in an easy and efficient manner. In doing so, it is also able to teach Anna how to navigate and find items in the app on her own and introduce new and more complex features as they become needed based on her questions. Therefore, it accomplishes the goal of helping to convert new users into more experienced ones as they learn about and explore the app through the bot.

Reflection

  • Our group was chosen as one out of the two top-performing groups (out of eight)!
  • The journey of converting a new user into a long-time, knowledgeable user was an effective method of storytelling.
  • The clients would have preferred if our designs more closely aligned with the current style of their overall app.
  • The clients went out of their way to praise our group for providing our industry research as justification for some of our design decisions.​
bottom of page