Loading. please wait

SAVVY - UX portfolio

Digital Twins for First Responders

Exploring the human-centered design of digital twins for first responders, in collaboration with Telstra

SAVVY in action!


W1 W2W3 W4W5W6 W7W8W9 W10W11W12
  • 📐
  • 📚   Assumptions
  • 💻   Interviews
  • 💡   Low-fidelity prototypes
  • ⚡   Hi-fidelity prototypes
  • 📝   User testing & usability testing
  • 🙌



I was tasked with exploring how digital twins can support first responders and design and develop a prototype based on UX research. I chose firefighters as my primary first responders as needed to focus on a category of first responders to be able to produce a practical solution.

I needed to devise a 12 weeks plan to scope the problem, perform my research, analyze the results, ideate a product based on that, produce a prototype and finally perform usability testing.

I started with a rather simple question. what needed to be known? to answer that question I started with reaching out to the firefighters and while waiting for them to get back to me, I studies the current literature and read blogs and watched Youtube videos as secondary research. Based on my research, I came to 3 main research assumptions:

High speed driving

No speed limit for emergency vehicles high speed leads to transportation accidents. According to Centre of full employment and equity's study accidents and injuries are amongst top 10 causes of stressful incident which has adverse psychological effects.

Situational awareness is limited

Weather conditions, Lack of real-time emergency vehicle’s position, Several screens of information engulfing the driver.

Digital twins & 5G capabilities

Digital Twins represent an idea where we can use tools and technologies to map data and information from a real thing to a digital one. Adoption of digital twins is depended on operational technologies and high speed cellular capacity of 5G network is an enabler for digital twins.

Interested to know more?

Download my initial assumption presentation where I discussed above steps and presented the results


So I started with reaching out to every fire and rescue services in Australia, such as Fire Rescue Victoria (FRV) and Country Fire Authority (CFA). However, I only received a rejection letter 😢  indicating that they are not available for interview. Next I went to multiple Fire stations and gave my personal details but again, no call back!

In the midst of this, I realized that I can reach out to the firefighters individually. So I activated my LinkedIn premium account and started sending InMail messages to them. I managed to get two firefighters for my interviews. A male leading firefighter with 16 years of experience who is currently driving fire trucks and a female leading firefighter with 9 years of experience.

I conducted two semi-structured, half an hour interviews where I asked ten questions. semi-structured interviews help elicit richer information about participants’ experience according to Lazar. I started the interview with an introduction, explaining the aim of the research. Then follow up with warm-up questions to encourage open conversation. I used predetermined questions but also used probing techniques such as echoing participant’s voice to extract more details, as suggested by Blandford.

As fire service, we are pretty rudimentary, using systems like paper maps and printouts

Leading firefighter


I used Zoom video call and explained to my interviewees that even though I'm recording the call but only audio is going to be recorded and used for analysis. As it is important to get consent I've prepared a consent form online using Qualtrics you can download the example consent form.

Throughout my work, I found Otter to be very productive for converting interviews to transcripts. For this project I have used Otter for interview coding. I used the materials to construct my affinity diagram. Below is a summary of my interpretations from the key points of the interviews. A full list of keys, facts, and Interpretation are available for download.

  • Too many routing instructions is confusing for the driver one step at the time is the safest way of navigating
  • Fire trucks are heavy and hard to navigate so any quick change of route might lead into an accident.
  • Learning the route is a teachable skill that can be delegated to machine to reduce the amount of errors.
  • Driver sits up high and has a good view, the upper bit of the view is unused which could be a prime space for a heads up display.
  • Drivers consider many variables while driving and any routing assistance should be clear and at the point of action not multiple instructions that requires memorising.
  • Lack of digital display makes it easier to produce a product with digital display as there are no other tool or device that might require gaze attention.
  • Fire fighters use paper maps hence there is an opportunity to use HCI to help.
  • knowledge of traffic is based on driver's past experiences. Any routing that could provide real traffic information could help.
  • Decision making should be delegated to navigators not the driver as they are trained for it.
  • Due to emergency nature of the job any situation is considered emergency which adds a lot of stress to the driver.
  • Traffic consistency is the highest concern of the driver when selecting a route so helping driver to pick a route while driving to the situation reduces the time they spend deciding what route to take.
  • Because drivers are constantly seeking direction from navigators while other trucks or the base is on the radio, possible routing solution.

