Desktop

Mobile

B2B

SaaS

Complex Systems

Multi-role

Enterprise

Redesigning the contact center workspace for 500K+ agents

Redesigning the contact center workspace for 500K+ agents

No headings found on page
No headings found on page



Turning a legacy agent app into one workspace for calls, email, chat and team messaging.



  • My Role: Solo UX Lead, owned the entire end-to-end process

  • Timeline: 2024 · 5-week design phase · 8 months overall

  • Platform: Web + desktop

  • Team:PM, engineering, sales, channel partners

  • Status: Launched

  • User Base: Over 500K contact center  agents; Over 2 billion business  connections

  • Company: Mitel, the world’s 2nd-largest provider of unified communications solutions, offering VoIP, call services, contact center, and collaboration tools primarily for businesses of all sizes.






TL;DR




Mitel Ignite is the web app contact center agents use to handle calls, email, chat and social messages. It looked dated, hid key functions, and failed accessibility checks. As the only designer, I led the redesign from research to a shipped product and a new component library.

Compared one year after launch:

  • CSAT 3.6 → 4.5

  • +29% customer retention

  • +17% annual revenue





The challenge



Mitel serves 2B+ business connections worldwide, and more than 500,000 contact center agents work in Ignite every day. Call volumes were rising, but the app hadn't kept up. It had an outdated UI, missing core functions, and little ongoing maintenance.

I ran a heuristic evaluation against Nielsen's 10 usability heuristics. Almost every area failed.



Heuristic evaluation result


Rated against Jakob Nielsen’s 10 usability heuristics. 9 of 10 failed.

1 usability catastrophe, 5 major problems, 3 cosmetic problems, 1 passed.


  • #1 Visibility of system status: Major problem

  • #2 Match between system and the real world: Cosmetic problem

  • #3 User control and freedom: Major problem

  • #4 Consistency and standards: Passed

  • #5 Error prevention: Major problem

  • #6 Recognition rather than recall: Cosmetic problem

  • #7 Flexibility and efficiency of use: Usability catastrophe

  • #8 Aesthetic and minimalist design: Major problem

  • #9 Help users recognize, diagnose and recover from errors: Cosmetic problem

  • #10 Help and documentation: Major problem


Severity scale, from least to most serious: Passed · Cosmetic problem · Minor problem · Major problem · Usability catastrophe



Four problems stood out


  1. Dated, crowded UI that slowed agents down during live calls

  2. Confusing navigation: Contacts were buried, and Options and Tools overlapped

  3. Missing core features, like global search and in-app team messaging

  4. Poor accessibility: small text and low color contrast






What we learned



I interviewed and surveyed 22 contact center experts (18 agents and 4 supervisors), then tested early concepts with experienced agents. I conducted several rounds of user research through interviews and surveys. I also shared some of the key findings below.




A few facts shaped the whole design


  • Agents average 10 years on the job and handle ~10 calls and 30–40 emails a day. Calls and email need equal weight in one inbox.

  • 90% of internal help happens over chat, mid-call. Team messaging has to work without leaving the call.

  • Agents work at full browser width and switch tabs between MiCollab, CRM and Salesforce. Bringing messaging and presence into Ignite cuts context switching.

  • Inbox, Queues and Dashboard are where agents spend most of their time. These three get the most design attention.

  • Supervisors need queue health at a glance. A customizable dashboard with live queue widgets.




How I led



Designing within legacy constraints. The new UI had to sit on the existing back end.


Building accessibility in, not on. I raised font sizes and color contrast, wrote the VPAT accessibility report, and built a component library on Mitel's atomic design system so engineering could ship it consistently.


Aligning five groups on one direction. PM, engineering, sales, channel partners and agents all wanted different things. I used the heuristic scores and research data to agree on a shared set of design principles before any screens were drawn.








Designs example - Inbox and live call



The problem: In the old Inbox, the live call competed with ticket details for attention. Call controls sat next to ticket actions, so in the middle of a conversation an agent had to hunt for Hold or Transfer. A second incoming call made it worse.




