Superpunch Chat · Internal communications platform · Global customer service operation
Bridging people, permissions, and
systems in a high-compliance call
centre environment
Timeline
2020 –
2023
Platform
Windows & MacOS desktop
Users
10,000+ agents globally
Team (Phase 2)
1 designer · 1 PM · 1 engineer
Phase 1
2020 · Junior UI Designer
Execution and delivery under senior direction
Phase 2
2022 – 2023 · Senior Product Designer
Sole designer — research, system, redesign
Design screens
Channel view · WPG Polo Park Netflix · Showing role tags, Acknowledgement widget, and Automations sidebar
Access code flow
Agent → Team Leader · SIDD-automated override request
RTA Bot · Team Leader view
Performance alert system · Structured, actionable, role-targeted
What this project is about
Compliance built into the interface
In a regulated call centre, missed policy updates carry real risk. The
Acknowledgement system turns a broadcast announcement into a trackable, confirmable record.
Speed as a design constraint
Agents request supervisor override codes while a customer waits on hold. The entire workflow — request, approval, code — needs to close in under 30 seconds.
People, systems, and authority in one view
Superpunch Chat connects agents, team leaders, and automated systems — CRM alerts, workforce management, AI copilot — in a single workspace purpose-built for the call centre floor.
02
Design decisions, feature by feature
What follows is a closer look at the decisions that shaped each part of the product — the research that informed them, the constraints that bounded them, and the reasoning behind the choices that were made.
Why this product exists
10,000+
agents using the platform globally
400+
members in a single client channel
6+
countries across the operation
0
personal devices allowed on the floor
Why not Slack or Teams?
Three reasons: data security — sensitive customer data can't transit third-party servers; workflow integration — proprietary CRM, RTA, and AI copilot systems need native hooks; cost — IM is a mature category, self-hosting at this scale is lower cost than licensing.
The working environment
Agents run three or four applications simultaneously. Superpunch Chat lives in the background — minimised — and gets pulled up fast when needed. It's a secondary tool that needs to behave like a primary one when called on.
Phase 1 → Phase 2
The first version launched as a web-based chat module. Covid-era scaling pushed management to expand it into a standalone native desktop app on both Windows and macOS, and integrate it with the broader internal tooling ecosystem.
Team constraint in Phase 2
One designer. One PM. One engineer. Every decision ran through a short-fast-focused filter. We referenced Vuetify — the component library the engineer already used — to design to what could actually be built.
01
Message layout and
scanability
Shipped · Phase 2
The problem
User research surfaced a clear pattern: agents felt like they were using a personal messaging app at work.
The bubble layout — left-right alternating, colour-coded by sender — created cognitive dissonance in a professional context.
We traced the root cause to scanability. In a busy channel with fast-moving conversation, agents need to extract information quickly and accurately. Bubbles force the eye across the page. A flat, left-aligned layout keeps everything in a single reading column.
"The previous design felt too much like WhatsApp. In a work channel, I just need to find information fast." — Agent feedback from 2022 user research
Font choice followed the same logic. Inter was selected for legibility at the character level — it cleanly distinguishes between the digit 1, lowercase l, and uppercase I. When agents are reading override codes and ticket numbers under time pressure, that distinction matters.
02
Role identification
system
Shipped · Phase 2
The problem
Superpunch's org structure has real authority gradients. Team Leaders approve override requests.
Operations Managers set policy. In a busy channel, agents need to know immediately who they're reading — not after they've processed the message.
A compact role tag, displayed inline next to the sender's name wherever a name appears: channel messages, direct message headers, the sidebar contact list. Team Leaders get a star icon with a blue TL label. Operations Managers get the same format in orange.
Identical structure, different colour. Both use the same icon shape and tag format — the system reads as consistent. The only variable is colour, which maps to authority level. When a TL posts a policy clarification or an OM posts a compliance notice, there's no ambiguity about who's speaking.
03
Acknowledgement
Shipped · Phase 2
The problem
A manager posts a policy update to a channel with 247 members. There's no way to know who's read it. In a regulated industry, a missed SOP update can lead to a compliance incident. "Sent" is not the same as "received."
A read-receipt widget attached to designated announcement messages, showing a live ratio of confirmed reads to total recipients. Clicking the widget opens a breakdown — unread members listed first.
The reference point was Lark's announcement feature. One-to-one read receipts don't scale to group channels. A percentage indicator does. The execution was adapted for a role-stratified team where a manager needs to confirm that every agent on a specific shift has read a specific update before they take their first call.
This feature started with a conversation, not a brief. Our engineer flagged that the system had no group acknowledgement capability. I sketched a solution that afternoon. We built it without running it through the formal PM process first. That's the kind of ownership the team structure allowed — and the kind I'm most proud of.
04
Automation and system
integration
Shipped · Phase 2
Alert card · Design extension
The problem
Superpunch Chat was increasingly connected to other internal systems — a real-time performance monitor (RTA) and an AI copilot (SIDD). System-generated messages were mixing with human conversation, with no visual distinction between the two.
A dedicated Automations section in the sidebar, sitting above Channels and Direct Messages. System- generated messages get their own space — separate from human conversation, impossible to mistake for one. Each bot has its own visual identity. Alert notifications use an orange badge regardless of which bot sends them — the badge signals urgency, not identity.
For SIDD-generated override requests, the message surfaces a structured header: source, compliance status, ticket reference, customer name, and amount. The Team Leader sees exactly what they need to approve — without asking a single follow-up question.
The RTA alert card — with three severity states, structured agent metrics, and inline action buttons — represents the direction I would have proposed given more development capacity. The core shipped behaviour: RTA alerts arrive as bot messages in a dedicated conversation, routed directly to the relevant Team Leader.
What I'd do differently
Earlier research
The user interviews happened in 2022 — two years after launch. The scanability insight could have shaped Phase 1 if we'd talked to agents before we shipped. Even a small team with one PM can find time for three conversations.
Feedback loops
The product launched without a reliable mechanism for collecting ongoing feedback. Changes were reactive — driven by informal reports. For a tool used by 10,000 people daily, that's a gap I'd close from day one.
Acknowledgement impact
The feature shipped but its impact wasn't tracked. Did manager behaviour change? Did compliance incidents go down? Those are the numbers that would have completed the story — and I didn't build a way to capture them.
Live Feed
It made it into the design system before anyone questioned whether it fit the context. Agents can't take photos on the floor — the social mechanic had no place here. It was cut before launch. The design time spent wasn't nothing.
Small teams move fast. But speed without structure accumulates debt. The most valuable thing I learned wasn't a technique — it was making defensible decisions with incomplete information, under real constraints, and knowing which parts of those decisions held up.
This case study combines shipped work from my time on the team with design extensions informed by user research and my current design perspective. Extensions are noted where relevant. Some client brand names are omitted per standard BPO confidentiality practice.
Currently open to new
opportunities.
Let's build something that works for the workers.
← Back to all work