Guardian Page Banner.png
Intro text.png
Guardian Prototype.gif

Brief


What’s the problem?

Every 98 seconds an American is sexually assaulted.
— RAINN

Women need to be and feel safer when walking alone. In a 225-person study done by Stop Street Harassment, 99% of women said they have been harassed on the street and 65% said it’s a monthly occurrence.

Problem Statement

Tools: Post-its + Google Slides

Problem Statement.png
We externalized our ideas and findings to see a holistic view of our problem and solutions.

We externalized our ideas and findings to see a holistic view of our problem and solutions.

Framework

Tools: Post-Its, Sketch

We utilized a five step framework to help scope our project, outline our tasks and create efficiencies.

Framework.png

Research


Competitive Audit

Tools: Post-Its + Sketch

We identified 13 competitors to audit to see what they are doing that is best-in-class. While they have all implemented interesting features, the majority also have complicated navigations.

1-Heuristics Copy 2.png
Externalized findings of vertical specific, similar and out of category competitors.

Externalized findings of vertical specific, similar and out of category competitors.

IMG_5627.JPG

310-person Survey

Tools: Google Forms, Social Media, Personalized Emails

Our goal was to understand the many emotions that a woman goes through while walking alone and how her behaviors respond to those feelings.

Guardian Infographic.png

The Gender Gap

We observed that men and women have different perceptions of danger. A woman has most likely been harassed on the street so there is an innate fear based on those experiences and also from hearing horror stories of what could potentially happen.

Observed patterns between male and female perceptions of danger while walking alone.

Observed patterns between male and female perceptions of danger while walking alone.

Social Listening

social quote.png

Define


Personas

Tools: Post-Its + Sketch

Persona Point Out.png

User Journey

Tools: Post-Its, Sharpies + Cupcakes

We conducted a user journey with potential users to identify their feelings and pain points about walking from point a to point b. Once we understood those feelings we were able to all brainstorm ideas on how to solve those problems. Some of those solutions were then implemented into our app in the form of features.

 
Features identified during the User Journey were then used as part of the Minimum Viable Product (MVP) Session. Level of effort (LOE) for designers and developers were taken into account.

Features identified during the User Journey were then used as part of the Minimum Viable Product (MVP) Session. Level of effort (LOE) for designers and developers were taken into account.

User Journey Validation.png

Minimum Viable Product (MVP) Session

Tools: Google Spreadsheet

Taking a nod from Jamie Levy and Lean UX, we used efficiencies where necessary like digitizing the below user journey and MVP findings via a Google Spreadsheet. We took potential features and dissected how they would ladder up to our Key Performance Indicators (KPI). From there we did ruthless prioritization based on the value of the feature versus the level of effort to implement it.

Findings from User Journey and MVP Session organized based on Jamie Levy’s best practices for UX Strategy.

Findings from User Journey and MVP Session organized based on Jamie Levy’s best practices for UX Strategy.

Information Architecture

Tools: Post-its, Sharpies, Whiteboard, Dry Erase Markers

Similar to the user journey, we used sticky notes for our sitemap and user flows since there were many changes to the foundations of the app as we moved through the different phases of our framework.

Final sitemap for native app and widget.

Final sitemap for native app and widget.

User Flows

A tap-by-tap representation of the flows a user might travel through while using our application.

A tap-by-tap representation of the flows a user might travel through while using our application.

Design


Screen Sketches

Tools: Paper, Markers, Stickers + Post-Its

The main struggle we has was deciding whether to place priority over features for women who are in no immediate danger but don’t feel safe, which will make up the majority of users, or those who run into suspicious activity, which our survey results showed is much less common.

Screen Sketch Mashup.png

Thumb Zone

The thumb zone, or the area that is most comfortable for you to tap, is very important in our app. If someone is held at gunpoint or struggling during a physical assault, they can intuitively navigate the app since all of the main features lie in this area.

We did an impromptu test with left and right-handers to determine the best placement for the Call 911 button. The findings were split so we placed the button in the bottom center and more than tripled the tappable area of a normal button for easy access.

