AI Systems · 2025 – 2026 · LIVE

CollabAI Redesign — Multi-Agent Workspace

Full UI/UX redesign of CollabAI's multi-agent collaboration platform, replacing a cluttered neon interface with a minimal dark workspace featuring multi-model streaming (Groq, Gemini, OpenRouter), agent orchestration, and in-context tool execution.

Company
CollabAI
Client
CollabAI Platform
Timeline
2 Months
Scope
Multi-Agent UX, Real-Time Streaming, Global Composer, Design System, Theme Engine & Personalization, Full-Stack Prototype

Overview & TL;DR

The Challenge: The initial platform suffered from high visual clutter, confusing agent orchestration controls, and poor readability during multi-agent code generation.

My Role: Lead UI/UX Designer — stripped away redundant UI layers, redesigned the design system, and built functional prototypes with live model streaming.

The Method: Designed an intuitive global composer with @agent and #tag shortcuts, multi-model provider switching (Groq 120fps, Gemini, OpenRouter), and clean workspace hierarchy.

The Problem

When orchestrating multiple autonomous AI agents simultaneously, users were overwhelmed by jumping layout frames, indistinct agent roles, and unclear streaming feedback.

Process & Implementation

Distraction-Free Multi-Agent Canvas & Composer

Restructured the core dashboard around a global quick composer with @agent routing, #tag shortcuts, and unified workspace breadcrumbs.

  • Distinct visual identity cards for individual agents (Aster Architect, Reasoning Advisor, Color Palette Gen)
  • Seamless model provider selection with real-time switching between Groq, Gemini, and OpenRouter
  • Directory-connected Knowledge Base, persistent projects, and in-context tool attachments

Multi-Theme Aesthetic Customization Engine

Engineered an adaptive theme architecture allowing developers and power users to tailor their workspace ambiance according to cognitive context and personal aesthetic preference.

  • Crafted 5 bespoke visual environments: Light (clean minimal), Pink (warm pastel with floating sakura petals), CRT (green phosphor terminal with scanlines & barrel distortion), Synth (80s outrun neon horizon grid), and SaaS (deep cosmic dark mode)
  • Maintained strict WCAG contrast compliance and ergonomic text legibility across all prompt composers and chat streams
  • Decoupled brand token hierarchies to allow dynamic background shaders, floating particle physics, and high-contrast control states

Measurable Outcomes

100%
Visual Clarity
Replaced cluttered neon aesthetic with unified minimal dark architecture
120 fps
Execution Speed
Integrated low-latency Groq model routing for instantaneous chat responses

Transformed a cluttered technical proof-of-concept into a clean, modern AI workspace praised by users for its speed, clarity, and ergonomic multi-agent orchestration.

Visual Artifacts & Gallery

  • CollabAI Redesigned Dashboard — Minimal dark architecture and unified @agent composer (Asset: /assets/projects/collabai/collabai-dashboard-after.webp)
  • CollabAI Redesigned Chat — Fluid conversational canvas with reasoning stream (Asset: /assets/projects/collabai/collabai-chat-after.webp)
  • CollabAI Light Theme — Clean high-key workspace with floating mathematical glyphs (Asset: /assets/projects/collabai/themes/collabai-theme-01-light.webp)
  • CollabAI Pink Theme — Warm pastel cream with vibrant pink accents and cherry blossom petals (Asset: /assets/projects/collabai/themes/collabai-theme-02-pink.webp)
  • CollabAI CRT Theme — Retro green phosphor terminal with curved scanlines and pixel matrices (Asset: /assets/projects/collabai/themes/collabai-theme-03-crt.webp)
  • CollabAI Synthwave Theme — 80s outrun horizon grid with glowing magenta neon accents (Asset: /assets/projects/collabai/themes/collabai-theme-04-synth.webp)
  • CollabAI SaaS Dark Theme — Deep space starfield with electric cyan glow and high-contrast controls (Asset: /assets/projects/collabai/themes/collabai-theme-05-saas.webp)
Visit Live Production Project ↗