The intelligent contact center platform

Revamping the Agent Experience: Case Study on Email Threading

Date
May, 2023
Category
Enterprise Web App
Platform
Desktop

Here's the unfortunate reality of fast-moving enterprise applications...

Time is money. In the fast-paced world of enterprise applications, it's an unfortunate reality that companies often avoid overhauling their backend systems, even when it could significantly enhance the front-end user experience. This is the case with our Agent Desktop applications, where features that align with short-term goals are the focus. More complex, back-end heavy enhancements are left on the back burner.

The existing agent email experience does not have threading capabilities...

  • Legacy system architecture did not easily support threading easily. It would have required a significant overhaul of the backend.
  • CRM integrations and screen real-estate is limited in our smaller adapter, which has the same capabilities as the full desktop version.

Current Agent Desktop Plus

Agent Desktop Plus has a lot more usable space.

Email
Replying to email

Current Agent Desktop Adapter

Agent Desktop Adapter is designed to fit within a limited space, such as Salesforce CRM plug-ins. It prioritizes core functionalities that Agent Desktop Plus can do, but need to be done side by side with other integrations, like Salesforce CRM.

ADT Screens with 290x900 px limitation

The Need

Since our backend has changed, we can now allow email threading, but need a clear way to showcase handling conversations.

As a call center agent, I want to see email conversations in a threaded format, so that I can easily follow the context of the conversation and respond more efficiently.

Acceptance Criteria

  • Threads should be visually distinct with clear indicators of email sequence
  • Latest email in the thread must be displayed at the top by default.
A risky acceptance criteria given by the product manager

So either the product manager is a complete design genius and knew the exact solution, or it was just a random guess. As a product designer, I needed to make sure our design is intentional and backed by research.

So how to other companies do threading?

Microsoft Outlook

  • Has a hierarchy of email cards, showing unread emails in bold.
  • Sorted from most recent to oldest (top to bottom)
  • Expand/collapse button in main body header

Gmail

  • Threads can be collapsed
  • Sorted from oldest to most recent (top to bottom)
  • Expand/collapse by clicking on the preview

Why does Outlook and Gmail sort their threads differently? (Oldest to newest or newest to oldest)?

  • Outlook is clearly more business focused. Quick access to information helps the user respond promptly to ongoing conversations.
  • Gmail is more focused on simplicity and ease of use. To the average email user, a chronological order makes it easier to follow the context in a conversation-like structure.

We're designing for an enterprise email client, so sorting by most recent to oldest makes the most sense. Looks like the product manager was correct, but it didn't hurt to double check.

Switching gears to the design system...

Since we're introducing threading, we need to create new and modify existing components to account for the nested conversations.

ADP: .base components and card variants
ADP: More variants to account for different states
ADT: thread cards and variants
ADT: .base components and card variants

Since agents tend to have low resolution monitors, we still need to be mindful of their screen real-estate.

This is a great place to borrow Google's collapsable threads. We created several iterations as to how we might accomplish this.

After some review sessions with my product manager and engineers, we narrowed it down to two options. We built out the flow for the two iterations.

We settled on the iteration with a number showing the amount of collapsed emails, which will expand upon click. Then, the mockups of the email threading flow is created.

ADT: Narrow view email threading enhancement

We got the small one (ADT), how about the big one (ADP)?

Since we already made the ADT prototype, we followed up with the larger ADP components and mocked up a similar experience for full-screen users.

Single email view
Threaded view
Documentation (for engineers)

Impacts of Introducing Threading

  1. Increased Productivity: Email threading reduced the time agents spend searching for related emails, increasing overall productivity by approximately 20-30%.
  2. Improved Efficiency: Streamlined access to email conversations led to faster response times and higher first contact resolution rates.
  3. Enhanced User Satisfaction: The coherent and organized display of email threads significantly improved user satisfaction and reduced frustration.
  4. Scalability: The robust backend integration ensures the feature can handle large volumes of emails, making it scalable as the user base grows.

Lessons Learned

  1. User Experience: Understanding user pain points through extensive research and usability testing highlighted the importance of intuitive design in enhancing productivity.
  2. Collaboration: Effective communication and collaboration with the development team are crucial for ensuring the feasibility and successful implementation of the design.
  3. Iteration: Continuous iteration based on user feedback is vital for refining features and improving the overall user experience.