Image from Steven Hoober’s book Designing Mobile Interfaces

Image from Steven Hoober’s book Designing Mobile Interfaces

Ah-ha Moment

Tools: Whiteboard + Dry Erase Markers

We tested with both men and women and the male testers were confused at what the difference was between the anxious button and suspicious activity. We didn’t want to cause confusion but needed to advocate for our female users who immediately feel anxious so we went to the whiteboard and sketched ideas until we were able to combine the two sections into one.

Additional screen sketches on a whiteboard to solve the confusion between the feeling uneasy and suspicious activity features.

Additional screen sketches on a whiteboard to solve the confusion between the feeling uneasy and suspicious activity features.

Wireframes

 
 

Below are our wireframes with justifications of our design decisions. Roll over an image to reveal our reasoning and click on a wireframe to view a larger version.

SHOW ME AROUND: We want to encourage users to go through our onboarding process so they are able to quickly navigate the app in case of an emergency so we’ve made the CTA more prominent than “Skip for now.”

SKIP FOR NOW: While we want users to go through onboarding, we also want to provide them with the freedom to move through the app as they’d like.

PROGRESS BAR: helps orient the user as they move through onboarding.

CREATE CODE: We encourage users to create their unique code to cancel a 911 call.

BACK, SKIP, NEXT: provides the user with freedom to move around the onboarding as they need.

ENTER CODE: Overlay pops up when you tap “Create Code“ instead of bringing you to a new page so the user isn’t disoriented on what task they’re doing. The progress bar doesn’t move forward so the onboarding process seems shorter even though this is an additional step.

FEELING UNEASY: GIF showcasing the appropriate user behaviors will be visible. The user can continue through the process by tapping on the “Next” button.

WIDGET: While this is one of the top priorities for the app, we placed it third in line for onboarding to show the effort-to-benefit before asking the user to turn on a persistent feature that they could see as an interference with other phone features.

SETUP FAVORITES: Brings the user directly to their profile to select contacts and to fill out any additional information to optimize the use of the app.

NAVIGATION: Placed on top of screen to free up heatmapping zone for priority features. Follows Material Design best practices when a navigation system has less than three sections.

FEELING UNEASY: Button is over three times the standard tappable area on mobile devices. Placed inside the heatmapping zone but not as easily accessible as the Call 911 button. Combined the “Just Feeling Uneasy” and “Suspicious Activity” button into one.

CALL 911: Full button in heatmapping area. After testing our designs, we changed the button language from Emergency to Call 911, which is more action oriented and creates a stronger CTA. The button spans the entire width of the screen to accommodate for both right and left-handed users.

This is the screen that the “Feeling uneasy” button brings you to. It automatically turns on your front and back cameras, tracks your geolocation and saves all of the information to the cloud.

HOME BUTTON: Underlined to show the active tab.

SHARE WITH FRIENDS: Button placed out of heatmapping area so it can’t accidentally be tapped when calling 911. Allows you to easily share your location and camera views with friends. You can give permissions to access your camera and location in the Profile settings. you can also adjust which contacts receive these more common updates or who only receives updates when you’re in immediate danger when you call 911.

Once you have shared your location and camera views with friends, you’ll want to send them a confirmation that you’re safe. We’ve also kept the Call 911 button on the screen in the unfortunate event that there is an emergency.

Anytime you tap on the “Call 911” button you will be brought to this screen where you will have four seconds to cancel the call before you’re connected with a dispatcher.

KEYPAD: Initially, the keypad to enter your unique code was immediately visible but users thought that this was the keypad you could use to Call 911 so we added a buffer between entering the code and canceling the call.

After you tap “Cancel Call” on the previous screen, you will be taken to this screen to enter your unique code.

After realizing that users had confusion about the purpose of the keypad, we changed the buttons to squares so they wouldn’t look like an iPhone keypad. Testers responded well to the change.

LOCATION SENT: We provided a list with a checkmark to signify to the user that their call has been placed and they are connected to multiple different people in different ways.

