Designing Traffic Signal Timing Web Application


Traffic signal timing is the name of managing and synchronizing the traffic lights (which is actually called traffic signal). In order to prevent any clashing within each junction, traffic engineers must plan the timing signal properly and continuously monitor it to modify the plan efficiently to reduce any traffic jams.


Configuring and making changes to the traffic signal requires on-site configuration and it must be installed with only the brand that is compatible with the hardware. Sometimes, monitoring the traffic signal plan might require different software.


Our client sees that managing traffic signal timing can be improved a lot in its experience by using IoT(Internet of Things) technology and unify the software to be used for all-in-one traffic signal timing. Whether to install for new junction, create the plan, monitor, and modify the plan as well as generating a report for further research and development.

Our Role

I and my team at Snappymob help the client to accomplish their goal by creating a web application that is easy to use and offers a delightful interface.


Before designing, I would like to put myself into the users' shoes. In order to do this, I must understand the traffic signal timing basics and speak the language. To fully understand the traffic signal timing and their terms, I read the traffic signal timing manuals that are available for free on the internet.

I can always ask the users about what things are mean, but it's not good to keep asking for small things. So by understanding the terms they use and what it means may help to smooth our understanding of how things work.

Next is to understand how to operate and see things like a traffic engineer. In order to do this, I crafted a set of questions that just clarifies what I understand based on my research and clarifies with the user. To ask an open-ended question without any base knowledge will just prolong the time of explanation. I figured that to research, conclude first, and ask whether my understanding is right or not is much faster.

Research Enabler

Thankfully there are many free resources available on the internet. As long as you have the right keyword, you might find anything you need. There are also video tutorials for introduction to traffic signal timing.

Research Blocks

There are many times that after browsing around, it is still unclear how something works and it is very hard to draw my own conclusion so that I can confirm it with the user. I save the time to ask open-ended questions such as "How does sub-controller works?" and let the user explain and I take note of that.


Prior to the project commencement, the client has provided a brief manual that I treat like a bible in this project. It also includes a wireframe they drew. The client understands how difficult and abstract it is for laymen like us to visualize a traffic signal application without any drawing, so the wireframe helps us to do so. Although the wireframe is there, that doesn't mean I can skip making the wireframe and that also doesn't mean I can jump straight to hi-fi design without any understanding of how anything works. I treat the client's wireframe just as a visual guide, not something that can skip some works.

High-Fidelity Mockup

When designing a high-fidelity mockup, we still not fully understanding how things work in several edge cases. So our research and constant communication with users continues even during high-fidelity mockup work.

In this project, we use Angular Material as our components.

To speed up the development process, we only use default components and only customize when it is necessary to do so.

And to assist developers in implementing the validation, we have also prepared a presentation slide and documentation for them to read and implement in their development work.

Slides and documentation to assist development works.

There is a challenge in producing the chart for pursuance which requires many different aspects to be incorporated in the chart. In this case, the development team has to switch the chart framework.

Total design duration: 6 months

Click here to view the project's Behance slide

5 tampilan0 komentar

Leni Tjahjadi

Terima kasih telah mengunjungi websiteku!

  • linkedin

Mau website kayak gini GRATIS ?

Klik disini