JetStream Maps is a widget in JetStream UI that allows users to pin cameras, sensors, and other surveillance devices to a geolocation. Instead of having to look at a list of potentially thousands of devices, the user can have each of them intuitively mapped and sorted. This empowers security teams with the context they need to keep their sites secure.
In this project, I redesigned the whole user experience and UI, while introducing whole new feature sets and workflows.
6 Weeks, 2022
Product Designer
Project Lead
Research
Figma
Illustrator
Zeplin
Jira
The previous maps experience has become antiquated. Stakeholders want to put a new focus on this feature but its architecture and UX components need to be redesigned to better suite the workflow of the platform. Here are the key pain points with the previous experience.
The legacy experience used basic camera pin and labeling techniques to assign devices. There was no form of tagging or grouping cameras for organization.
At scale not having an easily to understand pin or grouping system leads there to be a loss of situational awareness. There could be a case where a site may have dozens of cameras within, leaving a mess of unselectable pins.
In the legacy experience there are only basic options available. Any advanced settings are hidden in a hard to find widget configuration page.
Users don't have much room to customize their maps experience leading to the widget becoming less utilized.
When a user clicks on a device pin in the legacy experience it will only display a video feed. The maps widget does not give the users any insights about what has been happening on device.
Users are left to connect points about alerts on their own, as the maps widget gives no data directly. This wastes valuable time as users are left scrubbing through feeds.
One of the main priorities in redesigning this widget was to make it a valuable up-sellable feature for the platform. This makes the widget go from a simple utility to a full blown competitive feature set with a market advantage.
The old way of putting a bunch of pins on a map and calling it a day are over. Maps require more context through the use of an organization system.
Redesigning the pins are a big part of making the maps more intuitive. Having a pin represent multiple types of information in a small container and staying coherent can be a challenge.
A major point of revamping maps is to make it the center point of large operation surveillance. Security personnel staring at video feeds should be a thing of the past. Making maps the main workflow of the platform is the game changer.
Before the design process we needed to assess who our user base was. The company’s business model is primarily B2B and B2G meaning that our end users would consist of personnel hired by the client.
By looking into most security staff systems we found 2 user archetypes with their mapped day-to-day priorities.
They are the ones in charge of the day to day priority. Field staff will usually report to the Supervisors. Supervisors are usually based in security control rooms.
It is their responsibility to set the response priority and communicate clear and decisive information to field staff.
The admins oversee all the reports and data that are collected. They set the overall security procedures and response measures.
Mainly look over all the ongoing and completed reports. They make sure that everything is filed correctly.
The process was initiated by first facilitating collaboration across multiple departments. The CTO, Project Manager, and Product Manager expressed their ideal vision of the Maps widget. Out of many discussions had, we pulled a few points to focus on.
Maps that display different types of map data such as a general world map, group maps, and site maps.
Creating an organizational system for pins through groups and sites.
Give more context to pins through interactions that provide relevant data.
After understanding stakeholder needs we moved on to analyzing our end users workflow. What we found was with the legacy experience there was little to no context of where cameras/devices were located. The only way to find devices was to aimlessly click through each camera on the camera list until the user found the right device. When they used the legacy maps widget it wasn't much help as it would just have pins scattered with no relation to the alert.
We were now tasked to create task flows to see where there could be inefficiencies and potential confusion.
This is a glimpse of the wireframe ideating phase. At this point of the process we focused on making a workflow for all the major functions and interactions of the feature in mid-fidelity.
It is important to wireframe the whole feature configuration process to the end interactions as it will be shared with end users. Each step is carefully thought out and noted so that users can easily understand the flow.
After creating the wireframes we shared them with our end users. Our goal was to get key insights on what users thought of the new feature set flows and the layout of the widget.
The interview process consisted of video meeting and surveys where we asked pointed questions and for a general vision of what they’d like to see. These are some of the key insights we received from the user interviews:
Customizable interior maps
Custom drawable & importable map layers
Ability to add weather overlays
Better sensor representation & interaction
Alert creation from the maps widget
The days of expensive security rooms with dozens of video feed screens are coming to an end. With the expanding use of smart analytics, ML, and AI in the surveillance field there is no need to actively watch video feeds. These new intelligent models are much more precise than any human and can handle hundreds of streams at once.
The next generation of security and surveillance are context rich maps that feed security personnel the insights they need to respond to threats effectively. It gives them the live and organized context of where threats are detected without the need to dig through camera/sensor feeds.
Security personnel are able to respond to incidents faster or track potential threats. In the event of an active alert, users are able to find the affected site and cross check with related devices 193% faster. Personnel have more time to handle other tasks as they don't have to continuously watch feeds.
A key component of maps are the way we represent all the different assets. It was important from the beginning of the conception phase that a clear pin design system was needed.
Subtle touches, such as the difference in shape, makes it easier to make the distinction between organizational sites and singular devices. Using bright distinctive status colors draw the user to act.
By unifying the pins into a simple system, users build a familiarity that enables quick scalability of their maps. In the process it increases situational awareness while greatly decreasing user's cognitive load.
The top-level grouped site type which can be considered the “root” site. It contains all lower levels of organization within itself.
This level is for an additional layer of organization when breaking up a Stack layer. It essentially allows the user to divide a Stack into smaller groups. This level allows for sections within sections for maximal organization.
This is the lowest level of organization. Think of sites as individual buildings. When a user selects to view a site it will switch to an interior map with the selected site’s content. This declutters a map, making alerts way more manageable.
Selecting a device will display its relevant content. Devices do not need to be attached to a site. They can be set alone (not attached in a group/section) or can be attached to a section/group.
For quicker navigation around locations, using the Map Hierarchy Navigator makes it easier to jump around the map. It displays exactly how the map is organized from Stacks down to individual devices.
This panel gives the user all the information and context they need to make informed decisions. When selecting a site the panel shows details such as floor levels, events, and other necessary info. The ability to rapidly switch between different sites/devices and see all their details is game changing for users.
Users are able to have all the function and information they need in one map view. No need to dig for information on other pages which cause users to become distracted.
This color pallet was chosen with the environment of the user in mind. Most Control Centers/Security Rooms are usually dimly lite meaning a dark theme was necessary in reducing eye strain. This greatly reduces mental fatigue during long shifts.
The #1 goal when we conducted the usability testing of the final prototype was to make sure Security Supervisors clearly understood how to conduct their workflow. Since new feature sets and flows were added it was important to spot any friction or confusion from our users.
There were 3 tasks that participants were asked to complete:
Participating users stated that the new maps experience was easy to navigate and was a huge feature improvement compared to the legacy experience.
Users were able to visualize how the organization and hierarchy systems will help greatly at scale. They noted that the hierarchy panel was terrific for jumping around the site.
Users were big fans of the Info Panels and how they effectively display all the relevant information. They noted that the panel could cut initial investigation times down by 85% since they wouldn't have to cross check info on different pages.
Admin users were very intrigued by the maps-centered workflow as it would eliminate their dependence on expensive hardware. Instead of needing dozens of TV screens and multiple work stations, they only needed a single workstation.
The bandwidth required to run the system would drop down to 1/8th the amount of the legacy video-wall method. Meaning easier deployment in remote sites where bandwidth is limited.
Overall, the testing sessions proved that the prototype was successful and gave us the confidence to move on to developing the product.
The journey of what started as redesigning a small feature to what evolved into a totally new way of using the platform was fascinating. The initial goal was to just make pin icons that were easier to understand but the more we thought through the process, the more we found ways to completely reinvent the experience. It shows that simple well thought design decisions can spiral a product into something new and innovative.
A lot of times when you're watching how each individual uses an interface you'll find little quirks that they do. Sometimes these little actions they do by accident can give you the most insight.
Watch and learn, don't correct.
Reducing cognitive load in users comes from reducing the amount of outputs they are viewing. Its not about giving the user less to look at, but about prioritizing what they need to see at the moment.