CALL 911: As you will see in our design mockups, we decided to change the interaction of the 911 button when you’re calling 911 so that it can signal to someone who is in distress that the call is being placed since their patience and understanding of the text on the screen will most likely be minimal in an emergency.

We prioritized the quick view widget option because our research and usability testing have helped validate that this feature is what will allow users to contact 911 faster than any other way and could save a life.

WIDGET: This screen shows that the user has turned on the widget. We chose to use a toggle to break up the monotony of the page and to draw the users eye directly to this feature.

QUICK VIEW WIDGET: View of the quick view widget from the home screen or any screen of your phone. The widget takes priority over any app that is open so that it is always easily accessible. You can physically move the widget if it is blocking content on your screen but it will only move within the heatmapping zone and bounce to hug the sides of the screen.

This is the quick view when it is expanded.

LAYOUT: Responsive design of the native app.

CLOSE: The X or button to close the quick view screen is purposefully going against best practices so that it is harder to accidentally close the window when you’re in need of help. It needs to be a conscious decision to minimize the widget.

Responsive design of the native app.

CALL 911: The button will pulse the same way it does in the native app to send a confirmation signal to users.

LOCATION SENT: We initially removed some of this information to allow extra space in such a small window but when we were testing with users they asked for this information before even seeing the native app so we decided to mimic the app.

Responsive design of native app.

FEELING UNEASY: This will track your location and share to the cloud.

A/B Testing

Tools: Paper, Sharpies, Sketch, Invision + Principle

One of our main goals for the design of the app, and mainly the quick access feature, was to make it so intuitive that you don’t need to look at the screen to access the features. We came up with two viable options for approaching the quick access feature and decided to A/B test with potential users to see what interaction was preferred.

Option A

Guardian A:B Testing Interactions 2.gif

Option B

Guardian A:B Testing B Option 2.gif

After testing with 10 potential users, we decided to move forward with option A. While users did think that option B was visually appealing, the majority of testers said that option A would “leave less room for error” if they were in a state of emergency."

Moodboard

Tools: Sketch

Although I was not the UI Designer for this project, we did discuss using red for the panic button as another signifier for users if they aren’t capable of reading in an emergency. We coupled this with a calming blue to try to alleviate the stress of the user.

Moodboard designed by Tatiana Plakso

Moodboard designed by Tatiana Plakso

Design System

style guide.png

Design Mockups

Artboard.png
3 point outs.png

Test


Usability Testing

Tools: Google Doc, Sketch, Post-Its + Sharpies

We defined a test plan based on Nielsen Norman Groups usability test best practices.

Guardian Test Plan Copy 3.png
User feedback on various wireframe versions.

User feedback on various wireframe versions.

IMG_5626.JPG

Deliver


Developer Touch-points

Tools: Paper, Sharpies, Sketch, InVision

We worked closely with developers so we could fully understand the feasibility of the features we wanted to implement.

Developer Checkpoints.png
Discussing level of effort (LOE) for proposed application features.

Discussing level of effort (LOE) for proposed application features.

Feasibility

It’s easy to say that we want to build a widget to set ourselves apart from competitors, but it’s another thing to understand if this feature is feasible. We worked with two developers to understand the possibility of making this app come to life. This is what we discovered:

iOS App + Widget

  • Widget is possible but it’s a heavy and complicated lift to develop.

  • In order to make widget work the native app would need to be open.

  • An alternative option to the widget on iOS would be adding the app to the Siri App Suggestions section.

Android App + Widget

  • Widget is much more feasible than on iOS. Developer would consider it it a medium level of effort.


Big Picture


Before this app can be developed, we will need to fine tune the interactions.

There are several features that we would like to explore in the future, like building an API for safe and dangerous locations based on user feedback. We also want to explore additional ways to signal to the app that you’re in an emergency, including violently shaking your phone to activate the Call 911 flow, a silent mode in case you’re in a situation where you need to be silent but can still call for help, facial recognition and voice activations.

Overall, our UX process has shown that there is a need for this product and for it to be incredibly user-friendly.

100% of testers gave the app a thumbs up.