BACK
Overview
Research
Ideation
architecture
VISUAL Design
Reflection

SAFER ZONE

A mapping application that helps users navigate the safest possible route using safety resources provided by the University of Washington (UW) and local Police databases.

Scroll Down

SAFER ZONE

A mapping application that helps users navigate the safest possible route using UW safety resources, UWPD, and SPD databases.

OVERVIEW

SaferZone is a mapping application created specifically for the students of the University of Washington. It integrates UW safety resources, data from UWPD along with crowdsourced information to recommend the safest route home.

My Role

User Experience Designer
  • Responsible for developing lo-fi interfaces
  • Conducted Usability Testing, integrated feedback into designs
  • Created high fidelity mockups of digital interfaces
Interaction Designer
  • Produced interactive prototypes from high fidelity mockups
  • Pioneered interaction modules and gesture based systems
Researcher
  • Conducted comparative analysis of other UW safety Resources
  • Facilitated semi - structured interviews with UW students
Team Members
Kassandra Franco
Nitya K. Kumar
Duration
10 weeks

Background

2018 brought a significant rise in crime to the neighborhood of the University District in Seattle, home of the University of Washington. Due to UW’s 24x7 library and departmental facilities, a lot of students end up walking home late at night from campus.
Unfortunately, an open campus raises concerns about safety, and additionally, the low visibility, abundance of homeless people, and overuse of drugs in the U-District make it extremely hard to navigate at night.

The Outcome

SaferZone is an all purpose safety application specifically designed for UW students. It introduces SafeWalk, a proprietary feature to calculate the safest walking route taking into account live UWPD data along with self reported user data. Additionally, it is an optimized amalgamation of UW safety resources such as NightRide and NightWalk.

Safer Zone Home Page

Proprietary SafeWalk Feature

User Generated Safety Report

NightWalk Integration

The Process

Research

• Understanding the problem
• Gathering insights
• Goals and Requirements

Ideation

• Conceptualizing solutions
• White-boarding ideas
• Narrowing scope

Usability Testing

• Gaining user perspective
• Re-evaluating solution based on feedback

Design & Prototype

• Building a design system
• Creating interactive prototypes

RESEARCH INSIGHTS

Our research phase consisted mainly of comparative analysis and semi-formal interviews. Knowing how the current solutions were failing was essential to understanding how to move forward. Accounting for those failures would also guide the direction of our design process.
‍
Semi-Formal Interviews
Conducted 4 semi structured interviews as this was during the discovery phase and we wanted to learn about the problem space.
Comparative Analysis
A detailed analysis of comparable safety applications and resources present to UW students.
NightWalk
A UW Police initiative where officers drop students home within the district, late at night.
NightRide
A late night shuttle service for the UW students from campus bus stops to their doorstep.
UW Safety App
A safety application containing links and numbers to various resources

Main Findings

Environment

Users felt very unsafe walking at night due to low visibility, abundance of homeless and fewer pedestrians

Time and Money

Users waste time utilizing inefficient late night transportation services or money uber-ing back late at night.

Resources

Users either lacked awareness of UW safety services or found them lacking in quality (live tracking, inefficient, etc)

How might we ensure student safety and increase campus awareness while walking through University District at night?

Design Requirements

Extracting the commonalities from the research insights, 4 unique design requirements were then outlined to help focus down on what aspects SaferZone would embody.
01

Spread Awareness

Ensure users are aware of the various safety resources they have access to

02

Live Tracking

Allow users to track and get live updates about these safety resources

03

Ease of Use

Present resources in a way that users can easily access and navigate through

04

Community Engagement

Make sure users can successfully engage and inform their community

IDEATION

Taking the design requirements, I then began to ideate various scenarios, outlining the ideal interaction that would serve as the basis of the design solution. This, in turn, gave insights into the features that would be present in the application, and problems that we could solve through our design. 
Story Board
Identified multiple valid information pathways of the application.
White-boarding
Narrowed down list of “must-have” features of the application.

Narrowing Scope and Architecture

Referring back to the problem statement, I decided to narrow down the goal of this project due to time constraints. Student safety and increasing campus awareness were evaluated as central themes to the design solution.
After finalizing this new direction, an information architecture was made that detailed how the functions were spread across the application. This helped bring the team on the same page for our design solution would entail.

DETAILING ARCHITECTURE

Wireframes and Paper Prototypes

Creating wireframes helped get a better feel of SaferZone and the various flows a user could take. These wireframes then got converted into low fidelity prototypes based on three key user flows that we, as a team, decided would be the basis of our usability testing.

User Flows

