Real-Time Insights: Enhancing Traffic Alert Management in a Smart City
Overview
Project: Improving the management of critical alerts and events within the ITS (Intelligent Transportation System) platform.
Role: Senior Product Designer & Researcher
Tools: Figma, Adobe Illustrator, Include and A11Y Plugin, Miro, Jira
Impact: Streamlined critical alert response, reduced response time by 40%, enhanced situational awareness, and improved user satisfaction by 20%.
Role: Senior Product Designer & Researcher
Tools: Figma, Adobe Illustrator, Include and A11Y Plugin, Miro, Jira
Impact: Streamlined critical alert response, reduced response time by 40%, enhanced situational awareness, and improved user satisfaction by 20%.
User Personas and Research & Discovery
User research involved interviews and observations of real users. To better understand their needs, I created detailed personas representing the primary system users.
User Interviews & Observations: Spoke with traffic operators, engineers, and emergency response teams to identify challenges.
Competitive Analysis: Examined similar platforms like Waze, Google Traffic, Yunex, Kapsch, CHARM, and Transmax to identify best practices.
Data Review: Analyzed alert frequency, response time metrics, and system usage logs.
Usability Testing: Conducted A/B testing to compare different alerting mechanisms and search functionalities.
Key Insights
Operators needed a dashboard-based overview to quickly manage alerts and incidents.
Contextual data within alerts (e.g., real-time traffic, weather conditions) was missing but crucial.
Persistent pop-up confirmations frustrated users, slowing down workflow.
The search system was ineffective, making it difficult to locate relevant alerts.
AI-driven automation could improve detection and response time.
Through my research, I identified that Alex Morgan persona (Traffic Operations Controller) struggled with information overload due to excessive alerts, leading to delayed responses. This insight directly shaped my solution to introduce a widget-based dashboard for prioritization.
James McGregor persona (Executive Manager) needed high-level reports rather than granular alerts. This led me to design an executive dashboard summarizing key transport performance metrics.
✅ AI-Powered Automated Incident Detection and Response → Designed to support Alex Morgan, who needs real-time assistance in identifying incidents quickly.
✅ Widget-Based Dashboard → Created for operators like Alex, who needed a way to declutter alerts and prioritize incidents efficiently.
✅ SCADA Dashboard for Tunnel Operations → Tailored for personas like Jamie Carter, who focus on data validation and ensuring system integrity.
✅ Executive Dashboard → Designed specifically for James McGregor, who needs an overview of network performance rather than hands-on operational tools.
Problem Statement
The ITS platform is responsible for managing alerts and events in real time to ensure the safety and efficiency of transportation systems. However, the previous alert management system had several challenges:
Delays in detecting and responding to traffic incidents led to worsening congestion and slower emergency response.
Information Overload: Operators struggled with a cluttered interface that displayed excessive alerts, making it hard to prioritize critical situations.
Inefficient Workflow: Operators had to navigate multiple windows to complete essential tasks like creating events and responding to alerts.
Lack of Contextual Awareness: Alerts lacked relevant metadata, forcing operators to cross-reference multiple sources to understand the situation.
Poor User Experience: The interface was unintuitive, requiring multiple clicks to take action on urgent alerts.
Delays in detecting and responding to traffic incidents led to worsening congestion and slower emergency response.
Information Overload: Operators struggled with a cluttered interface that displayed excessive alerts, making it hard to prioritize critical situations.
Inefficient Workflow: Operators had to navigate multiple windows to complete essential tasks like creating events and responding to alerts.
Lack of Contextual Awareness: Alerts lacked relevant metadata, forcing operators to cross-reference multiple sources to understand the situation.
Poor User Experience: The interface was unintuitive, requiring multiple clicks to take action on urgent alerts.
Before and After screens for Major Events
Solution & Design
1. AI-Powered Automated Incident Detection and Response
✅ Integrated AI and machine learning to analyze live traffic camera feeds and sensor data, detecting incidents (e.g., accidents, stalled vehicles) in real time.
✅ AI suggests optimal response strategies, such as rerouting traffic or adjusting signal timings.
✅ Faster detection and response minimized congestion and ensured quicker clearance of roadways. Security was a critical consideration in the design of the ITS platform, as any disruption or manipulation of the system could have serious consequences for public safety. Designed the system with redundancy and failover mechanisms to ensure high availability and prevent single points of failure. Collaborated with engineers to implement secure communication protocols for data transmission between traffic cameras, sensors, and the central dashboard. Implemented role-based access control to ensure that only authorized personnel could access and modify critical system settings. Considered potential threats such as unauthorized access, data manipulation, and denial-of-service attacks, and designed the system with security in mind.
AI Confidence Threshold is Adjustable:
Operators can fine-tune AI alert sensitivity, reducing unnecessary alerts while ensuring critical incidents are caught.
This prevents alert fatigue while still allowing AI to assist in decision-making.
✅ Explainability is Integrated:
The Confidence Score (80%) is displayed clearly, justifying why AI categorized the event as high priority.
The AI Reasoning panel gives a transparent breakdown of the logic behind AI’s decision (e.g., congestion spike, sudden braking).
This aligns with Explainable AI (XAI) principles, helping operators trust AI recommendations.
✅ Human Override & Review Actions:
Operators have clear options to override AI alerts, escalate, or dismiss them.
This ensures AI remains a decision-support tool rather than an automated enforcer.
✅ Multi-Modal Data Sources for Verification:
AI alerts are supported by traffic cameras, GPS, 911 calls, and sensor data.
This enhances situational awareness, reducing false positives.
Implementation ML-Powered Roadmap for Traffic Congestion Management
2. Widget-Based Dashboard for Critical Alerts
✅ Designed a widget-based customizable dashboard (inspired by Gridstack draggable widgets).
✅ Users can create custom templates, copy, save, or delete widgets.
✅ Widgets include recent alerts, planned events, high-priority alerts, device failures, current congestion, and traffic trends.
✅ Enables operators to prioritize and respond to high-priority alerts quickly, improving efficiency and situational awareness.
✅ Users can create custom templates, copy, save, or delete widgets.
✅ Widgets include recent alerts, planned events, high-priority alerts, device failures, current congestion, and traffic trends.
✅ Enables operators to prioritize and respond to high-priority alerts quickly, improving efficiency and situational awareness.
• The dashboard design was informed by extensive user research with traffic operators. I focused on creating an intuitive interface that would reduce cognitive load and allow operators to quickly identify and respond to critical alerts.
• The real-time monitoring of traffic flow presented similar challenges to network monitoring, requiring the ability to process and visualize large amounts of data to identify anomalies and potential issues.
3. SCADA Dashboard for Tunnel Operations
✅ Conducted a detailed analysis of existing SCADA systems (e.g., Wales setup) and identified missing functionalities.
✅ Designed a dedicated SCADA tunnel dashboard with:
✅ Designed a dedicated SCADA tunnel dashboard with:
• Real-time alerts and device monitoring.
• Emergency plan activation.
• Tunnel equipment oversight.
✅ Operators gained a clear, centralized overview, enabling faster decision-making and emergency response.
4. Improved Alert System with Toaster Notifications
✅ Replaced intrusive persistent pop-ups with non-intrusive toaster notifications.
✅ Introduced high-priority alerts for stopped vehicles, ensuring urgent issues get immediate attention.
✅ Allowed users to dismiss or review alerts later, improving workflow efficiency.
📈 Results: 25% increase in task completion, 20% improvement in overall user satisfaction.
✅ Introduced high-priority alerts for stopped vehicles, ensuring urgent issues get immediate attention.
✅ Allowed users to dismiss or review alerts later, improving workflow efficiency.
📈 Results: 25% increase in task completion, 20% improvement in overall user satisfaction.
5. Schematic Map Redesign for Accessibility & Visual Clarity
✅ The CAD-generated schematic map was visually unappealing and inaccessible.
✅ Researched competitors (Yunex, Kapsh, Transmax) and redesigned the schematic using Adobe Illustrator.
✅ Improved color contrast, stroke lines, and markers to enhance readability and accessibility.
✅ Integrated the 'Include' plugin in Figma to ensure real-time accessibility compliance.
📈 Results: Improved clarity and inclusivity for visually impaired users.
✅ Researched competitors (Yunex, Kapsh, Transmax) and redesigned the schematic using Adobe Illustrator.
✅ Improved color contrast, stroke lines, and markers to enhance readability and accessibility.
✅ Integrated the 'Include' plugin in Figma to ensure real-time accessibility compliance.
📈 Results: Improved clarity and inclusivity for visually impaired users.
• Accessibility was a priority. The schematic map redesign involved improving color contrast and line weights to ensure readability for visually impaired users. I used the 'Include' plugin in Figma to check for real-time compliance.
6. Clustering & Rollover Effects for Map-Based Alerts
✅ Implemented clustering techniques similar to Google Maps, Airbnb, and real estate platforms.
✅ Designed polygonal schematic areas to help controllers identify devices, alerts, and events even when zoomed out.
✅ Introduced hover rollovers that expand detailed information for alerts, making monitoring more efficient.
✅ Designed polygonal schematic areas to help controllers identify devices, alerts, and events even when zoomed out.
✅ Introduced hover rollovers that expand detailed information for alerts, making monitoring more efficient.
7. Advanced Search with Predictive Query Suggestions
✅ Implemented Algolia and Meilisearch-inspired search functionalities.
✅ Added query suggestions, auto-suggest features, and predictive search to enhance data retrieval.
✅ Benefits: Increased efficiency, improved decision-making, and enhanced overall user satisfaction.
✅ Added query suggestions, auto-suggest features, and predictive search to enhance data retrieval.
✅ Benefits: Increased efficiency, improved decision-making, and enhanced overall user satisfaction.
Real-Time Alert Response Workflow: A Detailed Analysis
Alert Detection and Initial Response
The system initiates response through an intelligent alert mechanism in the Apollo Dashboard. When a high-priority alert is detected, the system ensures operator attention through a persistent toaster notification that requires manual acknowledgment, preventing critical alerts from being overlooked.
Incident Verification Process
Upon alert notification, operators follow a structured verification protocol:
• Immediate access to relevant GRIDSMART cameras through the device management interface
• Real-time visual confirmation of incidents through integrated camera feeds
• Seamless navigation between map views and schematic representations for comprehensive situational awareness
Dynamic Response Implementation
The system facilitates rapid response through:
• Lane Control Signal (LCS) management with preview capabilities
• Real-time device status monitoring and adjustment
• Integrated event creation and management
• Automated device group association within the event panel
Event Management and Resolution
The workflow supports complete event lifecycle management:
1. Event creation and documentation
2. Device setting adjustments and verification
3. Systematic clearing process with status tracking
4. Final event closure and historical record maintenance
Key System Features
• Interactive map layers with device integration
• Preview mode with visual confirmation safeguards
• Automated event tracking and status updates
• Comprehensive historical event logging
Benefits
• Streamlined operator response processes
• Reduced response time to critical incidents
• Enhanced verification capabilities
• Improved documentation and tracking
• Clear audit trail of actions taken
Results & Impact
📉 40% reduction in response time for critical alerts.
📈 Increased efficiency in handling multiple alerts simultaneously.
👍 Higher user satisfaction, with a 90% improvement in ease of use reported in post-launch surveys.
🔄 Improved collaboration between transportation authorities and emergency response teams.
📈 Increased efficiency in handling multiple alerts simultaneously.
👍 Higher user satisfaction, with a 90% improvement in ease of use reported in post-launch surveys.
🔄 Improved collaboration between transportation authorities and emergency response teams.
For Alex Morgan (Traffic Operations Controller), response time improved by 40%, enabling faster incident resolution.
James McGregor (Executive Manager) benefited from an intuitive executive dashboard that reduced reliance on manual reporting, improving decision-making speed by 30%.
James McGregor (Executive Manager) benefited from an intuitive executive dashboard that reduced reliance on manual reporting, improving decision-making speed by 30%.
Lessons Learned & Next Steps
Key Takeaways
• AI-driven automation significantly improves response times.
• Replacing intrusive pop-ups with non-disruptive notifications enhances user experience.
• A customizable widget-based dashboard offers more control and clarity to operators.
• Accessibility-first design ensures inclusivity.
Future Enhancements
• Implementing AI-driven predictive alerts based on traffic patterns.
• Adding voice-command capabilities for hands-free operation in critical scenarios.
• Exploring mobile-first solutions for on-the-go traffic management.
Conclusion
By reimagining the Alerts and Events system, the ITS platform now empowers operators with a more intuitive, efficient, and responsive tool for managing critical transportation situations. This case study showcases my ability to solve complex UX problems, improve real-time operations, and create impactful design solutions for high-stakes environments. Worked with engineers to implement secure communication protocols for data transmission between traffic cameras, sensors, and the central dashboard. Implemented role-based access control to ensure that only authorized personnel could access and modify critical system settings. Considered potential threats such as unauthorized access, data manipulation, and denial-of-service attacks, and designed the system with security in mind.
My work on the ITS platform encompassed a wide range of UX/UI design contributions, demonstrating my ability to design complex systems for mission-critical applications. The real-time alert management system showcased in this case study is one example of my work. My broader contributions included:
• Developing a comprehensive and accessible UI design system to ensure consistency and usability across the entire platform.
• Designing key user flows for various functionalities, including route planning and device management for a range of ITS devices (variable message signs, lane control signs, and variable speed limit signs).
• Designing intuitive and informative reporting dashboards to provide users with actionable insights into the performance of the ITS system.
• Creating user-friendly administrative interfaces for managing system settings, user accounts, and other key administrative tasks.
• Developing an intuitive map interface with a layered menu for alerts, events, devices, congestion status, points of interest, public transit vehicles, a dynamic map legend, and multiple map views (satellite, road, and schematic).
Please feel free to contact me to learn more about my experience and the full scope of my involvement in this project.
TESTIMONIAL
I had the pleasure of managing Diane, who worked to design a dashboard for an intelligent camera solution (Themis) as well as a traffic control operating platform (Apollo). Diane approached challenges with empathy and a deep sense of responsibility. A dedicated and talented product designer, her commitment to accessibility was evident. She ensured that all users, could engage with and benefit from the products she designed. Diane also showed a strong interest in mastering AI, constantly exploring how it could be leveraged to enhance both accessibility and overall product functionality. Diane would be an invaluable asset to any team looking for a designer who can bring a human-centered and empathetic approach to building and improving user experiences.
Rene Wischusen
Rene Wischusen
UI/UX Designer at Cubic Transportation Systems
Want to work with me?
