Custom Front-End with Data Visualization Widgets for Remote Traffic Monitoring System

Customer

The end Customer is a provider of traffic management software.

Strong Front-End Expertise is Needed to Deliver Seamless UI

The Customer was developing a system (a web app connected to controllers) to monitor the operation of city traffic lights. The controllers transmitted information about every traffic light’s on and off modes and the duration of each signal. Traffic engineers, who were the primary target users of the system, could monitor the situation remotely, send a repairman in cases of breakages, and manually switch the lights, e.g., to clear a traffic jam for an ambulance. The system was intended for the US, but the Customer also held open the possibility of spreading it abroad.

When ScienceSoft joined the project, the system’s back end had already been developed. The Customer needed strong front-end developers to help deliver the system’s interface — a map with marked traffic lights was already underway, while overlayed widgets with information hadn’t been started.

ScienceSoft Strengthened the Project Team with Front-End Development Expertise

The Customer had UI mockups for widgets, but the company wanted us to double-check the mockups’ quality. Upon our close examination, we concluded that the existing design was infeasible in many ways and didn’t cover the required functionality. So, we jumped back to the pre-design stage to elicit the requirements for the system’s interface. We worked closely with the project’s consulting traffic engineer to find out what information users would need to display on the screens and how to visualize it in the most user-friendly way. The discovery stage resulted in a complete design overhaul.

To access more advanced tech capabilities needed for the project, our team upgraded the front-end tech stack used on the project, namely Angular and dependent libraries. And finally, we developed different types of widgets that visualize:

• Real-time data coming from traffic lights’ controllers.
• Historical data. Such widgets require manual initiation of data synchronization with the server.

Our team enabled the simultaneous display of several widgets on the screen so that users could access all the details of a certain situation.

Additionally, we modified the system’s settings to improve user experience. By default, the system had a time localization algorithm turned on, which could potentially cause confusion. It could happen that users would need information about the traffic situation in a different time zone. If shown in a user’s local time, the information would be misleading, and users would need to make a mental effort to recalculate the time. We tuned the system to reflect the actual time for users, no matter their time zone.

The Role of ScienceSoft Expands

After 11 months of development, the Customer’s system has a functional front end that correctly and fully displays the information transmitted by the traffic lights controllers. The Customer is planning to evolve the system, so we are discussing further cooperation. Seeing our diligence, tech expertise, and readiness to contribute to the project, the Customer wants our team to assume full-stack development and work on the back-end logic and the visual realization of features.

Technologies & Tools

Angular v13.0 – v16.0, PrimeNG, Fabric.js.