SafeRoute — a UX design case study
Keeping students safe and connected.
Design Interactive Fall ’21 Cohort Project
Background
As students return to school, the issue of campus safety reoccurs. While UC Davis provides students with resources for crime alerts and safe transportation, the efficacy of these tools is questioned as many students still report feeling unsafe around campus. As a result, we were prompted with
How might we help preserve the safety of all UC Davis students?
Over the span of six weeks, our team designed SafeRoute, a human-centered application that provides students with emergency resources and acts as a platform for them to update one another about safe and unsafe areas.
Awarded: Most Innovative UX
Meet the Team
Problem Statement
After some initial research and literature reviews, we developed a more focused problem statement
How might we help students feel safe and connected while traveling to and from school?
Responsibilities and Timeline
Our human-centered project spanned six-weeks. The main platforms we used were Figma, Notion, and Google Surveys.
User Research
Competitive analysis
Our goal was to keep students safe and connected, leading us to look at apps that have a danger report within a community. We found that Google Maps and Waze, though helpful in getting people home, had driving-centered danger reports. These two platforms were not catered to college students that bused, biked, or walked, especially at UC Davis. Our last competitive analysis was on Life 360, which made people feel uncomfortable because they did not want their location to be public all the time. As a result, we found that students stopped using Life 360. Our competitive analysis led us to our goal of providing something everyone could use — a platform that did not compromise privacy and catered to the lives of those that drove, bused, biked, or walked.
Surveys
We conducted two rounds of surveys with a total of 47 students, using our first survey as a way to narrow down our goals and find surface-level insights for our second round of surveys. From there, we were able to find specific pain points, such as students wanting a network to report unsafe areas, seeking emergency routes, wanting quick access to friends and police, and gravitating toward lit and populated areas to feel safe. We reflected on our competitive analysis and found that most students walked, bused, or biked — thus not having any network safety platforms to refer to when traveling to and from school at night.
Interviews
Our five interviews confirmed that students were alert of their surroundings and wanted a quick route to the safest area if something were to happen and, felt more comfortable around lit and populated areas. We found that our users felt most comfortable reaching out to friends and typically went to them for help. A key finding was that students wanted to get home immediately and avoided checking their phones. These insights helped us narrow down how we could make students feel safe and create a community within an app.
Pain points
Our interviews showed us three pain points of our users:
- Sticking to Routine
- Traveling through unlit places or areas that made them consistently uncomfortable based on route routine
- Wanting to get home as quickly as possible
2. Unsure of Level of Reporting
- Students were unsure of whether something was worth reporting
- Feeling uncomfortable reaching out to authorities
- Felt as if reporting was too “official”
3. Hesitancy to Ask for Help
- Not feeling the need to tell anyone if they were able to arrive home safely
- Feeling as if alerting other people or authorities is pointless
Ideation
We then organized our research using affinity mapping. We began by writing out our key insights from our interviews and surveys onto sticky notes, and from there we were able to find common themes in our responses. We used the main insights we gathered to form 3 “how might we” questions to guide our ideation phase.
- Share & Discuss: How might we connect students so they can inform each other about safe and unsafe areas?
- Safely Travel: How might we provide students with safe routes to get to their destination?
- Alert Others: How might we provide students with a quick and unobtrusive way to alert friends or authorities in emergency situations?
Using our three “how might we” questions, we sketched ideas for potential solutions. Some key ideas included creating a discussion forum for students to interact with each other, a navigation system to help students find safe routes home, and providing emergency resources to help students in dangerous situations.
Mid-fi Prototyping
Before starting on a mid-fidelity prototype, we built a general user flow as a guideline to structure the rest of our mid-fi.
Building a user flow allowed us to clarify and flesh out the pain points we wanted to focus designing the mid-fi around. We ultimately decided to prioritize three primary points:
- A reporting system with an integrated forum that allows students to share and discuss with each other about safe and unsafe areas.
- A navigation system that allows students to safely travel by quickly directing them to their nearest safe spot.
- An SOS button located within the app so users can quickly and conveniently alert others, such as their friends or the police.
User Testing
- Making reports was confusing for users because our initial drag and drop function was not intuitive for mobile devices users. We initially had a rating scale for each icon to indicate how strong (i.e., how dark or dangerous an area was). We ultimately decided to eliminate this function and instead leave the comments section as an open-ended way for users to communicate specifics about their report. Our usability testing found that ratings could be very subjective.
- Unclear and unnecessary icons showed us that we needed to be more intentional about our color and icon choices. Initially, we included icons for unlit area, lit area, populated area, and suspicious person reports. We found that:
— Having both a lit and unlit area icon was unnecessary because users would primarily only use the unlit one.
— The suspicious person icon was confusing.
— Users wanted an option for more general or miscellaneous reports.
We narrowed down our reporting options to 3 main icons and gave them symbols and colors to match the meaning and urgency level of each (i.e. red for danger, green for safe populated areas). - Unclear labels and symbols for action buttons (SOS & Safe Route feature) made it confusing for users to identify emergency resources. To make their functions clear, we added text and conducted testing to see which icons conveyed our intended meaning.
Hi-fi Prototyping
Design System
Since our app would primarily be used for nighttime travel, we implemented a dark mode color palette that would help with readability and comfort at night. We chose a bright purple to give the user a feeling of calmness and security. For our icons, we made sure to choose colors that were fitting for their meaning and level of danger, like using green for populated areas. For our typeface, we chose Lato for its simplicity and readability.
Final Solution
View Reports
On the landing page, users can see an overview of the report icons in their area. We chose to give users the option to mark unlit areas, dangerous areas, and populated areas. From this homepage, users can also view and access the discussion forum, which shows reports from other students nearby.
Make a Report
After arriving at their location, users can make reports. Since our research informed us that many people often wouldn’t want to make reports right when they encounter them, we thought prompting the user to make reports after arrival was most effective. However, users can also make reports throughout their travel by clicking on areas along their route.
While making reports, users can add comments to make their reports more detailed and have them posted to the forum for discussion. Users are also able to view existing reports on their viewing area and can add to or comment on them.
Search & Navigation
Users can see an overview of the reported icons and comments before they start their route. Since the reports in the app should refresh after 2 hours, users can confirm whether a report is still applicable or not while they are traveling along their route.
Safe Route
The Safe Route function directs users to their nearest “safe spot” by routing them towards populated areas while avoiding dangerous or unlit areas during navigation.
Alert Friends & Police
The SOS alert function gives users a quick and convenient way to alert friends or police in emergency situations. To make users feel more comfortable using this feature, we made sure to separate the actions of sending SOS signals to friends and police.
For alerting friends, users can choose beforehand which contacts they want to be notified, and they can also add a customized message to send out.
Improvements & Takeaways
Throughout our journey in creating SafeRoute, one of our biggest takeaways was the nonlinearity of the design process. There were multiple times where we had to shift directions, go back to re-examine research, or rethink certain features. For instance, we conducted a total of two different rounds of user surveys, as after the first we realized our direction had changed, and so we had to pivot and quickly conduct a second user survey. We also learned how to quickly consider and incorporate user feedback into new or existing features. In this process we also gained a better understanding of how to conduct relevant usability testing and apply it effectively to make features more intuitive.
As for next steps, we plan to
- further research and implement motivation, as in ways to encourage users to continue to contribute to reports, as well as better ways to guarantee the credibility of reports, as right now we only require app users to sign up with a university-approved email
- explore ways we can accommodate people with disabilities. For instance, incorporating a colorblind mode
- flesh out the safe route feature, for instance by incorporating more detailed map information like police stations, kiosks or designated safe areas
- expand on how we define dark or unsafe areas of Davis
- consider implementing more direct connections between students, such as a walking buddy system
