Emergency stop lights Dashboard

Case Study: Enhancing Emergency Traffic Light Monitoring for Rapid Response

Overview

Role: UX/UI Designer
Project Type: Dashboard Redesign
Client: https://gtt.com/
Duration: 6 weeks
Team: 1 UX Designer (me), 1 Frontend Developer, 1 Traffic Analyst, 1 Project Manager

Problem Statement

Emergency responders and traffic controllers were struggling to quickly understand where incidents were occurring and how to act on them using the city’s existing emergency traffic signal dashboard. This led to delays in response time and an increase in manual override errors.

Goal

Redesign the emergency traffic dashboard to:

• Reduce time to identify and respond to incidents

• Improve clarity and situational awareness through visual design

• Increase operational confidence and efficiency

Research

Methods:

• Stakeholder interviews (traffic operators, system engineers)

• Heuristic evaluation of the current system

• Benchmarking against related systems (e.g., Waze live map, dispatch UIs)

• Usability testing with five current system users

Key Findings:

• 80% of users were unable to locate the issue within 5 seconds

• Heavy reliance on external communication (radio) rather than the system

• No clear visual hierarchy between critical alerts and minor notices

• Manual override function was difficult to access under pressure

Design Process

1. Information Architecture
Restructured the layout to focus on a high-level situational overview. Grouped controls by function (Observe, Act, Log).

2. Wireframes
Developed mid-fidelity wireframes in Figma, tested iteratively with key stakeholders.

3. Visual Design

• Introduced a colorblind-friendly palette for signal statuses

• Designed animated emergency vehicle indicators and pulsing alert zones

• Created custom icons for signal types and incident categories

• Incorporated timeline and heatmap visualizations to aid in retrospective analysis

4. Prototyping and Testing
Built a high-fidelity prototype and conducted usability tests with six emergency operators.

Key Metrics (Before vs. After Redesign)

Design Highlights

• Live Alert Cards: Clearly prioritized by severity with regional grouping

• Real-Time Map View: Dynamic visuals for vehicles and flashing intersections

• Analytics Dashboard: Historical data including heatmaps and signal timing logs

• Control Panel: Streamlined manual override interface with confirmation safety checks

Iteration Example

Initial Design:
Alert icons were stacked over the live map. Operators often missed alerts that appeared lower in the list.

User Feedback:
“I only saw the top two alerts. I missed the third incident entirely.”

Revised Design:
Introduced a collapsible alert drawer with severity-level tabs and regional filters, improving visibility and discoverability.

Outcome

• Successfully piloted at three major intersections

• Significant reduction in response time and override errors

• Strong user feedback: “I finally trust the system to show me what I need when I need it”

• Featured in an internal smart city innovation report

Tools Used

• Figma (wireframing, visual design, prototyping)

• Miro (journey mapping, information architecture)

• Maze (usability testing)

• After Effects (conceptual interaction demos)

Reflection

This project reinforced the importance of designing for clarity in high-pressure, real-time environments. One major takeaway was how visual hierarchy and interaction design directly impact decision-making and safety. Designing this dashboard was a practical lesson in balancing complex data presentation with simplicity and speed of use.

Next Steps

• Expand the design system to support responsive mobile and tablet interfaces

• Explore integration of voice commands for hands-free operations

• Collaborate with data scientists to integrate predictive emergency routing features