Based on the new problem statement I created updated workflows that tested out SaferZone's features based on the three new verticals (Safety, Live Updates and Campus Awareness)
Safety: SafeWalk and Call
Live Updates: NightWalk and NightRide
Campus Awareness: Report and Quick Information

USABILITY TESTING

We ran 4 rounds of usability testing, each time iterating our designs to include our feedback. It was important to hear what our users had to say in order to eliminate preconceived biases that had emerged from the research and ideation phases.

View full document here
‍
PROBLEM
Unclear Button Placement
EFFECT
The button arrangement found in the app bar on the home screen confused users and cased issued  with navigation
SOLUTION
• Re-designed App bar
• Buttons now have unified spacing and labels to help identify icons
PROBLEM
Unfamiliarity with Safety Resources
EFFECT
Users were hesitant to utilize new safety functions as an alternative means of transportation
SOLUTION
• Added an introductory guide
• Educated users about safety resources during on-boarding
PROBLEM
Contact Nearby Friends
EFFECT
Users were annoyed that they could only view their nearby friends but then had to leave the application to contact them
SOLUTION
• Created a quick look for friends
• Users can now tap once to view a friends 'last seen' and twice to call.
PROBLEM
Calculation of Safety Route
EFFECT
While users valued the SafeWalk feature they were unsure how the 'risk factor' was calculated for each route
SOLUTION
• Changed risk factor from % to levels (High, Medium, Low)
• Added a screen showing reasoning

VISUAL DESIGN

To create our final designs we had to firstly develop a visual system to bring consistency to our work. After creating our first version we presented our stills to our peers and iterated based on their critique.

First Iteration

We created our first iteration by mainly adding color to our low fidelity wireframes. We played around with various fonts and color schemes but none seemed to fit our visual expectation from the application. Getting critique for solely the User Interface helped us really understand how to tackle these problems.

Pivoting Design Choices

The number one feedback was that SaferZone looked very similar to Google Maps. The initial intent was to make it recognizable and familiar to the audience. However, to create SaferZone's own brand identity, I decided to further this class project and explore this sentiment.
Font
We chose Montserrat due to its readability and familiarity. We didn't want to strain our users’ eyes and so we provided a simple visual hierarchy by using font size and weight to distinguish headings, sub headings, body texts and additional information.
Colour
Our main greyscale colors were used for all the background fills, division lines and boxes. 4 accent colors were used to indicate essential information.

Aa

Montserrat
Lite
Regular
Medium
Bold
#FF7272
#77FF72
#79D0E8
#3C6DD4
#424D5B
#323C47
#29313B
 #D563FF  

Final Designs

After understanding all there feedback from Version 1, I went back to the whiteboard and rebuilt the application. The redesign focused on three main aspects:
     • Reducing the visual load on the user 
     • Giving them immediate access to instantaneous safety features
    • Account for Non Linear Navigation
01

HOME

A place for users to get a general understanding of the multiple features of this application. Provides access to Call, Report and visually represents key areas.

02

SAFEWALK

Provides users with the safest path to their destination while taking into account several factors that might affect their well being

03

NIGHTWALK

A feature that enables users to call a campus police officer to escort them to their destination late at night

04

NIGHTRIDE

A feature that gives users the location and bus schedule of the NightRide transportation. It is a late night bus that drops you directly to your home.

05

CALL

A quick call mode to allow users to rapidly connect with safety hotlines along with their emergency contact and closest friend (calculated based on distance)

06

REPORT

Gives users the power to report incidents that threatened their safety which in turn helps the community as well

07

DANGER ZONES

Tapping the red circles on the map provides users with visual data analysis on the trends in crimes in that area

08

SETTINGS

A way for users to configure their preferences and customize who they provide their location to

REFLECTION

Being the first end to end design project I learned a lot from this experience. This project was my entry point into the world of design which is why I was so passionate to go and redesign SaferZone after the completion of my class. That being said, here are some key points that I learned:
1. Feedback
  • Learning to distinguish good and bad feedback.
  • I can receive contradictory feedback, in which case I have to evaluate opportunity cost.
  • I don't have to implement every piece of feedback I receive. It has to cater to the scope of my project and problem statement.
2. Usability Testing
  • Going through 4 rounds of usability testing helped me get an understanding of how to properly conduct a test
  • Knowing when to help/nudge a user in the right direction without being too obvious
  • Analyzing feedback made me understand the concept of implicit bias

Moving Forward

I got a chance to speak with representatives at UWPD and learned that they were actively working with my department (The Information School, UW) to create a very similar application. They overlook the UW Safety App as well as NightWalk and had learned of the same shortcomings. They gave me insights into a lot more industry constraints to actually creating my app. Interestingly they did ask me for my research and case study so they can use it for their development.
View Other Projects
LinkNow
Spring OS