Overview
MK.IO Beam is a software-based, cloud-connected live-video edge processing solution designed for contribution, head-end, reception, and streaming workflows. It runs on commodity commercial off-the-shelf (COTS) servers (or certified appliances) and is integrated with the MK.IO cloud control plane for orchestration, monitoring and lifecycle management.
In simple terms: it turns traditional hardware-heavy video processing (encoders, multiplexers, transport devices) into a flexible, software-driven platform that can be deployed at the edge (in venue, on-site, data centre) and controlled via the cloud.
Design Focus Areas
Since the MK.IO portal already defines the core UX patterns, the Beam module’s design work concentrated on:
UX Adaptation:
- Integrating Beam workflows (Edge Node Setup, Channel Creation, Live Monitoring) seamlessly into the existing MK.IO navigation.
- Ensuring task continuity — users transition from cloud workflows (in MK.IO Core) to edge workflows (in Beam) without learning a new interface.
- Maintaining information hierarchy consistent with the main portal (Dashboard → Modules → Details → Actions).
- Introducing real-time feedback patterns for network status, node health, and stream state — aligned with MK.IO’s overall interaction language.
Deliverables:
- Task Flows for Beam Modules, Edge Workflow Mapping, UX Adaptation Spec
UI Extension
- Beam inherits the core MK.IO design system — typography, color palette, button hierarchy, iconography, and alert system.
- Created new components specific to Beam:
- Node cards with live metrics (CPU, network, stream count)
- Channel topology view (source → edge → output)
- Real-time status badges and logs panel
- Integrated these within MK.IO’s unified grid layout and dashboard architecture.
- Visual states and indicators reuse existing color tokens and component structure for seamless platform continuity.
Deliverables:
- New UI Components, Visual Specs, Beam-Specific Figma Pages
Interaction Design Enhancements
- Added micro-interactions for live telemetry, status polling, and error alerts.
- Introduced contextual action drawers for quick configuration without leaving the main view.
- Optimized refresh intervals and transitions for real-time updates to match Beam’s edge use cases.
Deliverables:
- Interaction Design Notes, Motion Specs, Edge Operations Feedback Patterns
Integration Principles
To ensure MK.IO Beam fits naturally into the existing experience, the design adhered to these principles:
Principles:
- Unified Navigation
- Beam appears as a module under “Edge Services” or “Processing,” maintaining left-nav consistency.
- Shared Visual Identity
- Reuses MK.IO typography, color tokens, spacing, and grid systems.
- Consistent Interaction Models
- Forms, alerts, and dialogs follow existing portal patterns.
- Scalable Design System
- Any Beam-specific components are added to the shared MK.IO design system for reuse.
Deliverables for the Beam Integration Phase
- UX flow integration with MK.IO navigation
- Beam-specific module architecture & task mapping
- New UI components (Node cards, Logs Panel, Channel View)
- Component specs added to MK.IO design system
- QA checklist for portal integration
Outcome
- MK.IO Beam feels natively integrated, not like an add-on.
- Users navigate between cloud orchestration (MK.IO Core) and edge orchestration (Beam) effortlessly.
- Unified user experience, visual design, and interaction model across the platform.
