Sonic View
Leak detection web UI
Leak detection web UI
Designed a new Web-UI from 0 to 1 for monitoring industrial risks, resulting in the acquisition of two multinational clients ahead of its planned official launch. This interface is now the foundational framework for the client's new Fixed Detector device. I facilitated seamless collaboration with PMs, researchers, and engineers to ensure technical feasibility, brand consistency and consensus between stakeholders.
I led the entire design process from concept to implementation. I designed, prototyped and tested the product’s main features, interactions and user flows. I collaborated with other designers to ensure brand consistency and worked closely with PMs, researchers, and engineers. I established timelines and consensus from all parties around product flow, technology limitations, and research goals.
Role
Lead Designer
collaborators
Nikhil Biyani (Tech lead)
Mara Pavlov (Designer)
Matteo Gamba (Dev)
Duration
Jul 23 – Present
Tools
Figma
Framer
Duration
Jul 23 – Present
Tools
Figma
Framer
Phabricator
Design Goal
Empower operators to proactively safeguard facilities through real-time monitoring, intelligent alerts, and actionable insights derived from gas leak data.
Core experiences
Monitor alerts in real-time
This overview page provides a real-time view of the camera feed alongside current and recently closed alerts. It allows for efficient managing and reviewing of alerts. Replay functionality is also available for in-depth analysis.
The alert history page will enable users to efficiently search, filter, and analyze past alerts. It will provide detailed views, sortable results, and visualizations to help users understand alert trends over time.
This overview page provides a real-time view of the camera feed alongside current and recently closed alerts. It allows for efficient managing and reviewing of alerts. Replay functionality is also available for in-depth analysis.
The alert history page will enable users to efficiently search, filter, and analyze past alerts. It will provide detailed views, sortable results, and visualizations to help users understand alert trends over time.
UXR
Discovery pillars for our approach
Operators need access to a live view to quickly assess the facility's current state. To design an effective interface, we began our research by collaborating with existing operators to identify the critical information they need and when they need it.
Decision Making
What information is critical for operators to confidently manage gas leak events?
Habits
How do operators currently monitor and respond to potential gas leaks?
Situational awareness
What information and tools empower operators to define and review accurate alerts?
Situational
awareness
What information and tools empower operators to define and review accurate alerts?
Priorisation
What are the core tasks operators perform during gas leak detection and response?
Feed
Operators would like to see the live feed from the fixed detectors so that they can view the scene under surveillance.
Recorded Data
Operators would like to view the available recorded data so that they can view what happened in past.
Alerts
Operators would like to view the current and past alerts so that they can take appropriate action or learn more about the alert.
Areas of Interest
Operators would like to define and view zones of a camera so that they know which areas are under surveillance.
Sensitivity Indicator
Operators would like to see the current sensitivity of the camera so they can get a better understanding of the environment.
Alert Configurations
Operators would like to set threshold and quantification values on their alerts, so they can influence the sensitivity of the alert to be more accurate.
For Distran, I designed a Web-UI for their new Fixed Detector device, that allows operators to monitor gas leak activity and quickly manage high-risk alerts. The client is a world-leading manufacturer of ultrasonic cameras for gas leak detection on land and in space, with international customers in more than 50 countries, including NASA. This interface is now the foundational framework for the client's next-generation camera product line. It has already secured two new clients.
I led the entire design process from concept to implementation. I designed, prototyped and tested the product’s main features, interactions and user flows. I collaborated with other designers to ensure brand consistency and worked closely with PMs, researchers, and engineers. I established timelines and consensus from all parties around product flow, technology limitations, and research goals. The Web-UI will be launched as a new product into the client's product line in November.
Role
Lead Designer
collaborators
Nikhil Biyani (tech lead)
Mara Pavlov (designer)
Matteo Gamba (dev)
Duration
Jul 23 – Present
Tools
Figma
Framer
Phabricator
Features & Reasoning
Configuration workflow
This web UI empowers operators to define zones on the camera feed to monitor specific areas, set alert thresholds, and manage triggered alerts. They can view live camera feeds, review past alerts, and filter through historical data for comprehensive gas leak monitoring.
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Settings
The settings tab operators can manage general camera settings and edit technical camera details. This reduces the need to navigate back and forth between screens, minimising mental load and streamlining the workflow for operators.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Deactivating zones
Operators can temporarily disable specific zones or the entire alert system to mitigate false alarms triggered by environmental disturbances like construction. This feature helps reduce alert fatigue and allows operators to focus on genuine threats.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Toolbar to draw shapes
The editor toolbar provides intuitive tools for drawing custom zones directly on the camera UI. Similar to route planning tools, operators can use a paintbrush for precise delineation and a bucket tool for efficient selection of larger areas. Zone colours can be customised for improved visibility and accessibility.
Creating zones
The Zones tab empowers operators to define custom areas of interest, tailoring system sensitivity to environmental factors and potential leak risks. Operators with editor rights can easily define and customise zones on the Zones tab, improving system responsiveness to specific site conditions
Alert interface explorations
Operators can quickly monitor live alerts, key metrics, and events. They can correlate camera and sidebar data to act on critical information. This view can also be displayed on-site, ensuring immediate alert tracking.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Alert visualisation
Operators can easily identify open and closed alerts based on visual cues and clear labels. Open alerts require immediate attention and are highest priority, therefore always displayed first.
Alert replay
A sliding banner, pulsating sidebar icons, and future sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time, facilitating analysis of both ongoing and resolved gas leaks. This feature in is used to understand event development and improving future incident prevention.
Intuitive color coding
Each alert is assigned a distinct colour for easy identification, on both the sidebar and the camera UI. This allows the user to grasp the correlation between the alert on the sidebar and on the camera UI.
Tabular alert overview
The alert history page will allow users to efficiently search and analyse past alerts. Users can filter and sort alerts by various criteria, such as date range, severity level, alert type, and source. Detailed views for each alert will include timestamps, source, severity, descriptions, and attachments.
Alert visualisation
During replay mode, real-time alerts will trigger notifications, prompting users to switch back to live view to address immediate threats.
Guidance and tooltips
Tooltips and an onboarding flow enhance user experience. Tooltips provide contextual information, while the onboarding guide assists in zone creation. This improves accessibility and usability for users of all skill levels.
Iterations
Design explorations & iterations
The web interface design was an iterative process involving product managers, engineers, and designers. We balanced user needs, technical feasibility, and business goals within tight constraints. Below is an example of our iterations on live and replay mode.
initial explorations (MVP)
Initial Prototype: A quick prototype explored various camera display concepts. A multi-camera view was considered but reduced to a single view for focused functionality and early testing. 2nd Iteration: A bold colour palette was dropped due to usability issues. The replay feature, initially separate, was integrated below the camera view. Challenges included unclear live/replay distinction, imprecise date selection, limited playback control, and no alert-specific replays.
iteration 2
Final iteration
Final iterations: The replay bar allowed precise time selection, with a refined design system for clarity and branding. A consolidated header and collapsible replay section improved usability. Workflow optimizations included repositioning the sidebar, prioritizing active alerts, and unifying alert banners. A replay timeline enhanced playback control, while color-coded alerts improved efficiency.
learnings and impact
This interface innovation has enabled the successful launch of a new, market-leading camera, where its software interface is now a key competitive advantage.
Since its recent release, over 40 operators in several countries have incorporated the Web UI into their daily workflows.
Sonic View
Leak detection web UI
Core Experiences
UXR
Features