Week 7: Creating the UX

This week, I created the web interface for SafeSense from the ground up with Flask. I began by creating a clean, mobile-friendly layout with a modern card-style UI featuring rounded corners, shadows, and responsive elements. I developed all of the HTML and CSS myself and arranged it such that the app could scale across multiple devices.

I implemented essential functionality such as login, signup, and personalized greetings. Once logged in, customers are taken to a main menu where they may establish a wake-up name, locate local rest locations (convenience stores) using Google Maps, and customize how alerts are sent. Each action leads to a new Flask endpoint, with user data retained throughout transitions.

One problem was coordinating the layout pieces. The space between the logo and the welcome message felt odd, so I changed the margin and gap settings while learning how to use “rem” units in responsive CSS. Small adjustments made a significant difference in overall polish.

I also built a dynamic alert settings page so users may select from a default name callout, a custom TTS message, or an annoying song. The interface refreshes in real time utilizing JavaScript, which I configured to conditionally reveal input fields without reloading the page.

With the entire UI flow in place, I’ll spend next week on final testing, which includes sending alerts depending on detection events, gathering interaction logs, and evaluating system accuracy through trial sessions.

– James Gu