Delft digital twin

Creating a road traffic data visualization for the municipality of Delft.

Due to confidentiality reasons, some information isn't available.

My role

For this project I worked with 4 classmates using SCRUM framework and contributed to all the phases of the design process, which were divided in 3 sprints.


As the population of Delft is growing rapidly, the municipality wants to make it easier for city planners to make decisions about road traffic. That is the reason why they asked us to create a digital platform in which the traffic data of the city is displayed efficiently.

The process

Sprint 1

During the first sprint, we did desk research on existing digital twins and multiple topics (such as energy consumption, criminality, garbage etc.). We also prepared questions for our first meeting with the clients to find out their expectations and needs.

At the end of each sprint we had a demo with the clients. In this demo we showed the clients the most important insights we gathered from the initial desk research.

Demo first sprint.

We used Figma for the demo presentation to the clients.

After obtaining feedback from the clients, we decided to make our digital twin about road traffic.

Sprint 2

Once we had a clearer vision on our product, we started designing mobile wireframes.

Mobile wireframes.

However, after the feedback from our clients, we had to change the design to a desktop version.

Demo first sprint.

Initial design for desktop.

At the demo with the clients, we got some valuable feedback:

  • Numbers aren’t a problem for the clients.
  • Add rush hours (morning 7-9am and evening 4-7pm).
  • Take into account the two sides of the street.
  • Test the product more with our users, so we get enough useful feedback.
  • Add more interactivity to the digital twin.
Demo second sprint.

Live working website presented during the demo.

Sprint 3

Once the third and final sprint started, we prepared a list with questions for our meeting with one of the clients.

From the meeting we got the following insights:

  • The current heatmap is very good.
  • Add a graph line for each data point.
  • Include the number of cars that pass hourly for heatmap points and flow through the city.


Since we couldn’t meet the clients face-to-face, we had to set up Hotjar in our website to get feedback on our product.

Demo second sprint.

Website we tested with Hotjar.

We created a poll and collected responses from our clients but also from our lecturers to have enough insights.

Feedback gathered from the Hotjar poll:

  • Add exact value of the checkpoint and street names on the graph.
  • Have a legend to get a better understanding of what the annotations on the graph mean.
  • Better pop up when pressing on a checkpoint.
  • Titles to better understand the graph (average cars).
  • Improving selection and deselection of the streets on the search bar.

Heatmap findings:

  • The first thing the majority of users do once in the platform is clicking through the scroll bar.
  • The searchbar is the most used feature.
  • 78.6% of the users scrolled down to the first half of the page.

Demo second sprint.

Heatmap results from Hotjar.

Based on the findings, we improved our product:

  • Improved the visual design: added white space, connected the bar visually to its checkpoint and changed the design of the scrollbar.
  • Demo second sprint.

    Improved visual design.

  • Added a legend.
  • Demo second sprint.

    The heatmap has a legend.

  • Added new interactive elements: such as the searchbar and filters.
  • Demo second sprint.

    New interactive elements were added.

  • Used real data in the map.
Demo second sprint.

The map and graphs use real data.

At the third demo, the clients were really happy about the product. They really liked the fact that we used real data on it. But they also gave us some suggestions:

  • It would be nice to make the checkpoint change colour according to its capacity (for instance, make it red when its above the average and yellow when is under it).
  • Have a date selection.
  • Make the graph smaller. The width of the graph should adapt to the maximum value visible.
  • Have an hourly graph for each checkpoint.
  • Add a slider between the map and the graph.

The solution

The design solution is an easy-to-use and visually appealing platform which fulfills the users needs by providing them with an efficient visualisation of the traffic data.

1 / 4
2 / 4
3 / 4
4 / 4

This platform was showcased in an expo setting at the municipality of Delft. At the expo, 7 other groups presented their final product as well.

Our clients said:

"This is the only product (from the expo) that looks actually finished and has actual value in it."

"I find it a very effective and efficient interface, very easily understandable and visually appealing."

"I really like it. I brought a colleague here (to the expo), because I would like to implement something like that."

Next project
Redesigning a Dutch e-commerce ›