UX Designer, Graphic Designer, User Researcher
Beacon
Role:
UX Designer, Graphic Designer, User Researcher
Designed as a group project in GD468, myself and 3 other group members developed a safety app catered to college students in the hopes of providing reliable and up-to-date incident reports to ensure safety for all users. This app was highly inspired by other safety apps including, but not limited to, MSU Alert, Life 360, etc. We would then develop a wireframe that walks the users through two separate task flows, showcasing the different features that this app has to offer.
Concept Statement
Students attending university across the country need an app that enhances their sense of safety while navigating their campuses at night, providing real-time alerts and location-specific safety information to reduce anxiety and stress. This app should allow users to quickly connect with friends or campus security for immediate support if needed, and provide educational tools. Fostering a secure, supportive community. By addressing safety concerns with live on campus alerts from students. The app can help students decrease their anxiety, in turn improving their grades.
User-Need Statement
A college student seeks a reliable and safe way to navigate the campus without fear. In doing so, they aim to reduce stress associated with commuting to, and attending class and campus events, ultimately fostering better mental well-being and enhancing academic performance.
User Task Flow
Open Mobile App
Logged In
Homepage
Open Live Map
Navigate to educational page in nav bar
Navigate to warning flag
Opens info page on flag
Scroll through options of safety procedures/maneuvers/tips
Select desired topic to learn (CPR)
Open Mobile App
Open section for Step-by-step instructions
Task Flow #1
Task Flow #2
Task Flow #1
A Michigan State University student is walking on campus at night, and sees police lights in the distance. They are nervous, especially because it is in the way of their route. So they check the like map to figure out what is going on, from a safe distance.
Task Flow #2
A Michigan State University student is having dinner at the dining halls when their friend begins choking. They can’t remember their CPR training, so they open their app and find a tutorial.
Cross Market Analysis
This competitive analysis compares four personal safety platforms—SafeMSU, Life360, Life Alert, and Citizen—across core UX dimensions including purpose, features, communication tools, location sharing, emergency response, privacy controls, and target audience. The matrix highlights how each product supports personal safety in different ways: SafeMSU is tailored to student campus safety, Life360 emphasizes family location tracking and driving awareness, Life Alert centers on emergency response for older adults, and Citizen focuses on real-time public incident reporting and community alerts. From a UX perspective, this comparison helped identify common expectations within the safety app space—such as notifications, GPS/location features, and instant emergency support—while also revealing gaps in areas like medical training, privacy transparency, and public versus private communication. These insights were useful for understanding how existing solutions position themselves, what user needs they prioritize, and where opportunities exist to design a more balanced, trustworthy, and user-centered safety experience.
Affinity Diagram
Design System
Color Pallete
Fonts
Khmer Sangam MN
Wireframes
Key Takeaways
-
First time creating user-interactive prototypes using Figma.
-
Researching and incorporating a brand's particular color pallet to ensure design meets the brand's guidelines.
-
Figma grants you access to a wide variety of tools to help create fully functional animations, wireframes, and prototypes.