Product Design · Data Visualization · Rapid Delivery · Houston Mechatronics, Inc. · 2017

Snake Robot

Overview

I led the design and front-end implementation of the control interface for an autonomous pipe inspection robot.

As the sole designer, I was responsible for the entire operator experience—real-time video, inspection data visualization, robot navigation, and hardware health monitoring. Because the robot operates wirelessly and autonomously, the interface functioned as the only control surface between the operator and the physical system. Design decisions therefore had direct consequences on operational reliability and field readiness.

Role: Lead Product Designer
Tools: Photoshop · Illustrator · HTML · CSS · JavaScript · Node.js

The challenge

Autonomy shifted all responsibility onto the interface.

Operators needed to simultaneously monitor live video, interpret wall condition data, control robot movement, and assess hardware health—without physical access to the robot itself. Any loss of clarity, latency, or legibility would immediately compromise operation.

Early visual explorations revealed a second constraint: dark-themed interfaces performed poorly in outdoor environments. Under direct sunlight, contrast and readability degraded significantly, creating unacceptable risk during field use.

The challenge was to design a single, coherent control system that remained legible, responsive, and trustworthy across devices and conditions.

The approach

I treated the interface as a real-time control surface rather than a traditional dashboard.

The system was designed to prioritize continuous situational awareness: live video as the primary anchor, inspection data as contextual overlays, and system health always accessible without interrupting control flow. Layout, color, and interaction decisions were evaluated against outdoor visibility, cognitive load, and response speed.

In parallel, I adopted a rapid, code-first design process to validate assumptions under real constraints rather than static mockups.

Process

Rapid Requirement Framing

I facilitated cross-functional working sessions to define the minimum viable control surface: live video streaming, wall condition visualization, movement control, and hardware health. Lightweight prototypes were used to validate task flow and interaction priority before committing to implementation.

This allowed development to proceed without over-specification while preserving UX intent.

Layout Architecture

I evaluated multiple layout structures against operational criteria: visibility, interruption cost, and error recovery.

The final architecture anchors the experience with a persistent main canvas, while secondary controls and navigation live in a collapsible left panel—available when needed, invisible when not. Consistent, card-based layouts were used across functional areas to reduce relearning and scanning effort.

MVP Delivery Under Constraint

I delivered a fully coded MVP in under three weeks for a critical investor demonstration.

This phase prioritized functional completeness and interaction clarity over polish, ensuring the system could be realistically operated and evaluated. The successful demo validated both the product direction and the interface model, unlocking continued development.

Visual System for Field Use

Following validation, I led a visual redesign optimized for outdoor legibility.

The final system adopted a high-contrast light theme aligned with the hardware brand—white surfaces with orange and dark grey accents. This significantly improved visibility in direct sunlight while creating a cohesive relationship between the physical robot and its digital interface.

Inspection Data Visualization

I designed a heat map visualization representing unwrapped pipe wall thickness across a 15 × 360 data grid.

Density, color scaling, and interaction thresholds were calibrated to balance interpretability with screen constraints across mobile, tablet, and desktop breakpoints—ensuring anomalies were detectable without overwhelming the operator.

System Health Awareness

I designed an interactive robot schematic embedded in the status area of the interface.

Component states are communicated through immediate visual feedback, with direct access to real-time metrics including battery levels, motor speed, current draw, and sensor data. This allowed operators to assess system health continuously without leaving the primary control context.

Outcomes

What changed

Delivered a functional, coded MVP in under three weeks for investor evaluation

Deployed a responsive control interface across mobile, tablet, and desktop

Approved for field deployment following validation testing

Next projectUnified Enterprise Data Platform