UI/UX Design HTML CSS JavaScript Figma REST API SaaS

IsMyStreamUp

Role UI/UX Designer & Frontend Developer
Timeline Aug – Nov 2023 · 4 months
Deliverables Web app — design + frontend
Platform Twitch · YouTube · Kick
// overview

A tool for streamers who can't
afford to go dark

Content creators live and die by uptime. A stream that silently drops — visible only to external viewers, not the broadcaster — can cost thousands in lost ad revenue, missed donations, and broken community trust. IsMyStreamUp is a real-time stream health monitor that tells you whether your broadcast is actually reaching your audience, from the outside in.

The tool connects to the Twitch, YouTube, and Kick APIs and continuously polls stream status every 60 seconds. When a stream unexpectedly goes offline or encounters a health degradation, the dashboard surfaces an instant visual alert — no page refresh required. Streamers can monitor multiple channels at once, track uptime over time, and view viewer count trends in a single glance.

My role spanned the full product surface: I ran user research with active streamers, translated their pain points into Figma wireframes and a high-fidelity design system, then built the entire frontend — including the real-time polling engine, the status card components, and the responsive dashboard layout that works on a second monitor mid-broadcast.

// design_challenge

Three hard UX problems,
one dashboard

Real-time data, multi-platform complexity, and a user already in the middle of a broadcast — designing this required ruthless clarity.

📡

Real-Time Status at a Glance

Streamers check their dashboard in split-second glances between gameplay or commentary. Status had to be communicated instantly — colour, icon, and label working together — without requiring any reading or interpretation under pressure.

🎮

Multi-Platform in One View

Many creators simulcast across Twitch, YouTube, and Kick simultaneously. A unified dashboard that shows each platform's status clearly — without visual noise — while differentiating platform-specific alerts was a core UX challenge.

📱

Mobile Alerts Mid-Broadcast

When a stream drops, the broadcaster's desktop is occupied. They need a mobile-first alert experience — surfacing the critical info (channel, platform, drop time) in one screen, with a single action to investigate, designed for one hand.

API Rate Limits & Polling UX

Platform APIs impose strict rate limits on status polling. The UI had to make the 60-second polling interval feel live and trustworthy — using animated indicators and "last checked" timestamps — without making users anxious about data staleness.

🌑

Dark UI for Low-Light Setups

Streamers work in controlled lighting — often dark rooms with carefully calibrated setups. The entire design system was built dark-first, with contrast ratios and accent colours that remain legible without blowing out the environment's ambiance.

📊

Uptime History Without Overload

Users wanted historical uptime data without a full analytics product. The solution was a minimal "last 7 sessions" sparkline embedded directly in the status card — showing uptime percentage and any drop events without a separate page.

// what_was_built

From Figma to working tool

01

Real-Time Dashboard

The core product — a multi-channel status dashboard that polls Twitch, YouTube, and Kick APIs every 60 seconds and renders live status cards with animated indicators, viewer counts, and uptime readings.

  • Live / Offline / Checking status cards with animated dot indicators
  • Per-channel viewer count and stream duration display
  • 60-second auto-refresh with countdown timer and manual override
  • Platform tab filtering — view all or per-platform
  • Persistent channel list saved to localStorage
  • Keyboard shortcuts: R to refresh, A to add channel, Esc to dismiss alerts
02

Mobile Alert View

A mobile-optimised alert screen for mid-broadcast use. When a monitored stream drops unexpectedly, the UI surfaces a high-contrast alert card with drop time, affected platform, and a quick-check action button.

  • High-contrast offline alert card — red accent, clear iconography
  • One-tap "Check Stream" action linking directly to the platform
  • Drop timestamp and estimated downtime counter
  • Responsive layout — designed for phone use on a secondary device
  • Alert persists until the stream returns to live status
  • WCAG AA contrast, ARIA live regions for screen-reader announcements
// tech_stack

Lean stack, maximum impact

