Sonic View
Distran
Sonic View
Distran – Leak detection web UI
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
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.
Sneak peak
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.
Draw & configure zones
The configuration page empowers operators to configure zones directly on the camera UI. These zones essentially define specific areas of interest for gas leak detection. Beyond zone creation, operators can establish thresholds and quantification values for each zone.
Full case study will be published after the product launch end of november.
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 configuration page empowers operators to configure zones directly on the camera UI. These zones essentially define specific areas of interest for gas leak detection. Beyond zone creation, operators can establish thresholds and quantification values for each zone.
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