Capacity - Live Chat Agent Interface

At Capacity I designed a live chat interface for support agents that fits within the broader Helpdesk tool. (Check out the Helpdesk UI here)

This is really like a "part 1" for this project because there are a lot of cool features and details to this live chat product. In this shot I just want to showcase the general layout and some of the key functionality.

Live Chat lives within a new subsection of the Helpdesk navigation. This makes it easy for support agents to switch from the ticket view to live chats.

I tried to create a focused workspace by allowing the agent to hide the navigation and by limiting the interface to 3 main areas: The list of live chats, the chat interface, and an area on the right for chat metadata and tools.

Transferring Chats

During user interviews for this project we learned that agents would need a way to transfer a chat to someone else who has specific expertise. Sometimes the agent making the transfer doesn't know who specifically should receive the chat but only that a certain team (e.g. "IT") needs to be involved.

... So this experience allows the support agent to transfer the chat to either a team or a specific agent.

I collaborated with my Product and Engineering leadership counterparts to find a solution that was technically sound and fast/smooth from a front-end perspective.

Confirming the transfer ☝️

Confirmation modal for ending a chat ☝️

This is a notification I designed so that if a support agent is somewhere else in the platform when a new live chat comes in, they see an obvious notification with a shortcut directly to the chat.

Thanks for reading! More to come... 🩷