PagerDuty + Slack App

Company

PagerDuty is a tool for Ops Teams. PagerDuty notifies on-call developers to quickly resolve website outages.

Goal

In 3 weeks, design a new PagerDuty + Slack app to help Ops Teams fix website outages faster.

Team

I worked mainly with a product manager and five developers, but received design feedback from UX and Product Team.

Process

The Problem

During website outages, every second is critical to the on-call engineer solving the issue.

During these high pressure situations, they needed to open PagerDuty to acknowledge the issue, then switch to Slack to communicate with teammates, then back to PagerDuty. This switching slowed them down.

Interviews

Providing all the relevant info in Slack could save users precious time. We believed a "Slack App" (sending PagerDuty notifications to Slack) could make users more efficient, but we weren't sure exactly what info to send. I interviewed users to delve deeper into their workflows.

I interviewed 3 on-call engineers and 2 ops team managers - our main users. I found that they could both benefit from this PagerDuty + Slack app for different reasons.

On-call engineers needed to quickly "Acknowledge" an issue. Their response times between the outage being "Triggered" and clicking "Acknowledge" was closely tracked. This important action was slowed by tool switching:

Providing them with the "Acknowledge" button in Slack (via the PagerDuty + Slack app) would simplify their process:

Ops Team Managers on the other hand, had different needs. After a website outage, they needed to piece together what happened and look for process improvements. Their pain point was that some info was siloed in PagerDuty, some in Slack, making it difficult to piece everything together.

Personas

We already had a Developer persona, but I created a new Ops Team Manager persona to distill my interview learnings:

Tech Constraints

Tech constraints played a big role in this project. Because I was designing a Slack App that relied on Slack's API, I was constrained to certain layouts, colors, dimensions, and content:

Business Considerations

The creation of a PagerDuty + Slack app created an interesting business question: should we provide PagerDuty functionality through Slack, if it means fewer users will log into PagerDuty? After discussing this with the Product Team, we decided that my design should be limited so as not to give away too much functionality.

Lean UX

On top of the standard UX considerations (user needs, business goals, and tech constraints) I also factored in the agile development process. My design need to be buildable in just 4 sprints (8 weeks).

To determine our minimum viable product, I ran a feature prioritization exercise. I used sticky notes and whiteboards to create a feature prioritization matrix with my team (developers and a PM) in order to determine the features with the highest user value and the lowest engineering effort. I digitized the final result:

Sketching

I sketched potential designs and to get rapid feedback from a few PagerDuty users, verifying which actions and information were most critical.

Wireframes

Through rapid feedback, I discovered actions and link pathways that users needed. The most important design impact I made was not in the layout, but in making sure the content and interactions matched users' needs.

Solution

PagerDuty + Slack App

Design decision: what info to send to Slack?

Although the possible UI and layout was highly constrained in Slack, design could still have a big impact through content design: users needed the right information at the right time! From interviews, I knew that on-call engineers needed to know when an outage was "Triggered", "Acknowledged", "Reassigned", and"Resolved". However, too many notifications can be overwhelming and render the Slack channel useless.

My solution was not to send fewer notifications to Slack (they were all important) but to minimize the use of vertical space.

After the first notification (containing more context) I designed single-line updates:

These single-line updates risked being too brief to provide enough context. Expandable messages would have been perfect here, but this wasn't possible in Slack. I found a creative solution: a “Jump” link allowed users to be auto-scrolled to the first notification, giving them the context they needed.

For our other main persona, Ops Team Managers, the red, yellow, and green progression of notifications was designed to help them more easily piece together what happened (their biggest pain point).

Secondary Pages

Another way I solved the "notification overload" problem was to allow teams to configure notification frequency themselves:

I also designed installation flows, chatbot interactions, error messages, and more – but I won't bore you with all of them here :)

Results

After releasing the integration, I conducted usability testing and created a video of my top takeaways for PagerDuty stakeholders. I also helped define success metrics around adoption to help us determine whether further improvements were prudent (this first design was just an MVP).

Despite the minimal functionality, users loved the PagerDuty + Slack app: over 40,000 users adopted it. I was excited to see user-centered design make a big impact even in a highly constrained interface like Slack.

Case Study: Money Intel ☞

Can design make the most boring thing in the world more engaging?

Interviews ~ Affinity Diagrams ~ Empathy Maps ~ Task flows ~ Collaborative Design ~ Wireframes ~ Visual Design