Design thinking: During a call, the call is the only thing that can't wait. Everything else should stay one click away, not in the way.

  • Live call on top. The active call has its own floating card with the caller, timer and status, always above the ticket.

  • Call controls apart from ticket actions. Mute, keypad, record, hold, transfer, barge and hang up live in the call card. Ticket actions stay in the ticket header. Agents never mix them up under pressure.

  • A call stack for more than one call. Active and on-hold calls show together in the same card, so agents can switch between them without losing track. Every agent in testing liked this.

  • Help without leaving the call. Agents ask colleagues for help over chat 90% of the time. Messaging docks at the bottom right of every page and opens as an overlay, so the main layout stays uncluttered.

  • Fewer steps to reach a customer. Global search with click-to-dial and a top-level Contacts entry.









Designs example - Agent voice greetings



What it is: A voice greeting is a pre-recorded message that plays when a customer calls a company's contact center. Most companies route calls into queues by topic, and each queue gets its own greeting. For example, an online retailer might use:

  • Order tracking queue: "Thanks for calling. I can help you track your package."

  • Billing queue: "Thanks for calling. I can help with payment or refund questions."

  • Promotions queue: "Thanks for calling. I can help with discounts and promotions."





The problem: Greetings were buried across the Options and Tools menus. Agents and admins had trouble finding them, previewing them, or telling which greeting played on which queue.






Design thinking: Managing greetings is really two different jobs. One is creating and maintaining the recordings. The other is deciding which queue plays which one. I gave each job its own tab inside a single Settings area.

  • All voice greetings: a searchable list. Hovering a row shows play, edit, download and delete. Playback opens inline with a waveform, so users can check a recording without leaving the list. A badge marks the default greeting.

  • Set queues with voice greetings: a table of queues with the greeting each one plays. Admins can pick a greeting per row, or select several queues and set them all at once. A company may run dozens of queues, so bulk actions save real time.







Designs example - Team lead dashboard



The problem: The old dashboard stacked every queue in long rows of identical numbers. Supervisors had to scroll and scan to find the one queue that needed help.




Design thinking: A supervisor looks at the dashboard to answer three questions: How busy are we right now? Who is available? Which queue needs help? I organized the dashboard around those questions with widgets.

  • How busy are we? Active calls, messages, cases and drop-off rate, plus a ticket count over the day.

  • Who is available? Employee State and Favorites show each agent's status at a glance. Supervisors can change an agent's state or groups right from the dashboard.

  • Which queue needs help? Queues & Waiting Customers and Queue Now show service level, longest wait and abandoned calls for each queue.

  • Every supervisor's view is different. Users can add, drag, resize and remove widgets. In testing, agents especially liked this flexibility.






Results



The full redesign shipped in 2024, including the dashboard.

  • Customer satisfaction (CSAT): 3.6 → 4.5

  • Customer retention: +29%

  • Annual revenue: +17%

Compared one year after launch.

In testing, every agent preferred the merged presence, the call stack, and drag-and-drop widgets. Below are two examples that highlight their appreciation for the user-centric design approach.


A great solution for contact center agents. Mitel Ignite is the easiest call center solution we ever used. It is our best work colleague in customer support!


The workflow in Ignite is seamless, and our customer support efficiency has significantly improved. We’re extremely satisfied with Ignite and cant wait to roll it out to more office locations.



Reflection



  • One product, many kinds of users. Agents loved customizing their dashboards, but some customer companies wanted only admins to change them. A contact center tool serves agents, supervisors, admins and the businesses that buy it, and each needs something different. I now map every role's needs and permissions early, so flexibility for one group doesn't become a problem for another.


  • Design for the whole workflow, not one app. Agents don't live in Ignite alone. They switch between Ignite, team chat, the CRM and Salesforce all day. The biggest wins came from removing those switches, like bringing messaging and presence into the workspace. The real design problem is the agent's whole day, not a single screen.


  • Build quality into the system. Accessibility and consistency don't hold up if they're fixed screen by screen. By building contrast, type sizes and accessible patterns into a shared component library, every new screen inherited them, and engineering could ship faster with fewer design reviews. At the lead level, the system is often a bigger lever than any single design.






tinawangrui@gmail.com

© Created with ❤️ by Tina Wang in 2026. All Rights Reserved.

Logo

tinawangrui@gmail.com

© Created with ❤️ by Tina Wang in 2026. All Rights Reserved.

Logo

tinawangrui@gmail.com

© Created with ❤️ by Tina Wang in 2026. All Rights Reserved.

Logo