Atelier Dashboard

A real-time contact center dashboard, reimagined as a public concept demo.

  • Role Designer, Developer
  • Tools React, Vite, Tailwind CSS, Netlify, Zoom Contact Center API (production)
  • Timeline 6 weeks

Summary

Atelier is a concept demo inspired by a real dashboard I built for a professional services business. The production version runs privately at the business and uses Zoom’s APIs to pull real-time data from Zoom Contact Center. This demo recreates the experience for a fictional gallery network, The Atelier Group, using simulated data so the work can be shared publicly.

The problem

After transitioning to a new contact center service, the business needed a dashboard that felt familiar to its users instead of the one that came with the product. The team needed to see agent availability and queue coverage at a glance, without learning a new tool.

What I built

  • Real-time agent board: Every agent’s status, sub status, time in status, and queue, updating live.
  • Queue coverage at a glance: Each queue shows how many agents are available and flags any queue with no one available.
  • Idle alerts: Agents who have been Not Ready for 20+ minutes are flagged automatically.
  • Click-to-filter: Select a status card to show only the agents in that status.
  • Themes: Light and dark modes, plus Go Pink, a seasonal theme for Breast Cancer Awareness Month, and a seasonal greeting. Viewers’ choices are saved in their browser.
  • Accessible and responsive: WCAG AA contrast, screen reader labels, and a layout that works on phones.
Atelier Dashboard in the Go Pink theme, with a pink background, a bow emoji in the Hello, Team! greeting, and the same queue cards and agent table
Go Pink, a seasonal theme for Breast Cancer Awareness Month, alongside the standard light and dark modes.
Atelier Dashboard filtered to show only the four Not Ready agents, one of them flagged Idle after 34 minutes in a meeting
Click a status card to filter the board. Here, only Not Ready agents, with one flagged as idle.
Atelier Dashboard on a phone, with queue and status cards stacked in two columns above the agent table
On a phone, the cards stack and the table adapts to the screen.

The result

  • The production version has been live for 10 months, serving 29 users on live contact center data.
  • Gave the business’s team a familiar, at-a-glance view of agent availability after the platform transition.
  • This public demo recreates the experience with simulated data, so the work can be shared without exposing any client or employee information.
View live demo
BACK TO SYSTEMS