High-fidelity Mock-up

After taking one more round of peer feedback on our annotated wireframes, we created a set of interactive screens to showcase what the app would look like once it was fully developed.

Feedback on our prototypes was very helpful in helping us polish the final, high fidelity designs. The home page was set to the map, where it would immediately show crime areas, so that users can get instant value from opening the app – they want to know crime hotspots first, because in general it’s already obvious which places have a lot of light and people. We kept the toggle switch, though, between crime and lighting since users still wanted to see larger pools of light that they can stay around. The toggle on the home map screen was moved to just under the search bar – users mentioned they didn’t even notice the toggle at all, so this way it’s more obvious.

We also developed a more attractive login and register screen which helped users feel more comfortable with this app, where we showed a lot of light as a kind of branding to show that this app helps guide users to more light, keeping them safe. The side menu was also made wider, since user feedback mentioned it was too cramped in the prototypes. It turns out even the most basic frames that are common to all apps like login or menu are still important to get right for our app.

One more area of feedback was on the contact sharing screen. Users felt that the location sharing screen in the prototype was too busy and too complex – they’d also feel weird about giving a link to their location on Facebook for anyone to just see. They only want to share their location with trusted contacts, so we revamped the contact screen to be a simple, scrollable list with a fast way to share location with, or call, each member on the contact list. It definitely feels a lot cleaner than the wireframes from the previous stage!

We used Figma for this step, as it also offered easy collaboration over the cloud. The software allowed us to display our design for a pleasing interface that users could interact with as if the application was finished. By clicking through the pages our users could give us one more round of feedback, this time after truly experiencing the functionality.

Design a site like this with WordPress.com
Get started