Skip to content
DashboardsConfidentialFlagship

Omni-Channel Contact Center Dashboard

One operational view across calls, chats, WhatsApp and campaigns — KPIs, channel performance, filters and drill-downs for supervisors.

Client

Enterprise Contact Center Platform (confidential)

Role

UX/UI Designer — information architecture, data hierarchy, dashboard and component library.

Platform

Web Dashboard

Confidentiality: Client identity and operational metrics are confidential. The interface patterns shown are sanitised.

DashboardAnalyticsEnterpriseData UX
OverviewContextJourneyUX DecisionsInteractionEdge CasesScreensLearnings

01Overview

An operations dashboard for contact-centre supervisors: calls, chats, WhatsApp and campaigns in one view, with KPIs, channel performance, trends, filters and drill-downs — designed as a decision tool, not a poster.

02Context

Operations teams ran reports in separate tools per channel. Staffing, campaign and coverage decisions were slow because the data lived apart. The dashboard's job was to make one question answerable in seconds: what is happening across our channels right now?

03User Journey

How supervisors work with it

  1. 01

    Land on overview

    KPIs and channel status visible without a click.

  2. 02

    Spot the anomaly

    Trends and alerts surface what changed, not everything.

  3. 03

    Filter the context

    Channel, time range and campaign filters with sensible defaults.

  4. 04

    Drill down

    A KPI opens its detail view — queue, agents, conversations, reasons.

  5. 05

    Act

    Inline actions and handoff to the relevant workflow.

04UX Decisions

01KPI cards, not number walls

Four to six KPIs at the top, each a card with a delta and a sparkline — scannable in a glance, clickable for depth.

02Channels as first-class tabs

Calls, chats, WhatsApp and campaigns get parallel views with identical layout rules, so learning one teaches all.

03Filters with defaults, not empty states

The filter bar opens with a sensible default range, so the page is never a blank void before configuration.

04Drill-down as the only click

One click from KPI to detail; the detail view answers the question the KPI raised.

05Real-time is marked, not animated

Live data is labelled with a refresh timestamp — no gratuitous motion pretending to be live.

05Interaction Design

States, transitions and behaviour — not just the happy path.

Loading

Skeleton cards preserve layout so the page never jumps; refresh states are visible.

Empty state

A named, explained empty state per view ('No calls in this range') with a reset-filters action.

Metric API failure

The affected panel shows a retry state, not a broken page — partial failure is contained.

Stale data

A timestamp plus a 'data is X minutes old' marker keeps stale data honest.

Permission-limited views

Restricted metrics render as explained placeholders, not mysterious blanks.

06Edge Cases

Good UX is what happens when things go wrong. Each case: the problem, the user-facing message and the recovery action.

No data for period

Edge case

A channel has no activity in the selected range.

“No calls in this period.”

Recovery: Empty state with a reset-filter action and a link to a wider range.

API failure

Edge case

One metric service is down.

“Live metrics unavailable.”

Recovery: Panel-level retry with last-known values shown, page otherwise intact.

Stale data

Edge case

The data feed lags.

“Data is 15 minutes old.”

Recovery: Timestamp marker plus a refresh control — no silent staleness.

Permission limits

Edge case

The user cannot see a metric.

“This metric requires supervisor access.”

Recovery: Explained placeholder instead of a confusing blank.

07Final Experience

Omni-channel overview

Omni-channel overview

KPI cards, channel tabs and trends — the decision surface, not a poster.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Channel detail

Channel detail

Queue, agents, conversations and reasons — one click from the KPI.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Filter bar

Filter bar

Sensible defaults; the page is never a blank void before configuration.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

Drill-down modal

Drill-down modal

Detail answers the question the KPI raised, then closes without losing context.

Schematic placeholder — add an approved screenshot via data/case-studies.ts

08Learnings

  • Dashboards are tools, not posters: define the decision each view supports before designing a single chart.
  • Data density is a design problem — hierarchy and spacing decide what is readable.
  • Partial failure states (one panel down) are more common than total outages; design for them.

Next case study

AI Agent Assist Dashboard

All workNext case study

← /work · case study · omni-channel-dashboard