911 Dispatch

Location triaging web app

Overview

“Where in the world is this person!?”

With the dawn of wi-fi calling, police dispatchers are finding it increasingly difficult to locate people who dial 911. All Dartmouth employees can now use wi-fi to make phone calls, but these call usually have incorrect locations. Police officers, who heavily rely on location data to find callers in need, waste precious time.

Partnering with Dartmouth’s IT department, my DALI team created a web app to relay wireless location data to Hanover’s police department.

Project details

Time: Mar - Jun 2020
Tools: Figma, Material design system
Team: Worked closely with a product manager, 3 developers, and 2 designers.

My contributions

1. User research
2. Usability testing
3. Design systems
4. Dark mode

Final Product

How the website works

Only displaying data you need.

Securely log in to access recent cases. Quickly find the most probable location and dispatch officers to the caller in need.

Helping you find callers, 24/7.

Light mode by day, dark mode by night. There are enough stressors in your work –– don’t strain your eyes too.

The backdrop

All Dartmouth employees can now use wi-fi to make phone calls. However, most 911 calls that are made over the internet have incorrect locations. Police officers, who heavily rely on location data to find callers in need, waste precious time.

Luckily, Dartmouth's IT department has installed new technology to locate wi-fi calls placed in Dartmouth's campus. They have asked my DALI team to create a fast and reliable web app to relay these locations to the Hanover police.

Police department in Hanover, NH. Photo taken from Google maps.

User research

For the first two weeks, Geo, Lylia and I interviewed Dartmouth ITC, Dartmouth Department of Safety and Security (DoSS), and Hanover's Police Department.

We learned about the police's current tools, Active 911 and RapidSOS. These softwares help police officers communicate with dispatchers and locate callers who use signal or data. Jive, the wi-fi calling software used at Dartmouth, relays the caller's home or office address, not the caller's immediate location.

We talked to dispatchers and officers to get a better sense of their pain points. Since this project took place in the midst of the COVID-19 pandemic, most of our calls were on zoom or phone. Geo and I, however, got to visit an officer in person and check out the interior of his police car!

Hanover Police car. Photo from Hanover NH PD Facebook Page.

The end user became clear: we were designing for none other than Hanover’s police dispatchers. The goal was not to overhaul the police’s dispatch system but to come alongside their current process. Our product needs to be fast, reliable, and simple.

Usability testing

With a better understanding of the dispatch process, we made some rapid prototypes and brought them to our users. Based on the feedback, I made three key design choices.

Design choice 1: 
use of color

This website presents a dense amount of information, so I found it important to use color strategically. Taking inspiration from Google’s design system, Material, I varied the text color by hierarchy of importance. Furthermore I used the blue primary color sparingly to highlight action items.

Frames and Outlines

20%
#000000
Medium Emphasis Text

60%
#000000
Frames and Outlines

#0288D1
High Emphasis Text

87%
#000000
Primary Highlight
‍‍
5%
#0288D1

Design choice 2:
automatic archiving

After three hours have passed, new cases will be automatically archived. This feature aligns with the police dispatcher’s busy routine.

Design choice 3: 
notification sound

At first, we chose notification sounds that were subtle and pleasing to listen to. However, during a usability test, the dispatcher asked us to make our notification sound as loud and obnoxious as possible. Because the dispatchers work in high-intensity emergency situations, they cannot afford to miss a notification.

Now make it... Dark Mode

I wanted to take the design further so that police dispatchers could comfortably use this web app during evening hours. I constructed the dark mode version following Google’s Material design system.
Instead of the saturated blue, I chose a lighter blue for better visibility.
I added a semi-transparent overlay to the dark grey base to express different elevation levels and distinguish between components.

Hi-fi prototypes

Last thoughts

Outcome

  • By the end of our 10 week sprint, our team launched a fully functional employer web portal for the police dispatchers to use.

Next Steps

  • Improved security
    Because this website contains sensitive data, the security of the website is crucial. While the site is currently password protected, further steps can be taken to ensure the portal is completely secure.
  • Extending the product to more users
    I Within the Hanover area, Dartmouth's Safety and Security officers may also benefit from the web portal. Furthermore, since wi-fi calling is increasingly common, this app may serve as inspiration for a larger-scaled product to help police locate people in need.

Takeaways

  • Take time in the beginning to understand the issue.
    Understanding the technical backdrop of the police dispatch system benefited the entire design process, allowing us to advocate for dispatchers' needs, discuss solutions with the developers on our team, and communicate with our stakeholders.
  • Who you design for is key.
    Design choices that generally appeal to the masses may actually be terrible choices for your end user. Popular or common design trends should be weighed against designs that fit the specific use case.
  • In dark mode, grey is your friend.
    Against a dark background, lighter greys do a better job of showing elevation levels than drop shadows. Understanding the design system for dark mode will go a long way in product design, as more and more users use dark mode to prevent eye strain.

Other Projects