Do you need a template interview request email?

Download my email template



Affinity diagram

After conducting interviews I decided to focus on providing a solution that helps the firetruck drivers reach to the destination safer and faster. As for digital twin aspect I assumed that in the future we will be able to have a digital twin of traffic flow and use the real-time traffic data produced by it and carried by 5G network. With providing navigation solution as the main goal, I did not focus on technologies that produce the traffic flow digital twin as it would be out of the scope of my research.

After conducting my primary and secondary research, I have used the data to perform analysis. First thing that I've done was to use Miro to organize related topics into distinct groups of information. This lead to creation of Affinity diagram ℹ️  . Affinity diagram helped me to summarize the interview results quickly and keep track of everything that came to my mind while analyzing the results. I've used the results of affinity mapping to create user personas 👫 . User personas ℹ️   are fictional characters that help designers and researchers depict different type of users with unique features, goals and experiences.

Challenge: This activity would have been easier if all students have had the opportunity to get together, share and get feedback. I managed to get feedback from a 2 friends on my affinity diagram but I think my study, at this stage, could improve by incorporating more feedback.

To solve the user's problems, I created two personas

Meet Andy O'Neal, my persona. He is 37 years old leading firefighter who works in one of the Melbourne's fire stations. He has over 16 years of experience. He is married and lives in one of the south east suburbs. he has been teaching new firefighters how to drive firetrucks for majority of his career. he loves his job and is very dedicated and determined to safety of the public and his colleagues.

Andy's pain points 😠  are:

  • Using rudimentary technologies like paper maps
  • Drivers can't get clear instructions while driving
  • Traffic is hard to predict

"I want to be able to help people faster and safer"
— Andrew O'Neal

Andy O'Neal

Status: Married

Experience: 16 Years

Tier: Top-level

Archetype: Adventurous


Interested to know more?

Download my persona PowerPoint templates

User journey map

Imagine this scenario, Andy is hanging out with his colleagues watching the morning news at the station. It's towards the end of a long night shift and he is waiting for 9a.m to warp up, go home and sleep. Suddenly alarms go off, there is building in fire at 266 Ferrars St 📍. Andy rushes to the locker room to get prepared. Meanwhile he asks his navigators if they know how to get to Ferrars St. They quickly have a look at MelWays book to find the location. The speakers announce that a children is trapped inside th burning building, according to the latest reports. The officer is already got the printout of the map based on MelWay's website. Usually with every trip, there are four people on board. 1 driver, 1 senior officer, 2 navigators that sit at the back seats. Everyone is prepared and geared up and they drive out, from FRV fire station 38 in South Melbourne, and drive toward the location based on one of the navigator's recommendation using the printout of the map and MelWays book. Navigators constantly give directions to Andy. "take a right turn after the white car!" says one of the navigators. Andy is frustrated as there are two white cars up ahead so he asks for the exact street name and slows down so he can read the street signs.

Suddenly they realize that there is an accident down the Dorcas St and now they are trapped in the traffic. Radio goes off, There is a firetruck at the location but fire is worst than expected and they need help urgently to save the kid who is trapped in the building. In a split second, Andy decides to go against the traffic (counter flow) to avoid congested route. Road is busy but everyone pulls over as soon as they see the firetruck. He manages to get away and reaches at the location just in time to put down the fire and save the kid.

Andy feels tiered and proud at the same time. deep down however, he wishes there was a better way to navigate to the location safer and faster. If only he could find out about the traffic situation in advance 😕

