Contact Center UI / Case Study
Omni UI Framework
What I wanted to solve
An agent has to listen, read, act, and keep track of other customers at the same time. My goal was to give each part of that work a clear place in the interface, with enough context to make a decision without leaving the conversation.
I built the framework around the relationship between the queue, the active session, and supporting information. The challenge was to keep useful detail visible while making the current customer and the next action easy to find.
My contribution
Experience design
I designed the agent experience, connecting queued sessions, customer conversations, history, and follow-up tasks in one workspace.
UI design
I designed the workspace layout, session cards, conversation panels, controls, and status states so agents can scan and act quickly.
Prototype development
I built the underlying front-end prototypes to bring the workspace, components, and agent workflows into a working interface.
What I focused on
- Customer details close at hand
- I kept contact details, previous conversations, notes, and live messages close together. The goal was to help agents find what they need without leaving the conversation.
- A queue that is easy to scan
- I gave session cards a consistent layout for the customer, channel, and waiting time. The active session also needs to be easy to spot when several customers are waiting.
- Different ways to finish
- I kept complete, wrap up, transfer, and reschedule separate. They lead to different outcomes, so a single generic button would leave too much unclear.
How can an agent keep track of several sessions while staying focused on the customer they are helping right now?
How the flow works
- 01
Choose
Scan the queue for a customer, channel, and waiting state.
- 02
Understand
Read the current request alongside previous interactions.
- 03
Act
Reply, work through a task, or bring in another agent.
- 04
Close the loop
Complete, transfer, or arrange a follow-up with a clear outcome.
Why I designed it this way
Keep the conversation in place
I divided the workspace into four areas so agents can check the queue and customer history while keeping the conversation open. On smaller screens, the active task needs priority over supporting details.
Application shellMake session status clear
I combined names, channel icons, timers, and a clear selected state in the session cards. I also included text labels for status, so agents do not have to rely on color alone.
Session cardsBreak longer tasks into steps
I split the payment flow into details, card information, billing address, and review. The step indicator shows where the agent is, and the review step gives them a chance to check the details before finishing.
Workflow stepperA closer look at the designs
Omni component breakdown
Omni UI Framework provides a structured component system for contact center and agent workflows. It defines reusable patterns for navigation, session queues, dense work panels, action bars, chat threads, customer history, forms, scheduling tools, and step-based task flows, creating a consistent foundation for high-volume support interfaces.
1. Application shell
2. Session cards
4. Functional form inputs
5. Status indicators
Connected
Active call or chat
Waiting
Queued session
Attention
Escalation or overdue
Inactive
Idle or parked
6. Conversation component
7. History and tabs
01:45 AM
02:15 PM
8. Payment / workflow stepper
9. Empty and reset states
Keep idle states centered, quiet, and low distraction.
10. Reset password card
Reset Password
11. Personal reschedules grid
12. Call control toolbar
13. Parked session stack
14. Login, verify, and join cards
Log in to your account
Join campaign
15. Multi-session queue board
| Session | Agent | Outcome | Time |
|---|---|---|---|
| Can we make it shorter? | Lukas Valentich | No solution | 01:45 |
| Internet Explorer support | Zara Glaser | Good outcome | 02:15 |
| Start page media issue | Adam Weaver | Review | 03:10 |
16. Omni color tokens
Example markup
<button class="omni-button success" type="button"><i class="fa-solid fa-check" aria-hidden="true"></i> Complete</button> <input class="omni-input" placeholder="Customer name" required> <div class="session-card is-selected"> <div class="avatar">JB<span class="status-dot green"></span></div> <div><strong>Jonty Bridges</strong><small>Customer Service</small></div> </div>
Looking back
My focus was on making a busy workspace easier to follow. I gave waiting sessions, the current conversation, and customer history their own places, while keeping them connected. That balance matters more to me than fitting every possible detail onto one screen.