💡 Inspiration

There were over 1000 crimes in Philadelphia, PA ranging from homicides, rapes, and robberies in just the last 6 months. Additionally, multiple crime reports state that Philadelphia consistently ranks above the national average crime rate.

What’s even more startling is that women who are in college have higher rates of sexual assault victimization and victims of crimes in general. According to the National Institute of Justice, “about one in 20 U.S. female college students is sexually assaulted each year.” Additionally, A University of Pennsylvania study states that “If this national estimate holds true in Philadelphia, then more than 2,000 women will be sexually assaulted each year while attending Philadelphia-area four-year colleges.”

Safety is a huge concern, and our team wanted to find a way to create an application that would allow the user, a female college student in Philadelphia in this case, to feel comfort and access resources easily at their fingertips.

🧩 Problem Statement

Crime rates like sexual assault cases are on the steady rise, especially on college campuses. Female college students do not feel safe traveling alone. How do we make sure female college students feel safe while traveling around in Philadelphia and our campus?

🔎 What it does

PhillySafe is a web app with an all in one tool kit for female college students in Philadelphia, PA. Our targeted audience is for female college students who want to feel safe traveling while they are in the Philadelphia area and on campus. The web app includes four main features: real time crime map/location tracker, calling and recording voice for emergency purposes, text helpline with a sharing location feature, curated resources, and safety tips.

Location tracker/Real-time crime map Once the user gives us access to their location, we could track it for emergency uses and they are also able to check up on the real time crime map provided by the Crime Map API to see which areas are safe and not safe Calling and recording voice for emergency purposes The user could hold the circular button down to call for help instead of having to dial it Text Helpline If the user feels unsafe talking on the phone, the user also has the choice to text with 24/7 hour support pairing with a local emergency official. Additionally, there’s a location button in case you are not able to chat that the user could click on to send the location immediately to the operator Curated resources and safety tips Our team compiled a list of helpful resources and safety tips given by professional research and resources pertaining to the national and Philadelphia demographic

Our goal for the user is to make emergency and resource tools easily accessible for female college students in Philadelphia, PA. Our team understands the prevalence of sexual assault and crime rates, particularly those who are female who do not have access to help in general. Our hope is to make sure our users are able to get the help they need while feeling calm and collected.

💻 How we built it

Figma to create the MVP for the web app. We purposefully chose calm, relaxing colors for the UI/UX to give off the same vibes for the users. Integrated accessible buttons, so it would be more initiative when the user needs help HTML, CSS, JS for the front end Flask, Python for the back end Google Cloud App Engine for app deployment Google Maps API for our location map tracker Twilio for our text messaging system for emergency purposes and for our “911” call (Disclaimer: For testing purposes, we used one of our phone numbers, so we avoid calling 911)

🤔Challenges we ran into

Separate time zones We were working in different time zones ranging from CST, EST, and PST, but we were able to manage by communicating keeping each other updated over on Discord Figma vs HTML It was challenging to convert/translate the UI/UX frontend websites into HTML files. For example, the icon did not show up even when we added it onto the HTML. Time limit Due to the time limit, we were not able to finish a few implementations, but we were able to get them all on our Figma mockup

🎉 Accomplishments

Getting the following pages to work/show up: Home page for project briefing Emergency call page for dialing 911 Crime map page Resources page for potential safety resources Security tips page Text helpline page Profile page

Learning a lot from the design and programming process. Additionally, working and communicating as a team Learning and implementing Google Cloud in the short timeframe we were given Keeping organized on our Google Docs, Figma, and spreadsheet Designing something that feels calm, friendly, and modern Helping female college students feel more safe with our program

We were not experience with Google Cloud

📖 What we learned

UI/UX design thinking Google Cloud Platform Twilio API even though we didn’t implement it Figma implementation Git and GitHub usage HTML, CSS, and Javascript implementation

💭 What’s next

Expand our database/program to other campuses nationwide Implementing short and simple trainings like sexual assault prevention for users to go through in case of any emergency Add more features like adding an emergency contact section and more in the profile section
Conduct user testing, interviews, and research into college students and their concerns with safety to improve our program to best fit and empathize their needs

Built With

Share this project: