Back to All Work
SaaS Platform•Client: Kroma Systems Inc.•Year: 2025

Kroma Cloud Monitoring Platform

An enterprise-scale distributed cloud monitor delivering real-time telemetry, visual node topology maps, and predictive capacity analytics for modern DevOps teams.

Kroma Cloud Monitoring Platform
My Role
Lead Product Designer & Principal Full-Stack Engineer
Timeline
4 Months (2025)
Core Stack
Next.js 15, TypeScript
Deployment
Production Active
Engineering Telemetry

Project Stats

Delivery Metrics & Quality Benchmarks
Core Squad
Team Size
4 Engineers
Cross-functional engineering & UI design
Tested & Verified
Code Coverage
96.8%
Rigorous unit, integration & E2E suites
Sprint Delivery
Completion Time
6 Weeks
From vector wireframes to production deployment
Core Web Vitals
Lighthouse & Web Vitals
99/100
Sub-second LCP, zero layout shift (CLS: 0.00)
High Throughput
Sprint Velocity
48 Pts / Sprint
Agile 2-week continuous delivery cycles
Enterprise Spec
Architecture Paradigm
Distributed Telemetry Engine
Strict TypeScript typing with zero runtime slop

Measurable Outcomes

120k /sec
Event Throughput
< 18ms
Dashboard Latency
-42%
Incident Resolution

The Challenge

DevOps engineers faced fragmented tools requiring context-switching between log aggregators, AWS metrics, and APM tracing. The client needed a unified dashboard processing 120,000 events/second without browser lag.

The Architectural Approach

Designed an ultra-dense, low-cognitive-load UI inspired by avionics instrumentation. Architected a multi-threaded web worker pipeline for real-time D3 rendering and high-frequency WebSocket streaming.

Kroma Cloud Monitoring Platform interface architecture

Design Direction & Typography System

Monochrome slate canvas with purposeful semantic status indicators.

Development & Engineering Details

Built a C# .NET Core telemetry gateway connecting to TimescaleDB and Redis Streams with Next.js App Router.

Delivered Capabilities

Interactive visual cluster topology explorer with live node health
Instant query engine with syntax highlighting and autocompletion
Custom alert escalation matrix with Slack and WhatsApp webhooks

Technologies Deployed

Next.js 15TypeScriptTailwind CSSC# / .NET 9PostgreSQLWebSocketsD3.js