CXone Agent

One application that allows for the customization of a once complicated set of workflows. CXone Agent puts the user into the driver’s seat, allowing them to take on a wide variety of tasks from within a single space. Always familiar but incredibly flexible.

Awarded inSpire Customer Experience 2020 (internal)

My Role

Created the research plan, flow charts and foundational wireframes. Established a new design library and guidelines. Mentored and coached teammates who contributed minor features and enhancements.

Team

Kyle Dickson (Lead Designer)

Maye Wimmer (Sr Designer)

Samantha Prince (Designer)

Zoe Zhao (Research)

Kickoff & Discovery

As I was deepening my understanding of CXone’s products and features, the company acquired a new line focused on native integration of social media channels. I was tasked with updating our existing agent solution to incorporate this new technology. This integration required merging workflows and, in many cases, creating entirely new ones to support seamless functionality.

To kick off this effort, I conducted a competitive analysis and initiated interviews with key stakeholders and users from both product lines, gathering insights to guide the integration process.

The Competition

At this stage, no one had yet determined how to blend traditional call center workflows with the unique dynamics of social media interactions. One of the main challenges was navigating the distinct response and resolution expectations for each 'channel' type, with different norms around acceptable response times and conversation closure for calls versus social media messages.

Existing Users

Users of the previous version quickly highlighted their favorite features and biggest pain points. We observed some workflow differences based on each contact center’s industry, including variations in the depth of customer knowledge, the quality of customer service, and the time spent on each interaction. Moving forward, we would need to design tools that felt familiar but were flexible enough to adapt to these diverse needs.

Stakeholders

I encouraged stakeholders to connect with our diverse user groups through our team’s research. Then, I asked them to identify the top two features they felt would best support each group, promoting a collaborative approach to product development.

Understanding the Day of Supervisors & Agents

In the early discovery phase, it was essential for my team and me to understand the daily flow of both agents and their supervisors. We documented each phase of their day and the types of communication needed between roles. This insight helped us design a messaging and notification system that allowed agents to connect seamlessly with supervisors and teammates. With this system, agents could quickly reach out for help or offer assistance to others, all without losing focus on their active interactions.

Asynchronous Interactions

Asynchronous interactions were the most complex workflows we needed to support. While they seemed straightforward, they often took unexpectedly long paths before ending. This was different from traditional email and voice channels, which followed a more linear flow.

After several iterations and user tests, we developed a hybrid work model. If an interaction included an asynchronous channel alongside others, it would be resolved just like a traditional voice item. However, if the interaction was purely asynchronous, it could follow a typical asynchronous flow, staying open much longer before ending. This approach allowed us to better match the unique needs of asynchronous interactions.

Common Terminology & Components

Contact centers vary in size and have different, specialized roles. It was crucial for us to track which personas might use each feature we added to the experience.

While we expected some overlap, we had to give more thought to which tasks AI or machine learning could take over or assist with. After a few recent acquisitions, we gained the capability to enhance digital assistance for both contact centers and their customers, opening up new opportunities for streamlined support.

North Star

After reviewing interviews and competitive analysis, I created a North Star document to keep our vision of success front and center. This document was referenced in each sprint planning and design review. Its three core principles are outlined below.

What’s up next

Enable the agent to preview what work will be coming their way or help them decipher where they are needed the most.

How can I resolve this quickly?

Present the agent with information that will help them resolve an interaction as quickly as possible. Reduce the noise.

Who can help me?

Show the agent who or what is available to help them and inform them of when they can expect that help to arrive.

Early Component Testing

In early user testing, I created simple wireframes that encouraged users to give honest feedback. Through several concepts and iterations, we began identifying essential components and understanding how they impacted the most common workflows.

Key Insights

Money-driven organizations focused on different metrics and tools than customer service–oriented ones. This shift in focus impacted how agents were treated and, in turn, how they treated customers.

