Distran

SafetyOps Platform 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 collaboration with PMs, researchers, engineers to ensure technical feasibility, brand consistency and consensus between stakeholders.

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.

Role

Lead Designer

collaborators

Nikhil Biyani (Tech lead)
Mara Pavlov (Designer)

Matteo Gamba (Dev)

Duration

Aug 23 – Dec 24

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.

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 better understand the environment.

Alert Configurations

Operators would like to set thresholds 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.
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.
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.
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.
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.
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.
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 sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time. This allows for an analysis of ongoing and resolved gas leaks.
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 allows 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. Each alert includes information on 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 sound notifications ensure timely awareness of critical events, even in high-distraction environments. Alert replay enables operators to revisit past events in real-time. This allows for an analysis of ongoing and resolved gas leaks.
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 allows 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. Each alert includes information on 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 our iterations on live and replay mode.

initial explorations (MVP)

Initial Prototype explores a multi-camera view, but reduced to a single view for focused functionality and early testing.

iteration 2

Final iteration

2nd Iteration: A bold colour palette was dropped for usability. The replay feature was moved below the camera. Key challenges: unclear live/replay distinction, imprecise date selection, limited playback, and no alert-specific replays. Final updates added a precise replay timeline, repositioned sidebar, prioritised active alerts, unified banners, and colour-coded alerts to improve 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.

Distran

SafetyOps Platform UI