Monitoring Dashboard | Case Study | Web Screens

Design Process (UX Framework + System Constraints)

1. Discover - Research, Heuristics & Latency Awareness

To understand the problem space, I combined my ROS research exposure (UG) with heuristic evaluation of existing robotics dashboards and system tools.

• Conducted heuristic analysis on ROS visualization tools (RViz-like interfaces) and industrial dashboards to identify usability gaps
• Identified key pain points:
  • Information overload from raw logs/topics
  • Lack of clear prioritization in alerts
  • Poor visibility of system state transitions
• Defined primary users in a RaaS (Robotics as a Service) context:
  • Operators (real-time monitoring)
  • Supervisors (multi-robot overview)
• Latency consideration:
  • Recognised that ROS systems can have network or processing delays, so UI must handle delayed or intermittent data gracefully
  • Avoided “false real-time” assumptions by designing for state refresh, fallback states, and connection indicators

2. Define - Personas, Empathy & Problem Framing

Based on research insights, I structured the problem using personas and empathy mapping.

• Created operator-focused persona:
  • Needs quick decisions under pressure
  • Cannot interpret raw ROS logs
• Defined core problems:
  • “How might we reduce cognitive load while maintaining critical awareness?”
  • “How might we design for safe interaction in high-risk robotic systems?”
• Empathy-driven insights:
  • Users need clarity over completeness
  • Alerts must be prioritised, not equal
  • System trust depends on consistent feedback (especially under latency)
• Latency framing:
  • Designed for graceful degradation (e.g., “Last updated 2s ago”)
  • Included connection states (Live / Delayed / Disconnected) to build trust

3. Develop - Wireframing, Information Architecture & Prototyping

The solution was developed through iterative wireframing and high-fidelity prototyping in Figma.

• Low → High Fidelity Flow:
  • Started with wireframes to structure layout (map | metrics | sensors | controls).
  • Evolved into high-fidelity UI with visual hierarchy and state-based design