RelySafe
Duration: 3 weeks
Role
UX Researcher, UX Designer, UI Designer
Responsibilities
UX Research, Competitive Analysis, User Journey, Personas, Sketch and Wireframe, Prototype and Mockup, & Usability Test
Materials
Mobile Phone, Desktop, & Notebook
Number of Participants
8
Tools
Figma, Google Forms, & Google Docs
Summary
A case study to resolve incidents from a local community through safety awareness and adhere their needs during non-emergencies.
Introduction
RelySafe is an on-the-go crime, safety, and social service app that combines security and assistance for users during difficult situations. The app contains a list of features such as alerts within users' radius, warnings of natural disasters, interchangeable notifications, quick police report, and social media communication.
Problem
Social Services are underrepresented and not many apps are dedicated to them. Therefore, users are not aware of or use the services
Vast resources of social services and other aids are either overwhelming or confusing to find which results in frustration
Too many notifications about crime that is not within the users' radius and unchronological date and time of the news causes confusion
Many users relies on calling, vocalizing, or texting in different apps to spread news and must constantly search for those apps
With little or no representation, users will have to search for information and research websites to seek help for their health and needs. This causes a time delay which is crucial for the user's well-being. Also, information not pertain to the user's location will leave the users unprepared in situations. Thus, this creates a barrier between the users and the reports. In order to solve these problems, I must overcome the following challenges.
Challenges
Finding users who have experienced using social services
Determine How Viable is the app in terms of safety
Identify what prevents users from engaging in services
How to spread communication as a community and share information with others
To determine how the app will be designed, I focus on the four major questions that address the information architecture of the app and needs of the users. Since there is little representation to social service, a target audience that uses these services or have relatable experiences will be difficult to locate. Also, to combine these users and users who are interested in the news will be crucial to the overall flow of the app. In addition, the user experience of the app in regards to safety and delivering safety across network needs to be measured in order to find the right balance for the app's purpose.
Solution
Users can be notified of current news and notifications within 5 mile radius of their location. Users can search crime or other incidents on the map by zip code or city. This delivers quick information beforehand and saves time (I.e. accidents, constructions, or natural disasters) and prevents several notifications.
Current news are updated based on date and time. Users can read, comment, and send to other contacts or send them to messenger from other social media.
Design Process
1
Discover
2
Define
3
Ideate
4
Prototyping
5
Testing
1. Discover
Identify Target Audience
Research
In order to understand the design requirements for the app, I base the audience within these demographics:
-
Age: 21+
-
Gender: Any
-
Ethnicity: Any
-
Resides within the same States for accurate data
-
Crime rate
-
Used Social Services
​
A mature audience is a great start to find more information and gain more perspective for the other age groups. Depending on the number of responses from a certain state will determine the interview process. Out of the 12 participants, 8 of the responses came Arkansas.
Survey and Interviews
Updated news of the situation (i.e. theft, missing person, alerts, vandalism, crime, etc.)
25%
Local social services collaborate into one website app to improve updates locally
25%
Local social services collaborate into one website app to improve updates state-wide
12.5%
A list of local directories to provide options
37.5%
After the survey, I interview potential clients on questions about safety and usage of social services. Clients are more concerned of having a list of local directories and a search engine for faster access to their needs that juxtapose to updated news and combine affiliations. They believed in finding information quickly is efficient and more trustworthy in many aspects including safety.
Competitive Analysis
Citizen
-
Strength: Create videos of the scene and post it on its social media platform for others to be aware
-
Weakness: The social media platform was misused as a casual chat interface. Videos does not have an exact date and time. Users have to scroll over videos.
-
Opportunities: As a crime prevention and safety app, add contact features and quick safety calls from agents.
-
Threats: Great safety awareness via chat with the agent. Users feel more secure and involved of incidents.
My Mental Health Crisis Plan
-
Strength: Helpful sections to locate a particular need or recommendation for therapy services. Specifications for users to write an intervention plan in case of an incident arises saves time
-
Weakness: Does not have contact information or quick access to a medical assistance
-
Opportunities: Create a telehealth or contact information for families and friends to ask questions or concerns
-
Threats: Focus on the underrepresentation of mental health and social workers. Few apps created for this purpose
I review two apps using the SWOT method to understand the apps' functionality and how I can incorporate these principles into the design. ​I find the idea from the Citizen app as a social media platform and from My Mental Health Crisis Plan as a connection to a provider is a great concept. Based on the analysis, I formulate a user flow and personas.
2. Define
User Flow
The objective of the app for the user flow was to assist users the transition from log-in/sign-up to verification before proceeding to the app introduction. It is an important step to get a walkthrough of the app so the users can understand the functionality.
Personas and User Story
I saw a similar pattern in the answers from the participants' interviews. Two personas are constructed based on the interviewed users journey and pain points: client Russell Scott and Amanda Taylor.
​
Russell Scott frustrations are he relies on update information and was not notified of an incident that occur today on his phone as he was driving and had to read more information about it online by searching to other sites.
Amanda Taylor, is concern about her mental health needs and how to reach for help. Her frustrations are: trouble finding contact information and quick access to find them. She has to link outdated sources and fill out contact information as she could not find a phone number or email address. She drives to the facility or spend time searching for aid.
​
With the data collection, I center on the clients common answers into user stories
1. Client: I need a list of directories so it is easier to access without further navigation for non-emergencies.
2. Client: I need alerts to notify me of any news, messages, and situations that are state-wide and locally.
3. Client: I need a way to communicate to my friends, family, and the community for them to be aware of the events
4. Client: I need accessibility to help me use the app without problems
Other points to focus
1. FAQs
2. Customize options that's changeable for the users needs
3. List of ways to share any news to other apps or media
4. Natural Disaster section and notifications
​
3. Ideate
Sketch and Wireframe
From the competitive analysis, I create 8 sketch ideas for each function in the app to reflect and improve each section quickly. My intentions were to have:
​
-
necessary navigational tabs on the bottom with an animation for the report CTA button. Profile and setting icons are placed on the top left corner of the screen for easy access. My direction was to have a scroll animation on selected topics from the home screen and find news similar to the Citizen app.​
-
Draft a report section as a written report based on the Crisis Intervention app
​
This draws the attention of the user and create UI Visuals to interact. The competitor Citizen App uses an animated icon to contact an agent and make reports so I took the idea to give users quick access to non-emergencies.
​
When I designed the wireframe, I decided to add the home screen but without the scrolling animation as it would distract the users during their navigation.
​
-
The introduction section remained the same
-
Three tabs at the bottom for easy function. The profile tab became a navigation section.
​
4. Prototyping
The prototype undergo testing and adjustments were made from client's feedback
-
Updated pictures of people to bring inclusivity and a sense of community. Users feel better if it represents the people.
Changed the font typeface to Inter to add consistency and a modern look to the app
Recreate the map to show the user's proximity of incidents that occurred within 5 miles. New icons are added for easy recognition and label name appear when the user taps on the icon
Features like the upload video and photo are placed on the top to prevent obstruction of the photo
Style Guide
​
-
Blue was commonly seen in law enforcement uniforms and law logos. The color was chosen to emphasis confidence, trust, and stability which I want the users to feel when they trust the app for their needs
-
The grey color brings a neutral tone to the bright white background to break sections for legibility. It is used to fill out information and listing items
-
For the logo, I first chose a scale and a shield to represent justice and protection for the app. I decided with the symbolism of blue, the shield was a better representation for protection and prevention with the primary colors #FFC300 and secondary colors #FFD60A
Design System
5. Testing
Usability Test
Users receive a behavioral usability test via virtually on their desktops. As the result, participants ​responds stating the app was easy to navigate and the features give update information
The participants suggests better layout design and a social media feature in the crime watch section that they can create a post and send information.
After critique, I provided the hi-fidelity prototype with the added feature and responsive patterns. As a result, user engagement increased in the social aspect of the crime watch section.
Conclusion
Users are introduced to a new method of assistance with the RelySafe App.
The app offers crime safety and ​social services to accommodate with just one tab. The app contained features that are convenient such as:
​
-
the weather section with news of natural disaster
-
an interactive social media presence to post and copy update information
-
a location map to search local deputy and services within users' radius
-
and customize notifications to pinpoint necessary data
Users find the app enjoyable to use and showed positive signs of adaptation to the app.
What I Learned
​
-
Mockups appealed to the target audience and were more engaged on the concept and feedback
-
The Interviews were thorough and informative about the crime rate demographics based on their experience as a local to the state
-
The social media platform was proven useful to spread information quickly.
-
Researched different UI Designs to provide responsive designs
In the future, I will research more updates on additional resources needed to connect accurate information of social services and efficient reports