An agent’s workflow always began with as much customer information as available, but it quickly varied after initial validation based on the task. We identified what should be displayed by default for most customers, but realized that we needed to build in a large amount of flexibility to accommodate different industries.

Just because we could offer several helpful resources didn’t mean we were providing the best ones. We needed to intelligently narrow down the options available to agents, helping them make faster, more effective decisions.

Directing the Flow

Now that we understood the essential components for a successful interaction, it was time to arrange the components more effectively. We reviewed the order of operations uncovered during discovery and developed a left-to-right layout. It begins with the basic information needed to start smoothly, then introduces deeper details as needed.

Order of Operations

  1. Confirm the identity of the person the advisor is speaking with. The more detailed information available about the customer, the stronger the security.

  2. Quickly analyze the interaction request, then reassure the customer that they have your attention and will be helped promptly.

  3. Move to investigation and resources that will help you resolve the interaction as quickly and completely as possible.

  4. Analyze more additional information and continue loop until resolution is satisfactory.

The Assignment Panel

The assignments panel serves as a personal queue for each agent. Items appear here based on a routing engine that assigns interactions to specific agents according to their unique talents and expertise. This space needed to allow agents to quickly switch between consumer interactions while staying updated on each interaction’s status.
We experimented with various wording and icons before arriving at the approach shown here, using large, memorable icons that are easy to learn and prompt the appropriate response from agents.

Anatomy of a Consumer Tile

A consumer tile is a snapshot of information about an incoming interaction that appears in the assignments panel. It provides a preview of who the agent may be interacting with, from which platform, and on what topic. Configurable timers are also available, allowing agents to track how long it’s been since first contact or how long the interaction has been managed by a specific person.

Consumer Tile Iterations

In our first consumer tile iterations, we included all the information we thought agents might want to preview before engaging. However, in the fast-paced contact center environment, much of this information was overlooked. Additionally, our initial design didn’t clearly indicate who the agent was interacting with, which became a challenge when handling multiple interactions at once.

In subsequent iterations, we reduced the information, refined typography, and enhanced clarity. This improved testing results but still lacked polish and consistency across channels, as not all interactions provided the same level of detail.

To address this, we continued simplifying the tile and added interaction controls directly to the tile when selected. This change significantly improved focus and usability.

Tile Behavior

We developed animations that reinforced each action without distracting users from their work. By attaching controls directly to the tile, it became much clearer to users which interaction they were working on and what actions they could take for that specific channel type.

Incoming and Rejection

We designed the animations for incoming and outgoing interactions to follow an action/reaction approach. Elements moved similarly when coming in or going out, creating a consistent experience that helped users quickly understand the results of actions like accepting or rejecting an interaction.

Juggling Interactions

The Interaction Space

This feature, a first of its kind in the industry, allows agents to seamlessly add another communication channel to an ongoing interaction. By clicking the plus icon, an agent can initiate an email, phone call, or text message from a growing number of platforms—all without needing to open a new case in the system.

Keeping it Familiar

It was crucial for this space to feel familiar while supporting over 30 different types of channels. Within this interface, we captured each channel’s native features while keeping the control scheme consistent.

The entire space is also customizable based on user permissions, adapting smoothly to show or hide extra tools and controls. This ensures that each user sees a complete, tailored interface without feeling like anything is missing.

Make it Responsive

The App Space

Flexibile Workspace

We designed the app space to be the Swiss Army knife of agent tools. Fully configurable, it can hold any number of applications an agent might need during an interaction.

The app space can include a range of essential tools, such as:

  • An agent’s personal shift schedule and upcoming commitments

  • The consumer’s interaction history

  • An organizational directory with teammates’ current availability

  • The full assignment queue, showing more than just what’s assigned to a single agent

  • Real-time AI-assisted coaching

    Each application in the app space can also be opened in its own browser window, so agents don’t have to navigate back and forth between frequently used tools.
    I established guidelines early in the app space’s development, allowing me and my team to design each individual application efficiently and within a short timeframe.