Responsive web providing a better emergency response
for Pittsburgh campus students

Interaction Design Studio @ CMU
1 Month | Nov.2018 - Dec.2018
Team Member
Hongyu Chen, Jingyu Wang

My Contribution
•  Conducted secondary research and guerrilla research
•  Created journey map, wireframe
•  Visual Design and Motion Design



We were given the challenge to provide a better emergency response experience for Pittsburgh campus students in order to improve their safety during the commute.

Problem Space

The key concept is: in emergency response, every second counts.
How to minimize the time needed from people requesting for help, to police issuing help and solving the case along the whole process?

Solution Overview

UbiGuard is a responsive website that provides fast and effective access to immediate help through the interconnection between the students who are in emergency, the residents in the community, and the police.

Real-time Crime Map

•  Provide real-time crime map for the customers to check in order to prevent potential dangers from happening

One-Button Request For Help &
Real-time Evidence Recording

•  Both the victim in emergency and the observer of the emergency can click one button to call the police.
•  While waiting for the police to pick up the phone, people can record the evidence of the emergency.

Real-Time Evidence Checking

•  The homepage for the police-facing website is a real-time crime map where police can see the location of the call.
•  While the police in office is picking up the phone, he can see the evidence of the emergency and take a record of it ( description, severity) at the same time.

In-Time Emergency Response

•  Task Assigning:  the police can immediately assign the police nearby to the scene while he is picking up the phone.
•  Emergency alert: police can send emergency alert to the community nearby.

Emergency Record & Survey For Collection of Evidence

•  Police can see the record of emergencies
•  For each emergency, police can send a survey to a certain range of recipients in the community to collect evidence


Secondary & Guerrilla Research

Since we identified the campus students as our customers and the Police Department as the service provider, we researched the information about the current emergency response situation, interviewed 3 CMU students and a police officer in CMU Police Department. The key findings from the research are as below:

  • On average, it takes more than 2 minutes for the police to answer the call in request for help
  • People in emergency usually cannot stay calm enough to call the police and describe the situation in detail
  • Some residents in the community may be observers of the emergency, but they don't know how to help
  • Police often lacks evidence for further investigation

Journey Map

Based on what we learned in research, we mapped out the current user journey map for the student in emergency, the observer of the emergency, and the police officer.

The journey map helped us consolidate our findings, clarify the stages along the whole process of emergency response, identify the key pain points for the stakeholders, and explore opportunities for design.


Drawing from their research, we created personas for the customers — the student and the resident. We also created the persona for the service provider — the police officer.

We included context, goals, pain points and skills for each persona. This process helped us pinpoint the key mindsets and objectives of different stakeholders, which then guided our ideation and design process.


Scenarios & Storyboards

We started our ideation phase by creating around 20 scenarios. After discussion, we consolidated the scenarios into 4 storyboards for speed dating.

Speed Dating

With the storyboards, we conducted 10 speed dating sessions with potential users of the platform and validated our design concepts. After the speed dating sessions, we decided to focus on the following features for different stakeholders:

Design & Iteration

Site Map

Before prototyping, we created a site map to map out the workflow.

Low-Fi Prototype

• Introduction• Solution Overview• Research• Ideation• Design & Iteration• Reflection


It was a fast-paced project which took only one month, but it covered a lot of practical skills that can be transferred to other projects. My key takeaways from this project are: