Figma Mock-ups

Before our midpoint demo we put together two Figma mock-ups of what our home screen might look like. We then discussed our mock-ups internally, and choose one to show at the demo to get external feedback.

The goal of these two mock ups was to try out different ideas for how to structure and organize our app. Ultimately, we went with the second design, but we present both mock ups below to provide a sense of our app evolution and the decision making process.

Mock Up 1 - Harrison and Gita

The goal of this mock up was simplicity. We wanted all of the app functionality readily available on the home page. For that reason, we have access to location features via the map, we have one button click to sober monitors at events, campus resources, and an emergency contact that could be set. In the bottom tab bar there were options for managing community memberships and user profiles.

For the color scheme we tried to stick to conventional Stanford colors.

Link: https://www.figma.com/file/iwGj0YR5kVn3NsLRDlgVBc/Gita-s-Safety-Homepage?node-id=0%3A1

Mock Up 2 - Nimit

This mock up stuck more to Apple's design system, with colorful rounded boxes and scrolling with feedback. The dark background was deliberate because many of our users will be using this app at night. The personal feed displays events relevant to the user and the ways to get home section connects with other apps like Uber and Lyft.

The bottom tab bar gives users access to all of the different features of our app and allows them to manage their individual profile and membership in various communities.

Link: https://www.figma.com/proto/iuQGkyjDU4e8grubHHyq5Z/Untitled-Copy?node-id=37%3A44&scaling=min-zoom

Final Design Decisions

Considering our midpoint demo feedback and our own internal discussion we settled on a final design that focused on the "night mode" dark color scheme. This was important because the vast majority of our users would be using this app at night, likely in low-light places. For our accent colors we choose colors from the Stanford Identity Toolkit to reinforce that this is a Stanford specific safety app. We considered the following homepage color schemes, ultimately settling on the blue-red-green scheme (with a darker green).

We felt that blue, like the blue lights on campus, was apt for the sober montiors at events. We thought green, like the trees and forestry around campus, symbolized travel and getting home. Red was used because it is often associated with emergencies.