End-to-end App Design:
all-in-one digital safeguard
End-to-end product design for security App with real-time safety information from drone fleet patrols
Duration
80 hours within 4 weeks
Role
UI/UX Designer and Researcher
Before diving into the flow…
Since the pandemic started in 2020 many cities have experienced an increase in crime. According to recent data, crime rates have risen by an alarming 25% in urban areas. This surge has heightened concerns about safety among residents. Under such circumstances, SkyScanner is designed to promote the security of residents in urban areas. The idea is to use drones to monitor criminal activities in real time. Once a criminal activity is identified, law enforcement will be informed for quick response. Local residents can also check for criminal activities in their area to look out for. This project aims to design a MVP for the App.
Process:
User Research, Competitive analysis, Wireframing, Prototyping, Usability Testing, iteration
Tools:
Figma, Adobe Illustrator, Google Docs, Google Sheets, Zoom, Notion
Feature Preview
Introducing SkyScanner
Accurate security information provided by machine-learning powdered drone fleet. Check safety information and post incidents on the go.
Simple and clean dashboard for security information
Check incidents in your area in map view or list view. Filter incidents by types, time or location. See detailed information of an incident and get real-time updates.
Post incidents in your area to notify others
Encountered an alarming incident? Notify others by posting a quick picture with simple descriptions. Notify authority for quick response.
Be aware of trends and criminal rate in your area
Check the safety report for your selected area by different time frames. Stay safe by identifying patterns of incidents.
Research
Research Goals
In order to create an intuitive user experience, it is important to learn the competitor App features and the users’ needs. Learning about competitors will help me define the main functions that are standard for a safety utility App. Understanding the users helps me paint a clearer picture of what features are valuable for users in order to create a seamless experience.
Understanding the Competitors
To understand the competitors, I selected 4 safety utility Apps to conduct competitive analysis. I examined both the UI designs and user experiences of these Apps. I also compared their main functions to map out the features I would like to include in my App design.
Understanding the Users
I conducted interviews with 5 potential users who live in different cities and neighborhoods to learn about their safety concerns and experience using safety Apps to find out how I can address their concerns and cater to their needs in my design.
Topics covered in the survey questions include:
Personal information and living situation
Safety concerns
Opinions about safety information
Experience encountering an incident
Experience using a safety App
After conducting interviews with users, I took notes from our conversations and created an affinity map to organize their input. I categorized users' opinions into different topics and tried to look for similarities and differences in their ideas. Creating the affinity map helped me identify some interesting trends in users’ needs, which provided me with valuable insight for my design.
Key Research Insights
People who live in urban areas tend to worry more about their safety and pay more attention to criminal activity information compared to those who live in suburban areas.
People worry about their safety during nighttime more than during daytime
Most common safety concerns: robbing, physical attack, car breaking, package stealing, homeless people, mentally unstable individuals, irresponsible drivers
Types of security information people are interested in: real-time crime activities in their area, incident updates, transportation updates
People would like to share the information by sending the incident with a click of button to their close contacts, commenting on an incident, or posting an incident they encountered
People wish to know the following information when crime happens in their area: time, crime location, criminal location, people involved, incident update, police presence.
Features users wish to have in a security App:
Real-time and accurate information with incident status update
One click share incidents with close contact
Contact authority (police department, homeless shelter, etc)
Post incidents with pictures, comment and notify authority
One click call the police and share location and personal information
Safety report based on incident history of different time periods
“I would like to know what’s happening nearby, if the crime has been solved, how much and what types of crime is going on in my area.”
“I hope I can upload incidents I witnessed with pictures to share with other people and notify authorities.”
“It will be very useful if I can use the app to call the police with one click when I find myself in an emergency situation, and share location and personal information simultaneously.”
Privacy Concerns Caused by Drones and Possible Solutions
Since the core idea behind SkyScanner is to use drones and machine learning to monitor and identify criminal activities, concerns about privacy have been raised during user research. Although using drones and machine learning models can maximally automate the operation which can drastically increase efficiency, the concerns about privacy and safety are valid, as they can collect and transmit data and images that may infringe on people's rights.
Here are some ways we can address the privacy issue:
1. Compliance with regulations:
Sky Scanner will comply with local, state, and federal regulations that govern drone operations, including those related to privacy and data protection.
2. Transparency and disclosure:
Sky Scanner will be transparent and disclose the data collection practices to the public.
3. Geofencing:
Sky Scanner uses geofencing to restrict drone operations in specific areas, such as private property or sensitive government installations.
4. Data encryption:
SkyScanner uses encryption technology to protect the data collected from drones. Encryption can ensure that data is transmitted securely and is only accessible by authorized parties.
Define
User Persona
As I analyze my research data, I found out my users generally fall into 2 categories: people who live with their family and would like to look out for the safety of their family, and people who are single and live alone or with roommates, especially young women. These are the 2 user personas emerged from the user research:
Meet Steven, a 38 years old product manager who lives with his wife and kid in downtown LA.
Meet Amelia, a 22 years old student who lives with her roommate in Manhattan.
Ideate
Feature Roadmap
Based on my user research and competitive analysis, I created a feature roadmap to define the main functions I would include in my design. Since the objective of this project is to build a MVP for the App, the design will focus on the must-have features at this point.
When I was brainstorming the features, I received feedback about the feasibility of providing users with the option to post incidents. I realized that letting users post incidents will probably increase the budget for customer service to verify the incidents. However, I decided to include the feature in my design because posting incidents is one of the essential features users would like to have based on my user interview. It also provides users with more options to engage with the App.
Sitemap
Based on my feature roadmap and the functions I decided to move forward with, I created a sitemap which defined the basic structure for the App. The five main navigations are incident map, incident list, post incident, security report and emergency call.
User Flow
During my user interviews, most users expressed that they would like to have the option to post incidents they witnessed to notify others. Therefore, I created the user flow of posting an incident. I also positioned Post Incident in the center among all five navigations since it’s the feature that gives users the most control which encourages user interaction with the App.
Design
Low-Fi Wireframes
The design stage started with sketching out the layout of main screens based on my sitemap. Creating low-fi wireframes helped me put my ideas into reality and make changes quickly. My sketches helped me defined the overall layout of the main navigation screens.
Mid-Fi Wireframes
I created mid-fi wireframes for the critical pages under the five navigation menus. Creating mid-fi wireframes helps me decide the general layout for the screens, which set a foundation for the high-fi wireframes. With mid-fi wireframes I can also get quick feedback from users and iterate my design promptly.
UI Component library
The UI style I was aiming for Sky Scanner emphasizes simplicity, trust, and technology. The typeface I chose for the wordmark features a robotic and technological look, which echoes the core idea of using drone fleets to provide security information. The idea for the logo design comes from the double S from Sky Scanner, which also creates an image of a drone.
I chose blue as the primary color for the UI because blue is a color that is commonly associated with trust and security. It's also a calming and reassuring color, which is perfect for a security app. Users need to feel safe and secure when using a security app, and blue is a color that can help convey that sense of security.
High-Fi Wireframes and Prototype
I created the high-fidelity wireframes for the five main navigation pages as well as the personal dashboard page. I created mock-ups for both day-time (bright) mode and night-time (dark) mode. During my user interviews most users expressed that they feel more insecure when they are out at night compared to day time. Therefore, I think the dark mode design is essential for the main function of this app.
Sign-in, Emergency Call, and Personal Dashboard
Incident Map, Incident List, and Incident Details
Post An Incident
Safety Report
Test
Usability Testing
I conducted moderated usability tests on Zoom with 5 participants for this project. All 5 users did the test with their laptop. Users were asked to do the following 5 tasks with the mobile prototype:
Explore different incident types on Incident Map and check details of any incident
Filter incidents based on distance on Incident List and check details of any incident
Post an incident
Check the yearly safety report and see detailed information
Make an emergency call to the police
Priority Iterations
The usability test result helped me identify some issues to iterate on to improve user experience. After collecting feedback from my users, I decided to move forward with the following iterations:
Iteration 1
Add a legend for different colors of the heat map in yearly safety report.
Version 1
Version 2
Iteration 2
Make the Post Under Verification notification more noticeable by adding a pop-up message.
Version 1
Version 2
Iteration 3
Make the instruction for select a category on Post Incident page more distinctive compared to the categories.
Version 1
Version 2
Version 3
My Takeaways
Listen to users' voices
Many core features in Sky Scanner came from users' ideas during the research stage. These valuable inputs from users made the initial conceptualization more complete.
Prioritize the core features
Although we envisioned many incredible features for Sky Scanner, I decided to prioritize the core features in this MVP. This helped me move forward with the project in an agile approach and build a working prototype in a timely manner.
Address users' concerns
To address users' concerns about privacy issues caused by drones, I have considered the privacy issues and made sure that the data collection and transmission process will not infringe people's rights. Privacy will continue to be one of the top priorities in the future development stages of Sky Scanner.