After taking the feedback from user evaluation sessions on our paper prototypes, we made them into annotated wireframes. We made sure to incorporate their feedback on our prototypes so that the improved wireframes would have a stronger fit for their use cases. From user feedback, we made a view of the map the first thing users see (instead of the team app logo), where they can see their location on the map, and the side menu options were simplified or combined so that they weren’t as redundant.
We also modified the sharing feature so that we would default location sharing to turning off when the user reached the destination, as users don’t really need to share location if they’re already in a safe place. That also meant getting rid of the timer, which gave the app more space, and simplifying how location sharing was done.
The core app feature, navigation suggestion, was also adjusted to have bigger direction font as well as quick priority options that users can take if they needed (prominent buttons at the bottom, like location share, make a call, or jump back to my location). This way, users can make emergency actions in a pinch without having to figure out which menu row the option was hidden in.
The wireframes are a clearer construction of what each screen looks like. We created every screen for the full application (whereas for the prototypes, we only mocked up the most important screens). We chose Balsamiq to create the wireframes because it had a rich feature set and collaboration tools. This way we could all edit the wireframes at the same time.
The annotations for each wireframe call out important details on that screen. For example, we emphasized what the coloring and shading on each map represented. The lighting map used dark colors for unlit areas and light colors for well lit areas. However the crime map represents crimes with clickable pins that use red to indicate violent crime and yellow for non-violent crimes. These annotations made it easier to communicate our intentions to users to get more useful feedback, which we would then use to create the high fidelity, final design for our app solution.
At the bottom, we have a visual interface state transition diagram to display our wireframes as well as larger images of each wireframe. The arrows indicate how the user would flow through the screens to accomplish or main user stories. This is basically like the site map and user task flows from before, except this time we are connecting the actual screens together in a way we can concretely visualize instead of labeling boxes on what they represent, and saying that this general idea leads to that general idea.
SafeOwls 