I have used Microsoft Excel for Journey mapping this scenario based on Nielsen Norman Group's template . My user Journey is available for download.

This analysis 🧑🏼‍🏫  helped me to realize what points in a firefighter's journey I should focus on. As it's obvious from the Journey's image, mood is negative around driving step of the journey.

User journey map

User journey map



Thumbnail designs for firetruck


Thumbnail designs for driver

I started with low-fidelity and thumbnail images. Once I started putting down my thoughts on paper, I realized having rough visuals in front of my eyes helps me with forming my ideas better. So I kicked off my designs with thumbnails AKA creative blocks ℹ️   using just pen and paper 🎨

I have produced two sets of designs, each with 4 different designs. first set is communication with the fire truck using 5G enabled devices. Ideas from using traffic light to transmit real-life traffic information to the fire truck all the way to using drones that fly at the same speed of the firetruck and provide real-time traffic data using 4 cameras. The other sets and thumbnail designs are targeted toward providing navigation guidance to the driver. Even though that was not the primary focus of my project (based on the research and analysis I decided to focus on navigator's role in navigation), I wasn't sure enough to completely dismiss the navigation instructions to the driver. hence, I produced a set of designs ranging from using voice instructions without any visuals to providing a translucent head-up display. I've received several feedback during catchup with classmates and friends that inspired me drawing those thumbnails.

I also drew a story board ℹ️   to visually communicate my ideas. it also helps me narrate a story faster and easier. My storyboard is available for download.

Challenge: This activity requires a lot of feedback but due to COVID 19 health safety considerations I wasn't able to communicate well. for next time, I will use digital drawing tools like Wacom so I can update and share my designs easier.


low-fidelity prototype

For structure and functionality, I produced my navigation prototype using printouts and a device mockup i made out of plastic paper. I've decided to make a box for the device to help firefighters visualize the final product better, also to move buttons to top right corner and away from the map view. I went to Officeworks to get all the materials ⚒️ I needed to make the box. As for the box, I have used makercase's website to design a Kerf bent box. My box design is available for download. Next step was to printout the box on a paper and cut the plastic paper around the design. During this phase I kept an eye on my Miro board to make sure i'm not missing anything.

Challenge: 0.8mm Quill Polypropylene sheet, Kerf box material, that I picked was hard to cut. Next time I'll use either cardboard boxes or very thin plywood sheet.


Officeworks trip


Finding materials


Making the box


Busy at work!


Almost done!


Using Miro


prototype unboxed!

My initial low-fidelity prototype ℹ️   had a simple screen with three buttons on it. I had to go back and forth a lot as I got into details of routing and finding out what looks better on the map. Finally I finished my low-fidelity prototype with the following features:

  • 1. Navigation view: a responsive map view with the current traffic incidents view
  • 2. Automatic navigation mode: A map with direction to the incident's location loaded and ready for navigators based on the current traffic information.
  • 3. Manual routing mode: A map view where navigators can draw their preferred route, in case none of suggested routes were optimal.


User testing

A recent study proved that a single redesign after feedback from user testing improved usability by 38%! Inspired by that and after producing the prototype, I have presented it to my interviewees to get feedback. I used user testing ℹ️   at this stage because I wanted to validate the design first. I used direct observation ℹ️   method for several reasons such as it helps with creating a natural task flow with my paper prototype and watching users interact with it. it is important to test a low-fidelity prototype as I can revise and redesign way easier than producing a digital prototype but more importantly I didn't want to constraint myself to an app idea at this level.

To my surprise I have received positive feedback overall. However, the users recommended below points that i have incorporated in the prototype.

  • Thicker lines at it might be hard to read the recommended path over existing layout on the map.
  • Add estimated time of arrival which is very handy for the navigators as it helps with their decision making.
  • Introduce severity level around incidents. As it happens, not every incident means roadblock. quite often vehicles involved in an accident are moved to the side of the road so other vehicles can move without obstruction.

Challenge: Due to COVID 19's safety concerns people might be reluctant to touch a prototype so I performed this part by demoing it through my laptop and observed user feedback such as eye movements and facial expression.


Update process



High-fidelity prototype

I Started creating my high-fidelity prototypes 🤓  using Adobe XD. I've used a plug-in called fancy maps to help me with design of the app. I tried to use familiar color palette to make sure firefighters feel related to the app at the first glance. As for the map, I used a familiar Google map view and used the exact traffic signs to increase efficiency and lower the learning curve. and SAVVY is born 👊

Key features:

  • Traffic forecast using real-time 5G data
  • Providing the best and fastest route to the incident location, loaded in the tablet directly
  • Ability to draw a route on the map by navigators, even it means going against the traffic (counter flow)
  • Traffic incident severity
  • Indicating position of fire hydrants on the map
  • Accessible design with features such as zoom and night mode.

Challenge: Limited time of the project did not allow me to produce a separate style-guide for the app but I've used components and color palette to keep consistency in the designs.


Landing page


Log-in view


Splash screen


Description view


Traffic view



Interested to know more?

You can download my AdobeXD file



Introduction to the app


Usability testing

The main objective of this part is to conduct a usability test of the SAVVY, and to present a possible solution of the problems I discovered during our usability tests. I chose usability testing ℹ️   to make sure the gap between how the app is designed and how it is received by real first responders. I will go through my test method, who participated in my tests and how we recruited them, the usability findings from my test, as well as recommendations on changes to the app to help address the issues I found. For this usability test, I mainly we used for first-click testing. Over a period of a week, I recruited two participants who already responded to my original interview. Both participants had to fill in a screener questionnaire for the first interview and their responses helped me decide if they were suitable for further testing. The consent form and their professional details are recorded. I concluded from my findings and analysis that while SAVVY app was efficient in terms of providing real-time data of traffic, it had several design issues regarding its usability, mainly revolving around it’s poor accessibility and efficiency, especially in sign in process. In order to solve those issues, I made some changes to the app. I believe that by modifying the app, it’s usability can be massively improved.


Usability goals
Are the itinerary planning capabilities of the website efficient, and does the website provide high productivity?
1. Can a user draw a new route within a time limit?
1. A user can complete a given task in 1 minute.
Is the app capable of helping navigators to find the safest and fastest route?
1. Can a user use pre-defined route?
2. Can a user draw a new route?
1. all users can complete itinerary-related tasks asked of them
2. All users can draw a new route.
Are there aspects of the user interface and user guides that make the task more difficult or time-consuming?
1. Is it easy for a new user to work out how to understand real-time traffic?
2. Do the user interface and user guides help users to carry out their task?
1. New users can find layer button and look into the layers to draw a route.
2. New users can perform task 1 in 1 minutes.


After analysis I realized the following points and updated my prototype accordingly.

  • There is no need for password as firefighters have unique registration number. The user recommended to use the number as the app can use it for machine learning (future enhancement).
  • Provide street view of the incident's location to make it easier for firefighters to find fire hydrants and the neighboring buildings.
  • Provide accessability as not every firefighter is able to read the screen easily.
  • Add night view as driving at dark and using the app can cause eye fatigue to navigators and they won't be able to see clearly.
  • Make live traffic information optional se that navigators can see it while drawing their preferred route or alternatively turn it off.


Street view & accessibility tools


Night view


Next steps

If I have the opportunity to expand this project, i would be very interested in taking the design through more iterations and publish the results in an academic paper.
  • Build out route preference module to personalize the experience.
  • Build a network of first responders module so that firefighters can see other emergency vehicles.
  • Produce an app based on the designs.
  • install the app in training cars with real firefighters.
  • Do another round of usability testing with above features.
  • Perform System Usability Scale (SUS) test
  • Write my UX research journey, challenges and experiences in an academic paper to share with others.





Discovering usability problems


What needs to be known?


keys pain points, facts and Interpretation


How To solve the user's problems?


Putting down thoughts on paper


A concept built to test