alexis.jeuffrain
All work

● Case study · Contact centres

ContactMe

One screen for every channel an agent handles. An agent used to need a separate workstation for each channel. We redesigned an acquired platform so one person can run calls, chat and email from a single, stable screen.

Client
Remmedia
Role
UX Product Designer
Team
CTO, developers, product
Scale
Up to tens of thousands of simultaneous connections
Years
2019–2024
Status
In production, still sold today

Context

A working engine behind a dated interface.

Remmedia bought the core of an existing contact-centre product. The engine could already run several interactions at once. The interface could not: it was built around one channel per agent, whether inbound calls, outbound calls, chat or email.

I spent mornings on a live floor at a large retail client, which stays confidential, on inbound calls and chat queues. The pattern was constant: an agent switching windows to find customer data while the customer waited. That back-and-forth became the problem to remove.

The business goal was simple to state. Agents should become more versatile and sell more, without losing control of the conversation in front of them.

● The call

Keep channels on separate stations, or bring everything onto one screen?

ConsideredSeparate stationsFamiliar. Lower load per agent. Rigid teams and constant hand-offs between people.
ChosenOne screen, fixed zonesVersatile agents. The extra load is absorbed by a layout that never moves.

We chose a single screen with a fixed spatial contract. Interactions always sit on the left. Business tools always sit on the right: the CRM, the customer's website or back office. Whatever the channel, the agent's eyes go to the same place.

The console

The spatial contract, running.

Rebuilt in code from the design system, with the CRM open on the right. The console was drawn for the wide desk screens of a contact centre, so the camera goes to the zone each scenario plays in; Whole screen gives the entire console back. Pick a scenario, or let it run.

The interaction card

One card, every channel, every state.

Every channel uses the same card: a coloured channel icon, the active timer, the counterpart, and a control strip for hold, transfer, flag, SMS and hand-off. A card expands in place to reveal its tools, so the agent never leaves the queue.

  1. My channel.
  2. Status and timer.
  3. The customer’s channel.
  4. The display: the number, then the name, then where the call is going.
  5. Controls, always in the same place.
One call, from ring to transfer to close. The card changes state; the zones never move.

The same card, opened on its two tools, one at a time: the outbound dialer, then the callback.

Live tracking

Sell more, and sell better.

A caller asks about delivery. The agent asks which product she was looking at, searches for it, and she waits: thirty seconds lost. Live tracking removes them. The moment the agent picks up, the screen shows where she is on the site, what she has seen and what is in her basket. The example that sold the tool internally: a maternity shop gets a call about shipping, the agent sees two 0-3 month items in the basket and a third one in the same range on sale, and a delivery question becomes an upsell. On average the phone carries 31% of e-commerce orders (Fevad): every call is a sale in progress.

The camera goes to the module each step is about. The Propose action and the high-potential flag are my additions to the original brief.

Supervision

The floor, on one wall.

The team lead's wall, as the product draws it: screens of reports, one widget per report. The clock and the Released In Call gauge come from the product. Agents, queue, pick-up delay and channel mix are widgets I added for this page. Each lead composes their own screens.

Beyond the product

The same system, out in the world.

Posts, a story, banners and a roll-up stand. The discs and the control strip are the product's own components, at poster scale.

I also carried the product into its communication. The campaign reuses the interface at large scale: the channel discs, the console, the control strip, all floating over the green blob of the mark. A person in a demo saw the same objects they had seen in the ad.

What shipped

~150screens designed for one console, over five years
5iterations, each answering a question the last one left open
6channels on one screen: calls in and out, email, chat, SMS and messaging apps

Delivery

A design system kept the screens coherent across five years of releases. I ran QA on every delivery with the CTO and the developers, at a time when design and development still worked as separate trades with hand-made hand-offs.

The system behind every screen above, redrawn for this page: one icon family on a 24 px grid, white glyphs on the channel discs, two elevations, three radii and four motion durations.