Asaad Mahmood Logo

CASE STUDY - 2020

MM Incident Collaboration

End to End Feature Design

MM Incident Collaboration Preview

Project Overview

About the feature

Mattermost Incident Collaboration allows users to manage their incidents using a playbook and access various devops tools and interations (such as Jira and Opsgenie).

Overview

This case study demonstrates the non-exhaustive process of pioneering the Mattermost Incident Collaboration feature that would grow to provide DevOps team orchestrate time-sensitive incident collaboration workflows. The case study involves the motivation, the need, and the thought that went behind creating this tool, and the pertinent features that were included to meet end user needs.

Deliverables

  • Competitor, User, and Market Research
  • Complete Designs for the Feature
  • Onboarding flow, features, playbooks, incidents, and future features
  • Interactive Prototype
  • UX Testing with both actual users and test users

Scope

Complete feature research and design

Tools

Maze, Figma, Html/Css, React

Role

UX Designer & Frontend Developer (Research, Visual Design, Interaction Design, Frontend Development)

Duration

Around 10 months

Credits

Credit is due to Ian Tao (PM) and Jesse (Dev Lead) on the Workflows team, and to Andrew Brown (UX Manager)

1. Research

Market Research

After considerable research, and getting having a look at Netflix dispatch, along with how a lot of organisations use various Incident Management tools, it was certain that there was a huge potential market that can be provided value with the introduction of MM Incident Collaboration.

Competitor Research

We also looked at various tools that allowed users to create workflows and manage incidents, or specific triggers to see how they were performing and what we can learn from them to help our users better.

Some of these tools included:

IFTTT
Strengths:
  • Easy to use
  • Straightforward
  • Native UI and feel
  • Good personalisation options (icons etc)
Weaknesses:
  • Limited number of apps
  • Not too advanced
  • Buggy
Zapier
Strengths:
  • Lot of apps
  • Easy to start with / straightforward
  • Advanced functionality present as well
  • Step by step visual presentation (sidebar)
  • Step by step Wizard
  • Advanced options separated (turned off by default)
Weaknesses:
  • Gets overwhelming at times in complex scenarios.
  • Lack of visuals to get you started
  • Visuals enmeshed in a lot of other content
Slack Workflow Builder
Strengths:
  • Right within Slack
  • Uses similar modals and styles
  • Good steps flow (Wizard)
  • Good feedback (on publishing flows)
Weaknesses:
  • Limited default actions
  • Not advanced
  • Confused why it was linked to an app
xMatters Flow Designer
Strengths:
  • Lots of advanced functionality
  • The ability to add custom steps via scripts
Weaknesses:
  • Overwhelming!
  • Very old GUI, and unpolished
  • Can get cluttered quite fast
  • Hard to implement
Workato Great!
Strengths:
  • Well sorted
  • Good categorisation and Wizard
  • A lot of advanced features
  • Modern UI
  • Good visual representation
Weaknesses:
  • Uncommon terminology
Microsoft Flow
Strengths:
  • Similar UI as other microsoft apps
  • Good steps flow
  • Good sidebar integration to navigate around different parts
  • Flow checker to check errors
Weaknesses:
  • Not polished enough
  • Bunch of UX issues
  • No easy way to start creating flows from the main screen

Key Takeaways

Things to consider for our own workflow builder

  • Accessible from the dropdown (or some other easily discoverable place).
  • Uses Mattermost UI.
  • Tutorial tips open up to highlight the essential sections of the workflow (user can skip).
  • Easy way to start creating workflows right off the bat.
  • Recommendations for suggested workflows at the bottom.
  • Step by Step flow, rather than having everything on the same page.
  • Use icons for apps and for steps to allow users to easily sort through the options.
  • Show feedback hints on successful actions.
  • Allow users to see remaining steps/errors/progress.

2. Vision and Direction

There were a lot of things we had to consider when working on Incident Collaboration. Do we want to target breadth and cater to a lot of workflows that didn't necessary fall under the category of incidents, or do we just focus on Incident Management.

Even though there was a lot of appeal initially on creating a product that can be used by anyone to create workflows for things that may not be urgent, and may aid in providing structure to their day to day activities. However, after a lot of research, talking to customers, and looking at the timeframe, it was decided that we should cater to the incident market first, and think about expanding it later if needed.

The Problem: How do we provide DevOps teams structure, automation, and intergrations along with real time communication (that they already get from Mattermost).

The Solution: Mattermost Incident Collaboration

3. Key Features

Here are some of the key terms that one needs to understand to know how the different parts fit in the whole that is Mattermost Incident Collaboration.

Playbooks

A playbook is an incident template. It is created ahead of time, or even after going through a bunch of incidents and is used as a starting point for future incidents. People can create different types of playbooks depending on the type of incident.

Incidents

An incident outlines the active process within a Mattermost Channel. It has a start and end time and can be either In Progress or Completed. Incidents consist of steps and are initiated with Playbooks.

Steps

An incident contains a list of steps that are to be taken to take it to its resolution. A step can be assigned a member, it can have states (Not started, In Progress, Completed), and can also have a Slash command associated to them.

4. Design Exploration and Ideation

A lot of time and effort went into design explorations and ideation. To present all of them would be going overboard for this case study, but to just give a hint of what I'm talking about, .

Creating a Playbook Flow


Starting an Incident Flow