top of page
Top
Delft Digital Twin
Digital data visualization of the traffic data in Delft, Netherlands
Overview
This project was completed during my last year of bachelors in UX/UI Design. I worked as a SCRUM master, UX researcher + designer in a group of 6 people. The design sprint was over a span of 4 months where we worked closely with the municipality of Delft to visualise the traffic data in Delft.
My role
SCRUM master
Researcher
UX Designer
Team
Timeline
Tools
Karolis Ramanauskas
React.js
Melina Fourtune
Figma
Aug 2019-Dec 2019
Vincent Anthonia
Hotjar
Mercedes Mendaza
Municipality Delft
Problem
Members of the municipality Delft have to go through long lists of traffic data collection
Members of the municipality Delft often need to analyze and present city data to draw conclusions from it. Everytime, they have to look back and go through long documents of data throughout the years, many members in the municipality have a hard time understanding the data.
Design Challenge
“An easy and understandable data visualisation of car traffic in Delft.”
Solution
Delft Digital Twin: an interactive digital data visualization of the traffic data in Delft
Option to search data by street, date and time
Users have the option to search data based on any street in Delft and then filter it on date and time during a day. Which then highlights on the map. The size of the circles on the map indicate how busy the traffic is.
Interactive map
Users can press on the circles to see the data through a pop up of that particular street or area. It shows the average amount of cars passing by on each day of the week.
Design sprint 1
Research
User research
“To have a visualisation of the data we gather during research.”
Interviews
To get a better understanding of the problem the municipality workers have, as part of sprint 1, we carried out a research plan to interview users. I along with my team interviewed 4 members with these main questions:
1. How often do you use the traffic data?
2. What are some of the things you look into based on car traffic data?
3. How do you currently present the data?
Interview data:
"I dont understand the traffic data in the documents, I usually have to ask around"
"I am assigned a certain area in Delft so, I have to look based on street name and number"
"I work in the traffic department so I have to present data monthly for improvements"
"I dont look at the data but I need to know to present a monthly report"
User stories
From the user interviews these were the user stories we came up with and worked on in the later stages
As a user I want to have average all day data of the chosen checkpoint (overview time).
1
As a user I want to be able to compare streets to see different patterns.
3
As a user I want to filter out important traffic data in different parts of the day
2
As a user I easily want to know the most and least crowded areas during peak hours to reduce the capacity.
4
Design sprint 2
Wireframing
“An easy and understandable data visualisation of car traffic in Delft.”
Wireframing
Wireframing
We created first mobile wireframes of the digital twin
Searching traffic data in different ways
Screens showing different ways to search specific data. Through the map and dropdown of road names.
Showing traffic data in different forms
Screens filtering all the data through days and weeks in a table or graph format.
Iterations
After several feedback rounds with different municipality workers, we carried out some iterations on the prototype
1
Adding basic UI elements
So we created a light and dark version of the interface, to make it accessible for all kinds of preferences. Also, added basic UI elements to give the client and us a better understanding of the next steps.
2
Desktop version of the data
After some tests, we got the feedback that many users use desktop more to share data. Which is when we created a desktop version of the prototype.
Design sprint 3
Design & testing
Design & testing
"An intuitive Delft Digital Twin platform"
Prototype
1
Using the foundings of the tests carried out on the wireframes we followed with creating the design.
Diverging
Method: Lotus Blossom
We used React.js to create the first prototype of the design. After testing with the traffic data expert:
-Suggestion to show a legend of the map for ease of use
Prototype
2
Map showing legend and other data shown in graph
Ideation
on
brand design
The prototypes weren't user friendly, so we carried out ideation to rebrand the design
Design after ideation
Results from Hotjar
● 78.6% of the users scrolled down to the first half of the page
Final product
Product poster
Presenting the DDT to the client
Reflection
Reflection
I learned how to lead a team of different expertise and assign tasks, making sure that the Sprint goal is being met throughout the whole process. I also learned how to follow an agile style of working with sprints and a burning chart, but also communicating the results of each sprint with the client through a retrospective report.
I would change is ideating in an early stage before wireframing to avoid the situation of having to take a step back and having a design that lacks UI design elements.
bottom of page