All Work
Product BuildContact centre QA

Certainly CX

A multi-tenant QA platform for contact centres. It ingests support conversations and calls, redacts the personal data out of them, scores them against configurable rubrics with AI, and turns the results into agent coaching and client reporting.

Certainly CX — Quality Analytics — scores, distribution and rubric breakdown. Figures are stand-in data.
Quality Analytics — scores, distribution and rubric breakdown. Figures are stand-in data.

The problem

Contact centres are measured on quality they can barely sample. A QA lead listening to calls by hand gets through perhaps two per agent per week, which is too thin a sample to coach from and far too thin to report to a client on.

The platform scores every conversation instead of a handful, then does the harder thing: turns thousands of scores into a short list of what to coach next.

Four apps, one product

A conversation uploaded in the dashboard is queued by a NestJS API, redacted and scored by a Python service, written back through a service-authenticated callback, and surfaced as QA scores, coaching priorities and client reports. A Chrome side panel is the same platform seen from the agent's own desk while they work.

The redaction step is not optional plumbing. Support transcripts are full of names, card numbers and addresses, and they are being sent to a language model for scoring — so personal data is stripped before it leaves the system, not after.

The design system, and what it cost to get right

The brand is six colours: navy, blue, red, off-white and two tints. Everything else in the interface is derived from them, and the exceptions are documented in the token file itself rather than in someone's memory.

Two of those exceptions are accessibility fixes worth stating plainly. Success started as emerald-500 and is now emerald-700, because the original rendered at 2.5:1 on both the card background and its own tint — and it was being used as a text and icon colour in around fifty places, every one of which failed WCAG AA. Warning moved to amber-700 for the same reason, at 3.5:1 on white in a dozen validation notices.

A third is subtler: the fifth chart colour was set to the same value as the page background, so any series landing in slot five rendered invisible. Nothing consumed slot five yet, so it had never shown up as a bug — it was found by reading the tokens rather than by looking at a chart.

Built for the width of a data product

The page container caps at 1600px rather than the conventional 1280px reading measure. These screens are tables and side-by-side charts, and a reading measure would have wasted a third of a 1920px display — the QA leads using this sit in front of it all day.

The layout is held in place by visual regression tests that snapshot the page shell with data deliberately stubbed empty, so a backend change cannot break them and a spacing regression cannot slip through.

Palette

Navy

#112130

Sidebar and text

Blue

#225BC6

Primary and info

Red

#FF5655

Brand accent, destructive

Off-white

#FCFAF7

Page ground

Success

#047857

Emerald-700 — see below

Warning

#A16207

Amber-700 — see below

Scope

Screens
32
UI components
456
API modules
40
Data schemas
31
Tests
632
Apps in the platform
4

Screens

Certainly CX — The dashboard leads with an AI-written daily summary, then the trend and team snapshot beneath it.
The dashboard leads with an AI-written daily summary, then the trend and team snapshot beneath it.
Certainly CX — Coaching priorities, in its empty state — the layout the visual regression suite protects.
Coaching priorities, in its empty state — the layout the visual regression suite protects.

What we did

  • Product design
  • Design system and accessibility
  • Interface design — 32 screens
  • Full-stack build
  • Chrome extension
  • AI pipeline integration

Built with

  • Next.js 16
  • React 19
  • Tailwind 4
  • Redux Toolkit
  • SWR
  • NestJS 11
  • MongoDB
  • Redis
  • BullMQ
  • Python
  • FastAPI
  • Presidio
  • OpenAI
  • Chrome MV3
  • Playwright