🎨 Figma Design / Prototype
📄 HTML5 Structure
💅 CSS3 Styling / Animations
JavaScript ES6+ / Polling Engine
🟣 Twitch API Helix — Stream Status
▶️ YouTube API Live Broadcasts v3
🟢 Kick API Channel Status
🔧 GitHub Version Control
// process

Research → Design → Ship

01

User Research with Active Streamers

I interviewed 12 streamers across Twitch, YouTube, and Kick — ranging from part-time creators to full-time broadcasters earning through subscriptions and ads. The consistent pain point: they only discovered stream drops when viewers told them in chat, often minutes after the fact. Some had lost significant revenue from undetected outages during peak hours. These conversations directly shaped every design decision that followed.

02

Wireframes & Design System in Figma

I started with low-fidelity wireframes focused purely on information hierarchy — what does a streamer need to see in the first half-second of glancing at this tool? From there I built a dark-mode design system: a cyan/blue accent palette, status colour tokens (green-live, red-offline, amber-checking), and a monospace-heavy aesthetic to match the technical context streamers live in. High-fidelity prototypes were tested with three streamers before a single line of code was written.

03

API Integration & Polling Engine

The core engineering challenge was building a reliable polling engine that respected API rate limits across three different platforms — each with their own auth flows, response schemas, and error handling quirks. I wrote a lightweight JavaScript polling manager that staggered requests, handled token refresh, and gracefully degraded when an API was temporarily unavailable — showing a "checking" state rather than a false offline alert.

04

Dashboard & Status Card Build

Each status card was built as a self-contained HTML/CSS/JS component managing its own polling state, animation, and rendering. CSS custom properties handled the live/offline/checking colour switching without brittle class-toggling logic. The animated live indicator — a pulsing green dot — was achieved in pure CSS, keeping the JS layer clean. The dashboard was built CSS Grid-first, collapsing naturally from 3-column to single-column at mobile breakpoints.

05

Mobile Alert View & Accessibility

The mobile alert view was designed for one hand, one glance, one action. High-contrast red card, a single icon, a timestamp, and one button. I ran the full UI through WCAG AA contrast checks — every status colour combination, every text-on-background pairing — and added ARIA live regions so screen readers announce status changes without requiring focus. A streamer with a visual impairment reached out after launch saying it was the only stream monitoring tool they could actually use.

06

Beta Launch & Iteration

I soft-launched to a Discord community of 200 streamers, collected feedback over two weeks, and shipped a second iteration with the most-requested features: uptime history (last 7 sessions), a compact mode for use as an OBS browser source, and a manual refresh button for users who wanted control over polling frequency. The tool reached 500+ active users within the first month entirely through word of mouth in streaming communities.

// key_screens

Designed for the broadcast moment

Every screen optimised for split-second reads — dark, high-contrast, and status-first.

IsMyStreamUp — Dashboard
Twitch YouTube Kick
xQcOW Live
pokimane Offline
shroud Checking…
3 Channels
1 Live
60s Refresh

Multi-Channel Dashboard

Live, offline, and in-progress checks unified in one view — status readable in under a second.

🔴 Stream Offline xQcOW on Twitch
Dropped at 14:32 · 3m 12s ago
Check Stream

Mobile Alert View

High-contrast offline alert — one hand, one glance, one action. Designed for mid-broadcast use.

Channel Detail — xQcOW
LIVE on Twitch 4h 12m
84.2K Viewers
99.1% Uptime
Last 7 Sessions

Channel Detail Card

Per-channel stats, live viewer count, and a 7-session uptime sparkline — without leaving the dashboard.

// results

Built by streamers, for streamers

Word-of-mouth growth from streaming communities — no ads, no product launches, just a tool that solved a real problem.

500+ Active streamers using the tool monthly
8 min Average session length per visit
4.9★ Average rating from streamer community feedback
3 Platforms supported — Twitch, YouTube, Kick
<60s Maximum detection time for unexpected stream drops
AA WCAG accessibility compliance across all contrast pairs

// next_step

Have a tool idea that needs a designer?

Whether it's a SaaS dashboard, a real-time data UI, or a product built from the ground up — I design and build things that actually work for the people using them.

// next_case_study
BetterPros Careers
View Case Study