OpsCentral
UX RESEARCH / UI IMPROVEMENTS
We created a future-proof digital mapping UI to help firefighters navigate buildings during crises
Skip to prototype
ROLE
Research, wireframing, product design, report writing, stakeholder presentation design & delivery
TEAM
4 Master of UX Design students
AUDIENCE
Firefighters, first responders & civilians
Background
OpsCentral is an Incident Intelligence platform where users can create digital preplans for firefighters and other first responders.
Preplans are documents that describe a building’s hazards, access points, and other details relevant to its fire protection.
Firefighters use preplans to navigate buildings when they respond to emergencies, which means a good preplan has the potential to save lives.
It can be difficult, however, to find or create accurate preplans—especially helpful visual accompaniments such as maps and floorplans.
Our team of four was tasked with bridging this gap. To do this, we gathered insights on how preplans are used by firefighters, examined competing products, then tested and designed a tablet-based preplanning UI for OpsCentral to adapt into their platform.
Goal
Draft a visual preplanning interface that can fit comfortably into OpsCentral’s existing product
Research
User Interviews
We met a firefighter and executive lead at OpsCentral to learn about their preplanning experiences.
You have two minutes to go to the grocery store and find some sort of spice, and you've never been there before. How do you get there as quickly as possible?
Research participant (on the function of preplans)
“
We discovered the leap from paper to digital preplanning came with a significant learning curve for first responders. And as the future of preplanning lies in the hands of civilians, our design would need to be intuitive to both emergency professionals and everyday citizens.
Our interviews also generated these key insights about our task ahead:
Easy for civilian users
Finding Firefighters are the primary users and creators of preplans, but it takes them a while to make one—let alone several for all the buildings in a city. But anyone can make a preplan with the right guidance.
Insight Our UI should have a shallow learning curve so civilians with less professional knowledge can also create preplans for first responders.
Digital efficiency
Finding Preplans are usually paper-based, which makes them hard to find, share, and update. Firefighters also rely on their personal experience with an area when responding, which isn’t documented.
Insight To encourage more digital documentation, our UI should be easy for firefighters to create and update post-incident.
Understand at-a-glance
Finding It isn’t uncommon for buildings to collapse before firefighters arrive, so navigating quickly via preplan is crucial to saving lives.
Insight A clunky, cluttered interface could potentially hinder rescue operations. Our design should be highly visible and intuitive to achieve the high-stakes, at-a-glance utility needed in these situations.
Competitive Analysis
We also studied competing products to identify niches in the preplanning app market that we could fill in our design.
Our research confirmed that most preplanning apps lacked the ability to add visuals of building interiors. Those that did were tricky to learn or only offered a handful of options (e.g. adding images but not sketches or text).
To create the most viable product, we knew our UI needed to include these visual features and tame the key user flows offered by other apps. And as we learned in our interviews, streamlining these processes into a clean, easy-to-learn interface for our user base would be a necessary challenge as well.
These product observations informed three more findings and insights that guided our concept development:
Anticipatory features
Finding A good preplan form takes advantage of auto-suggest and auto-complete features to streamline the process for the user.
Insight Our visual preplan UI should also include anticipatory features that make it easier to complete maps at scale (e.g. duplicating objects to multiple floors at once).
Expanding to interiors
Finding Most preplanning apps focus on the building’s exterior (e.g. access points, building materials). This is because (accurate) interior maps are difficult to create without the right training or technology.
Insight Our product should be adaptable to predicted advancements in interior mapping programs.
Concept Development
Usability testing
As we couldn’t conduct usability tests with our primary users, we kept their needs in mind by creating three JTBD scenarios based on their interviews. We then identified their associated in-app functions and protyped them for testing:
∙ Placing objects on interactive maps
∙ Adding more details about points within a preplan
∙ Editing existing objects en masse
These functions were developed into lo-fi and paper prototypes, A/B tested with peers, and redesigned accordingly.
Interaction research
Our team researched mobile interaction best practice in-depth, as tablets are industry-standard tools for viewing and creating preplans.
We especially referenced UI from mobile-friendly floorplan and drawing applications, taking note of menu orientations, platform limitations, and unique interactions we could use to our advantage.
We were excited to find that touch interactions paired well with our visual editing flows on both mobile and tablet viewports.
Ideating features
We initially focused on simplifying preplan form and map integration as we’d seen in competing products. We explored this concept by sketching wireframes and potential user flows.
After consulting OpsCentral, we narrowed our focus on developing more visual editing UI to corner the emerging interior mapping market identified in our research.
We also aimed to create a future-proof UI that could be applied to visuals beyond maps in the future (e.g. 3D walk-throughs, AR, VR).
Visual indicators on building maps
Users can add points of interest to their map using the preplanning symbols in the object library. These objects are standard NFPA icons that firefighters can Understand at-a-glance as they navigate buildings during rescue operations.
Intuitive, time-saving features
We included Anticipatory features for updating preplans, such as editing objects in bulk, replacing and duplicating objects across floors. This feature improves Digital efficiency for firefighters by significantly reducing preplanning time, especially for larger buildings.
Multimedia additions
Users can pin images, text, comments, and links to the map using the fuss-free, icon-loaded toolbar on the lefthand side. This gives civilian preplanners the ability to add explanatory visuals and content (i.e. photos of spaces, links to floorplans) to supplement their plans.
Multimedia additions
Users can pin images, comments, text, and links to the map using the icon-loaded toolbar on the lefthand side. These Flexible inputs make it Easy for civilian users to add explanatory visuals and content that don’t require specialist knowledge (e.g. photos of spaces, links to floorplans).
Adaptable to emerging technology
To support Expanding to interiors, we ensured our UI could overlay and navigate 3D map displays should OpsCentral support the technology as it grows. We included the ability to toggle between these 2D and 3D views in our mockup to demonstrate.
Final Design
Key Features
Next Steps
Board Approval
OpsCentral responded very favourably to our proposed UI improvements, especially as they applied flexibly to 3D visuals. Our package for them included all our design assets, a recorded presentation, and a full report detailing our design decisions and recommendations.
Our contacts at OpsCentral said they’ll use this package to seek Board approval for further UI development.
User Testing
My team and I weren’t able to schedule user testing sessions with firefighters within our four-week timeline. Fortunately, OpsCentral’s own product development team has signifcant contacts within this user group and will be able to test our design with them.
Based on our own user tests, we believe our UI should be intuitive enough for professional and casual use and look forward to seeing how OpsCentral adapts it into their product.
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!
OpsCentral
UX RESEARCH / APP DESIGN
We created a future-proof digital mapping UI to help firefighters navigate buildings during crises
Skip to prototype
ROLE
Research, wireframing, product design, report writing, stakeholder presentation design & delivery
TEAM
4 Master of UX Design students
AUDIENCE
Firefighters, first responders & civilians
Background
OpsCentral is an Incident Intelligence platform where users can create digital preplans for firefighters and other first responders.
Preplans are documents that describe a building’s hazards, access points, and other details relevant to its fire protection.
Firefighters use preplans to navigate buildings when they respond to emergencies, which means a good preplan has the potential to save lives.
It can be difficult, however, to find or create accurate preplans—especially helpful visual accompaniments such as maps and floorplans.
Our team of four was tasked with bridging this gap. To do this, we gathered insights on how preplans are used by firefighters, examined competing products, then tested and designed a tablet-based preplanning UI for OpsCentral to adapt into their platform.
Draft a visual preplanning interface that can fit comfortably into OpsCentral’s existing product
Goal
Research
User Interviews
We met a firefighter and executive lead at OpsCentral to learn about their preplanning experiences.
You have two minutes to go to the grocery store and find some sort of spice, and you've never been there before. How do you get there as quickly as possible?
Research participant (on the function of preplans)
“
We discovered the leap from paper to digital preplanning came with a significant learning curve for first responders. And as the future of preplanning lies in the hands of civilians, our design would need to be intuitive to both emergency professionals and everyday citizens.
Our interviews also generated these key insights about our task ahead:
Competitive Analysis
We also studied competing products to identify niches in the preplanning app market that we could fill in our design.
Our research confirmed that most preplanning apps lacked the ability to add visuals of building interiors. Those that did were tricky to learn or only offered a handful of options (e.g. adding images but not sketches or text).
To create the most viable product, we knew our UI needed to include these visual features and tame the key user flows offered by other apps. And as we learned in our interviews, streamlining these processes into a clean, easy-to-learn interface for our user base would be a necessary challenge as well.
These product observations informed three more findings and insights that guided our concept development:
Concept Development
Usability testing
As we couldn’t conduct usability tests with our primary users, we kept their needs in mind by creating three JTBD scenarios based on their interviews. We then identified their associated in-app functions and protyped them for testing:
∙ Placing objects on interactive maps
∙ Adding more details about points within a preplan
∙ Editing existing objects en masse
These functions were developed into lo-fi and paper prototypes, A/B tested with peers, and redesigned accordingly.
Interaction research
Our team researched mobile interaction best practice in-depth, as tablets are industry-standard tools for viewing and creating preplans.
We especially referenced UI from mobile-friendly floorplan and drawing applications, taking note of menu orientations, platform limitations, and unique interactions we could use to our advantage.
We were excited to find that touch interactions paired well with our visual editing flows on both mobile and tablet viewports.
Ideating features
We initially focused on simplifying preplan form and map integration as we’d seen in competing products. We explored this concept by sketching wireframes and potential user flows.
After consulting OpsCentral, we narrowed our focus on developing more visual editing UI to corner the emerging interior mapping market identified in our research.
We also aimed to create a future-proof UI that could be applied to visuals beyond maps in the future (e.g. 3D walk-throughs, AR, VR).
Intuitive object interactions
Users can add emergency equipment, points of interest, and other objects to the map via the object library, which also keeps track of recently used objects. Once placed, users can tap objects to edit and add information about them via the modal object toolbar.
Time-saving features
Users can edit objects in bulk through the multiselect tool on the lefthand toolbar, as well as replace or duplicate objects across floors in our modal toolbar. This feature significantly reduces preplanning time for mid-to-high rise buildings.
Multimedia additions
Users can pin images, text, comments, and links to the map using the fuss-free, icon-loaded toolbar on the lefthand side. This gives civilian preplanners the ability to add explanatory visuals and content (i.e. photos of spaces, links to floorplans) to supplement their plans.
Multimedia additions
Users can pin images, text, comments, and links to the map using the fuss-free, icon-loaded toolbar on the lefthand side. This gives civilian preplanners the ability to add explanatory visuals and content (i.e. photos of spaces, links to floorplans) to supplement their plans.
Growing with technology
Our UI can also overlay and navigate 3D map displays should OpsCentral support the technology as it grows. We included the ability to toggle between 2D aerial views and 3D walkthroughs in our mockup to demonstrate.
Final Design
Key Features
Anticipate interactions
Finding A good preplan form takes advantage of auto-suggest and auto-complete features to streamline the process for the user.
Insight Our visual preplan UI should also include anticipatory features that make it easier to complete maps at scale (e.g. duplicating objects to multiple floors at once).
Expanding to interiors
Finding Most preplanning apps focus on the building’s exterior (e.g. access points, building materials). This is because (accurate) interior maps are difficult to create without the right training or technology.
Insight Our product should be adaptable to predicted advancements in interior mapping programs.
Easy for civilian users
Finding Firefighters are the primary users and creators of preplans, but it takes them a while to make one—let alone several for all the buildings in a city. But anyone can make a preplan with the right guidance and patience.
Insight Our UI should have a shallow learning curve so civilians with less professional knowledge can also create preplans for first responders.
From paper to screen
Finding Preplans are usually paper-based as past reports (if any) are filed away until they’re needed. Firefighters also rely on their personal experience with an area when responding, which isn’t recorded.
Insight To accommodate the leap from paper to screen, our preplans should be easy for firefighters to edit and update post-incident.
Understand at-a-glance
Finding It isn’t uncommon for buildings to collapse before firefighters arrive, so navigating quickly via preplan is crucial to saving lives.
Insight A clunky, cluttered interface could potentially hinder rescue operations. Our design should be highly visible and intuitive to achieve the high-stakes, at-a-glance utility needed in these situations.
Next Steps
Board Approval
OpsCentral responded very favourably to our proposed UI improvements, especially as they applied flexibly to 3D visuals. Our package for them included all our design assets, a recorded presentation, and a full report detailing our design decisions and recommendations.
Our contacts at OpsCentral said they’ll use this package to seek Board approval for further UI development.
User Testing
My team and I weren’t able to schedule user testing sessions with firefighters within our four-week timeline. Fortunately, OpsCentral’s own product development team has signifcant contacts within this user group and will be able to test our design with them.
Based on our own user tests, we believe our UI should be intuitive enough for professional and casual use and look forward to seeing how OpsCentral adapts it into their product.
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!
Ariel Kenny
THEY/THEM
Hi! I’m Ariel, an end-to-end UX designer with 5+ years of experience innovating products and services for good causes.
I design intuitive workflow solutions and accessible care experiences using swift and thorough user research strategies.
When I’m not using Figma to problem-solve, I’m using it for open-source volunteer projects, interior design mockups, game design ideation, or Dungeons & Dragons campaigns 🖖
I love turning research into results for those who need them most—and working with fellow problem-solvers to make it all happen. Get in touch if you want to collaborate!
OpsCentral
UX RESEARCH / APP DESIGN
We created a future-proof digital mapping UI to help firefighters navigate buildings during crises
Skip to prototype
Background
OpsCentral is an Incident Intelligence platform where users can create digital preplans for firefighters and other first responders.
Preplans are documents that describe a building’s hazards, access points, and other details relevant to its fire protection.
Firefighters use preplans to navigate buildings when they respond to emergencies, which means a good preplan has the potential to save lives.
It can be difficult, however, to find or create accurate preplans—especially helpful visual accompaniments such as maps and floorplans.
Our team of four was tasked with bridging this gap. To do this, we gathered insights on how preplans are used by firefighters, examined competing products, then tested and designed a tablet-based preplanning UI for OpsCentral to adapt into their platform.
ROLE
Research, wireframing, product design, report writing, stakeholder presentation design & delivery
TEAM
4 Master of UX Design students
AUDIENCE
Firefighters, first responders & civilians
You have two minutes to go to the grocery store and find some sort of spice, and you've never been there before. How do you get there as quickly as possible?
Research participant (on the function of preplans)
“
Draft a visual preplanning interface that can fit comfortably into OpsCentral’s existing product
Goal
Research
User Interviews
We met a firefighter and executive lead at OpsCentral to learn about their preplanning experiences.
We discovered the leap from paper to digital preplanning came with a significant learning curve for first responders. And as the future of preplanning lies in the hands of civilians, our design would need to be intuitive to both emergency professionals and everyday citizens.
Our interviews also generated these key insights about our task ahead:
Competitive Analysis
We also studied competing products to identify niches in the preplanning app market that we could fill in our design.
Our research confirmed that most preplanning apps lacked the ability to add visuals of building interiors. Those that did were tricky to learn or only offered a handful of options (e.g. adding images but not sketches or text).
To create the most viable product, we knew our UI needed to include these visual features and tame the key user flows offered by other apps. And as we learned in our interviews, streamlining these processes into a clean, easy-to-learn interface for our user base would be a necessary challenge as well.
These product observations informed three more findings and insights that guided our concept development:
Easy for civilian users
Finding Firefighters are the primary users and creators of preplans, but it takes them a while to make one—let alone several for all the buildings in a city. But anyone can make a preplan with the right guidance.
Insight Our UI should have a shallow learning curve so civilians with less professional knowledge can also create preplans for first responders.
Digital efficiency
Finding Preplans are usually paper-based, which makes them hard to find, share, and update. Firefighters also rely on their personal experience with an area when responding, which isn’t documented.
Insight To encourage more digital documentation, our UI should be easy for firefighters to create and update post-incident.
Understand at-a-glance
Finding It isn’t uncommon for buildings to collapse before firefighters arrive, so navigating quickly via preplan is crucial to saving lives.
Insight A clunky, cluttered interface could potentially hinder rescue operations. Our design should be highly visible and intuitive to achieve the high-stakes, at-a-glance utility needed in these situations.
Expanding to interiors
Finding Most preplanning apps focus on the building’s exterior (e.g. access points, building materials). This is because (accurate) interior maps are difficult to create without the right training or technology.
Insight Our product should be adaptable to predicted advancements in interior mapping programs.
Anticipatory features
Finding A good preplan form takes advantage of auto-suggest and auto-complete features to streamline the process for the user.
Insight Our visual preplan UI should also include anticipatory features that make it easier to complete maps at scale (e.g. duplicating objects to multiple floors at once).
Concept Development
Ideating features
We initially focused on simplifying preplan form and map integration as we’d seen in competing products. We explored this concept by sketching wireframes and potential user flows.
After consulting OpsCentral, we narrowed our focus on developing more visual editing UI to corner the emerging interior mapping market identified in our research.
We also aimed to create a future-proof UI that could be applied to visuals beyond maps in the future (e.g. 3D walk-throughs, AR and VR).
Interaction research
Our team researched mobile interaction best practice in-depth, as tablets are industry-standard tools for viewing and creating preplans.
We especially referenced UI from mobile-friendly floorplan and drawing applications, taking note of menu orientations, platform limitations, and unique interactions we could use to our advantage.
We were excited to find that touch interactions paired well with our visual editing flows on both mobile and tablet viewports.
Usability testing
As we couldn’t conduct usability tests with our primary users, we kept their needs in mind by creating three JTBD scenarios based on their interviews. We then identified their associated in-app functions and protyped them for testing:
∙ Placing objects on interactive maps
∙ Adding more details about points within a preplan
∙ Editing existing objects en masse
These functions were developed into lo-fi and paper prototypes, A/B tested with peers, and redesigned accordingly.
Next Steps
Board Approval
OpsCentral responded very favourably to our proposed UI improvements, especially as they applied flexibly to 3D visuals. Our package for them included all our design assets, a recorded presentation, and a full report detailing our design decisions and recommendations.
Our contacts at OpsCentral said they’ll use this package to seek Board approval for further UI development.
User Testing
My team and I weren’t able to schedule user testing sessions with firefighters within our four-week timeline. Fortunately, OpsCentral’s own product development team has signifcant contacts within this user group and will be able to test our design with them.
Based on our own user tests, we believe our UI should be intuitive enough for professional and casual use and look forward to seeing how OpsCentral adapts it into their product.
Final Design
Key Features