"I hope you live a life you’re proud of. If you find that you’re not, I hope you have the strength to start all over again." — F. Scott Fitzgerald
☀︎☀︎☀︎
Currently reading: Upgrade // 101 Essays That Will Change Your Life
☀︎☀︎☀︎
Portland, Oregon
☀︎☀︎☀︎
"I hope you live a life you’re proud of. If you find that you’re not, I hope you have the strength to start all over again." — F. Scott Fitzgerald
☀︎☀︎☀︎
Currently reading: Upgrade // 101 Essays That Will Change Your Life
☀︎☀︎☀︎
Portland, Oregon
☀︎☀︎☀︎
The Trevor Project —

A Brand New Supervisor Dashboard Experience

The Problem
Supervisors have to use two different "dashboards" in different locations to monitor & assign counselors, view queue information, and change statuses. Both of these dashboards lack critical and timely information, and they are very difficult to use, often resulting in frustrating mistakes and errors. We were tasked with creating a new dashboard that would do everything Supervisors needed, while utilizing a new product (Twilio Flex) within Salesforce.
My Roles
+ Research
+ UX Design
+ UI Design
Screenshot of one of the old supervisor dashboards

One of the old supervisor dashboards 😬

Research
To get a better idea of what a supervisor does in a traditional shift, I asked the UX Researcher if she'd like to join me in a shadow session with one of the organization's more experienced supervisors, Alex.

The tree of us hopped on a video call for two hours while Alex performed his regular duties, providing context as he went along. We asked a lot of questions to better understand what he liked, disliked, common frustrations, and any hacks needed to do his job more easily.

Some of the major points that came from this session included:

1. Each row in the table was a new conversation.
So every time a counselor that is assigned to Alex takes a new chat, he has to find it in the table and "assign" it to himself so that he is able to monitor it in case the counselor needs any assistance. But what happens when a new chat comes in? It bumps all the other rows down, so quite often Alex would click the wrong "Assign to Me" button, as the one he actually wanted had moved.

2. The name of the person in crisis was not visible.
This meant when a counselor would reach out to Alex for help over Slack, they'd have to copy/paste the conversation's Case Number and Alex would have to search for that specific number (usually 8 digits). This gets challenging when he's looking through 15+ chats at any given moment.

3. The flagging system made finding the most important info difficult.
Because each conversation was its own row, any flags pertaining to the counselor or the chat all showed up in the same location, making it hard to tell which conversations were with folks in the most need at any given moment.

4. Supervisors needed the ability to monitor multiple chats at once.
It wasn't uncommon for Supervisors to actively monitor 7-12 chats at a time. Can you imagine how stressful that must be? Thankfully, after discussing this with leadership, it was decided we'd update the protocols to ask Supervisors to only monitor 1-2 chats at a time. More on this later.

Another important aspect of the research phase was around the new software we'd be using: Twilio Flex. I spent time looking into what this product did "out of the box" to get a better idea of where to start.

One massive challenge of using this new product was that we'd have to embed it within Salesforce, which required closely working with Engineering to figure out what constraints this scenario would pose.
Design
After reading up on the docs from Twilio Flex, I had a good idea of what we could do with their out of the box "dashboard" view. We'd be able to reimagine the table completely, using rows to serve as counselors, and showing all active chats a counselor is taking in their row. This would be a HUGE win.

A limitation of Flex is that you could only monitor one chat at a time. But knowing how important it was to monitor at least two chats, I had to have discussions with the Product Manager and the Engineering team.

While they searched to see what was possible, I got started on initial designs, so we could start testing with other supervisors.
Initial design of the new dashboard.

Initial design for testing

Initial design with an opened chat to monitor. Only one chat could be viewed though.

Initial design for testing - with one chat opened to monitor

Learnings & Iterations
After performing usability tests with 6 participants for these initial designs, I had a lot of helpful information to help improve the dashboard. Here's a quick breakdown of what we learned:

1. As suspected, supervisors wanted to be able to see parts of a conversation for multiple ongoing chats. This was partly due to them not knowing the protocols would be changing, though.

2. It was hard to read the labels in the circular "flags" in the active chats.

3. They wanted some information about the queue status to be shown without having to click into "Queues"

4. Confusion around the counselor's time stamp and status.

I also heard back from our engineering team by this point, we could open multiple chats. Knowing that leadership was changing the protocols, though, I knew we wouldn't want to have supervisors looking through too many chats at once. So I thought about how I could make the design encourage looking only at one or two chats at once.
Updated dashboard designs. One chat open

Final design after usability testing - One Chat

Updated dashboard designs. One chat open

Final design after usability testing - Multiple Chats

Screenshot of the new supervisor dashboard screen.

Final design after usability testing - Default View (No Chats Open)

Key Changes & Wrap Up
I wanted to shed some light on other features that were part of this redesign the Supervisors were especially excited about, aside from completely restructuring how the table was laid out:

1. It's now clear which chats are High or Imminent Risk, which is important as those are the conversations more often in need of assistance. Color was used as one way to distinguish the varying levels of chats, but we didn't rely on that for obvious accessibility reasons. We also used text and different tag styles.

2. Counselor-specific tags (such as New) and conversation-specific tags (i.e., to denote whether a the contact had indicated abuse) are now separated. This may seem like an obvious distinction to make, but up until this new design, all of those tags showed up together, creating confusion for supervisors.

3. There are now icons to denote if a conversation came through TrevorChat (messages icon) or TrevorText (phone icon). When you hover over the phone icon, you can see the contact's phone number, which was a touch supervisors really appreciated.

4. New indicators were added to clearly mark a chat that has either ended or has been transferred to another counselor (this did not exist prior).


Overall, this design is going to reduce Supervisor's stress, allowing them to be more helpful and present with their assigned counselors. This means that the folks reaching out in crisis will be getting even better care since the people on the other end will be able to focus on their jobs without the technology getting in the way.
"I hope you live a life you’re proud of. If you find that you’re not, I hope you have the strength to start all over again." — F. Scott Fitzgerald
☀︎☀︎☀︎
Currently reading: Upgrade // 101 Essays That Will Change Your Life
☀︎☀︎☀︎
Portland, Oregon
☀︎☀︎☀︎
"I hope you live a life you’re proud of. If you find that you’re not, I hope you have the strength to start all over again." — F. Scott Fitzgerald
☀︎☀︎☀︎
Currently reading: Upgrade // 101 Essays That Will Change Your Life
☀︎☀︎☀︎
Portland, Oregon
☀︎☀︎☀︎