CS 449 Blog Post
by Team Why Jira: Lu Yang, Yingjie Chen, Yuehan Lin, Yuqi Liu
Introduction
As more and more people lose their job in this hard time, we notice that the number of burglary crimes increases greatly. Residents need to be aware of crimes timely. Therefore, the recent news and awareness of protection motivate us to work on our project, “Safety Guard”. It will inform all residents living in the house and their emergency contacts if someone entered by force.
Customers need a timely alarm for them, since a real-time notification may save their life and properties. Therefore, our group defines the following value proposition.
“Safety Guard” is a timely and secure design. After receiving the alarm from the app, the residences could see the visitor from the real-time camera. They could choose whether to report to the police, and the recorded video is utilized as crime evidence. “Safety Guard” is also useful when the host is away from home, and it will send an alert timely to the host to minimize the loss. Hence, with the help of the “Safety Guard”, customers’ fear of threats to safety and property could be eliminated.
“Safety Guard” supports multi-devices. Each camera could be viewed on multiple phone devices, while each phone device could connect with multiple cameras.
“Safety Guard” is easy for users to install. It contains user-friendly instructions and UI to guide users. It is convenient for customers to install cameras by going through the instructions step by step.
“Safety Guard” regards users’ privacy and information as a top priority. Therefore, it will not access any extra information without customers’ permission.
Empathize and Define
Anticipated Users: Persona and Empathy Map
To identify customers need and target users, we created three sets of personas and empathy maps with people from various backgrounds:
- A designer, Julia Ma, who spends only a few days at home each month: Every Tuesday of a week, she has to ask her friend to go to her place and check if anything is broken or damaged as she stores her important jewelry and manuscripts at home. Her house was rubbered before, and she could not come back home to deal with the theft in time. She hopes to have a device that can notify the police in time and reports any suspicious behaviors around her house.
- A retired Businessman, Peter He, who stays at home often: He stays at home for most of his time as all he needs to do is enjoy his retirement life and work on some hand-making craft for his interests. After hearing the burglary cases from the neighbor, he started to worry that the same situation could happen in his family. He is thinking about using new technology to guard his collection and the safety of his family.
- A graduated international student, Alex Wang, who spends 8–9 hours every weekday at work: She works as a full-time software developer at some technology company in Waterloo. After graduation, she rented a single-bedroom condo near the company that she’s going to work for. Recently, Alex starts to be concerned about her safety because Waterloo police made a post saying that a high-risk offender has been released to the community. She worries that if strangers would break into her condo to steal her valuables when she is away for work. She also worries about her safety when she is at home alone at night.
Exploratory Study Process: User Observation and Interviews
The fictional personas are insufficient, we then create interview and questionnaire questions to investigate more.
For the interview questions, we mainly have three topics: privacy concern, the acceptability of the security system, and the storage method. Therefore, we would like to know customers’ previous strategies to ensure safety and its pros and cons. Also, asking their favorite features helps us determine if we are in the right direction and what else “Safety Guard” could provide for customers. Finally, we want to investigate their choices when storing videos with either cloud service or local SD cards.
For the questionnaires, we think customers’ choices are determined by various factors, including living place, the time of staying at home, age, roommates, and personal experiences. Therefore, our questionnaires will explore the potential types of users.
Exploratory Study Results: Affinity Diagrams and User Tasks
Summarizing the interview results gives this affinity diagram. The bottom literals from the interview are shown at the bottom, then we identify the inferred needs and top-level issues, including better user experience, product design, advanced features, and hardware support.
Let’s look at each top-level issue in detail. For the user experience, there are concerns related to whether the product is convenient to set up, install, and upgrade. We should provide the users with detailed manuals and enough support since there might be lots of users who have no CS-related experience.
Then, product design. One aspect of product design is to support multiple cameras. Some houses may have a backyard while others are very close to the main roads, meaning that they need more than one camera. Moreover, users hope to allow family access to the camera at the same time. Therefore, we need an integrated product design to support multiple cameras and multiple users.
The third top-level issue is supporting advanced features. The most common question that the users asked about is if the product can report to the police in time. So, “Safety Guard” should be effective in sending notifications and alarms compared to existing home alarm systems. Another feature is two-way communication, which allows customers and income to communicate with each other. This feature could be used in lots of daily life, rather than just warning the thieves, for example talking to the delivery person without contact.
Finally, these issues need strong hardware support, for example, night vision cameras and adjustable camera angles.
Ideate
After identifying the top-level issue, we are going to find out and divide user tasks. Also, we use storyboards to find out the scenarios to use the following features, including how to install cameras, how to respond to notifications, and how to view past videos. After receiving feedback from the buddy team, we create sketches and user flows for each feature.
Feature 1: Receive and Respond to Notifications
User Story 1: “I want to stop strangers from breaking into my home when I am away from home”
When the users receive notifications, they can choose either to check the abnormal situation or to ignore the notification. If they tap “check” they will be directed to the video stream captured by that specific camera. Below the video window, there are four actions they can take — — “call emergency contact”, “call the police ‘’, “talk through the camera”, and “take screenshots and create timestamps”. For each action they choose to take, the corresponding icon will be highlighted and other actions that cannot be taken at the same time will be disabled with a grey interface. By tapping the video, three icons will show and allow users to adjust volume, adjust viewing angles, or enter full-screen mode. Users can view the screenshots and timestamps they created in the album for that specific camera by tapping the “back” arrow at the upper left corner of the screen. That screen contains all the information about that specific camera.
Feature 2: View and Check Recorded Videos
User Story 2: “I want to check my previous videos and use it as criminal evidence”
The first screen of this feature is the history page. On this page, users are able to choose three subsections: “Downloads”, “Watch recorded videos”, “Bookmarks”. Firstly, users can choose to watch videos in the second section. After clicking the ‘Video’ icon, they will be able to view a list of recorded videos sorted by time. They can choose to filter the videos by camera or sort them differently. As the number of videos can be really large, we offer a feature for users to bookmark the important videos. After clicking the bookmark button, they just need to swipe back to the history page, click the ‘Bookmark’ section, and view all ‘bookmarked’ videos there. All videos can be downloaded to a local drive. Once people click the ‘download’ button, they can view the video they are downloading on the Download page.
Feature 3: Multi-users and Multi-devices
User Story 3: “I want to view multiple cameras simultaneously on the phone”
The main screen of multi-users and multi-devices features is an instruction page. It indicates that the “Safety Guard” could connect more than one phone device with different cameras. Then, users could install cameras by clicking “Start Now”, adding cameras, and scanning the unique camera QRcode.
The status of the camera contains two types: connected and offline. While connected cameras could be monitored through clicking, the offline camera needed to be reconnected. By swiping left/right, users could swap to different cameras instead of leaving the current page. Also, “Preview all” allows viewing all cameras on one screen, which is convenient for clients to monitor simultaneously. Moreover, to disconnect the camera, users could swipe left to confirm the removal.
Prototype and Test
Low-fidelity (paper) Prototype & Evaluation
Task 1: For the feature “receive and respond to notifications”, we asked the participant to check the notification and adjust the video properties (e.g. volume, viewing angle, etc.), and respond to the notification accordingly. We evaluated almost all the sub-features of receiving and responding to notifications because this is a complete flow that a user would perform with our application if some stranger is trying to break into the user’s home. However, the user can choose one or several of the provided options (e.g. call the police, call the emergency contact, talk through the camera, and take screenshots) as they want.
Users need to understand that they can control over the cameras and check their cameras regularly to ensure that the cameras are online. Users should also be able to respond to the notification and make proper use of the camera to check information.
Task 2: For the feature “multi-users and multi-devices”, we asked the participant to connect multiple cameras to one device. We didn’t evaluate the multi-users part of the feature because we can only evaluate with one participant at a time and it would be difficult for the participant to play several roles at the same time to imitate multi-users. It would also be difficult to test for multiple types of operating systems of a single user. Thus, we will focus on testing multiple cameras and ensure that users’ can connect to several cameras based on their needs.
Design Iteration: Others’ Feedback & Our Evolving Design
Through completing the tests with multiple users, we concluded the following results:
High-fidelity Prototype & Evaluation
The three high-level tasks we choose to evaluate are connecting multiple cameras to the application, responding to safety alarms received from the application, and viewing and managing past screenshots and videos. These three tasks can reflect the main features of our product.
A full demo of the prototype can be found here.
Cognitive Walkthrough Evaluation
A typical complete user flow of our product should be setting up the cameras, actually receiving and responding to the safety alarm, and probably checking and managing past videos later for evidence. Thus, we would like to evaluate the complete user flow and examine the following questions.
Q1: Does the user attempt the expected step?
Answer: For task 1, the evaluator said that he had checked the status of existing cameras already in the previous step so he skipped this one. In task 2, the evaluator also found it was hard to use the fake joystick which doesn’t necessarily match his expectation.
Q2: Does the user notice the available correct option?
Answer: The evaluator thinks the overall design is clean and organized. But for some small features like in task 1, the evaluator did not notice that the page could be swipe to start instead he chose to tap the screen several times. Also in task 3, the evaluator thought the top-right select button is used to select all, but it’s just a button to allow the user to select desirable videos one by one. But other features seem right.
Q3: Does the user’s expectation align with the outcome?
Answer: Most outcomes match. But in Task 1, the evaluator tried to swipe to the next camera, but the area was too close to the deleted area of camera, so he ended up deleting the cameras. In task 2, the evaluator wanted to check the backyard first even though the stranger was at the front door, he couldn’t do so as the preview only showed him the backyard.
Q4: Does the user understand the provided feedback?
Answer: Yes, the user claims that most of the feedback is pretty clear and obvious. The evaluator especially likes the design to separate screenshots and videos, since it provides convenience to view records. He also loves the design of showing the preview of the screenshot at the bottom-left of the video, it’s a clear reminder of a successful screenshot.
UX Heuristic Evaluation
The five heuristics we chose are (1) visibility of system status, (2) the match between system and the real world, (3) consistency and standards, (4) aesthetic and minimalist design, and (5) help users recognize, diagnose, and recover from errors. These aspects provide us direction to evaluate our design from users’ feedback, real-world standards, consistency, and simple designs.
Several difficulties and opportunities are mentioned by the classmates from CS449. For example, when scanning QR codes, there is an opportunity to use a loading icon to inform users of the system status. Another instance is to have an icon saying “swipe down to refresh” or have a refresh icon to inform users about the current status. There are also some aspects where we did well. For example, the icons on the video page (e.g. volume, fullscreen) and the icons on the album page (e.g. select, delete) match the convention we used in the real world such as in YouTube and cellphone photo albums. It provides users with the convenience to understand those icons.
The heuristic evaluation greatly evaluated our design from users’ perspectives in the real world. For example, when calling 911 during an emergency, the banner at the top should be red instead of blue from users’ minds since red is used to specify “emergency” in the real world.
Conclusion
During the design process, the first important concept we learned was that there are several different kinds of clients in the world, so making a good assumption of our clients is important. When we first designed our draft user interface, we didn’t give much feedback or instruction to guide the actions of our users. Therefore, for some users especially those who are not very familiar with technologies, they can easily get confused or hesitate a lot while performing the tasks we give them. We then added more hints to remind them of the usage of certain icons. For senior citizens, they usually expect a bigger font, easier operation, and a clearer picture in the application. Thus, we also learned to consider them and develop some features like ‘zoom in’ to facilitate their usage.
Another important aspect we learnt is to think from the client's perspective. We are getting used to thinking from the developer's perspective. This course is the first time that we get rid of the implementation and design a product from the customer side. During the course, we keep questioning ourselves like, how to test our design without bias, how to minimize the user's task steps, how to design interactive UI. This experience will inspire us in the real-life industry and make us become better developers as well as designers in some way.
One of the limitations we encounter is communication during the design process. With the limit of COVID-19, our team members could only meet each other online. Even though we have many collaboration apps such as zoom, google docs, and Miro to share our ideas, we still found it difficult to convey our ideas purely through digital media. There may be features that need to be improved and tested. We also realize that there may be some limitations to distribute our app into different mobile platforms or incorporate into existing smart home security systems.
In the future, we hope our application can be used to supplant the existing complex setup of home security systems. Additionally, we plan to utilize cloud-based technology to save videos and build trustful databases for clients. It could also be incorporated with a police security app to save evidence of crimes and provide convenience for investigation.
