Important Links

PRD

Figma file

Presentation

Overview

Improve adoption of Mattermost and Playbooks by empowering field workers, airmen, and government personnel who primarily work on mobile to collaborate and execute mission-critical workflows when away from their desks.

This initiative brings core Playbooks functionality—such as viewing active runs, checking tasks, posting updates, and finishing runs—to mobile devices (phones and tablets). By providing a streamlined interface for essential features, we reduce friction for users who are frequently away from a desktop environment.

image-20241212-142252.png

Scope

The MVP for Playbooks on Mobile includes:

  1. Accessing Runs:

  2. Run Details:

  3. Finishing a Run:

  4. Tablets & iPad

User Flows

Accessing a run

Runs will be accessible from within the channel linked to that run. There are a few different places where Runs linked to a channel will be surfaced.

Runs icon button in Channel Header

Whenever there are in-progress runs linked to a channel in which the user is a participant, an icon button at the top of that channel appears with a count for the number of runs in-progress.

If no runs are active, the icon button is hidden by default.

Tapping the icon button navigates the user to a Runs list modal, filtered specifically for that channel.

image-20250131-021101.png

Highlighting new runs

We can optionally show an unread indicator on the runs icon button whenever there is a new run that the user has not seen yet.

image-20250131-021138.png

There might be technical complexities in defining and tracking when a run should be marked as ‘viewed’. From a UX perspective, here’s what it can mean to mark a run as viewed:

  • Viewing the run card in the runs list

  • Viewing the run details modal

  • Viewing the run card in the runs list RHS in the webapp

  • Viewing the run details RHS in the webapp

  • Viewing the run details page in the Playbooks UI in the webapp

Channel info modal

If there are any in progress OR finished runs linked to a channel, there’ll be a menu item in the Channel info modal to access Playbook Runs. The menu item should not be visible if there have never been any runs linked to that channel.

The menu item also shows the number of runs in progress. Tapping on the `Playbook runs` menu item navigates the user to the same Runs list screen for that channel, even if there is just 1 active run in the channel.

image-20250130-135602.png

Channel ••• bottom sheet

Similar to the Channel Info modal, if there are any in progress OR finished runs linked to a channel, there’ll be a menu item in the bottom sheet to access Playbook Runs. Tapping on the `Playbook runs` menu item navigates the user to the same Runs list screen for that channel, even if there is just 1 active run in the channel.

image-20250131-021606.png

Runs list

Once the user selects “Playbook runs” (via banner, modal, or bottom sheet), they arrive at a screen listing all runs tied to that channel.

Filtering:

Run Cards:
Each card shows:

For the MVP, we can sort runs by recently updated.

image-20250130-135737.png

Too many runs

For finished runs, the list will keep growing over time as there is usage. We should consider a lazy loading mechanism here and only load ~20 runs at a time, and then load more as the user scrolls. There can be a loading indicator added at the bottom when the user scrolls down to the end.

image-20250131-021404.png

Viewing Run Details

When the user taps a run card, they see the Run Details screen which is similar to the Run RHS in the web app.

Information Displayed:

image-20250131-021722.png

Posting an Update

The user can tap the “Post update” button on the Run Details screen.

image-20250131-021810.png

Tasks & Checklists

The lower portion of the Run Details screen shows tasks, grouped by checklists. This section will show all tasks in the run for the MVP, irrespective of whether they are unchecked, checked, or skipped.

The only action possible on a Checklist will be to expand or collapse it. Tapping anywhere on the checklist title row should toggle this.

For every task, the title will be shown in 1 line and and the description can be shown in upto 2 lines. Any overflow will be truncated.

image-20250130-143036.png

Check Off a Task

View Task Details

Note: For the MVP, the user cannot add or reorder tasks and checklists. They also cannot view, add, or edit any task actions.

Finishing a Run

When the run’s tasks are all completed—or whenever the user decides to end it—mobile users can tap Finish Run at the bottom of the Run Details screen.

A confirmation prompt will be sure to ensure the user understands what they’re doing and avoid ending a run erroneously.

Once confirmed, the run is marked as finished, an update is posted to the relevant channels, and the run is no longer displayed in the In Progress runs screen.

image-20250130-143106.png


Tablet and iPad Support

It is essential for all these features to work as well on Tablets and iPads.

Note: Test on iPad with Split view as well.

image-20250130-143150.pngimage-20250130-143300.png

Link Handling for Playbook Runs

When a run is linked in the channel(e.g., a run link posted in the channel, custom playbooks bot messages mentioned above), tapping the link should bring up the Run Details modal in the mobile app.

If the user lacks permission to view the run, show an error toast.

Custom bot messages

Playbooks has custom message blocks that provide interactive options and contextual metadata for certain messages. On mobile, these custom messages may have limited functionality based on the available feature set.

Status Update Posts

Whenever someone posts a run status update, a custom message displays the contents of the update along with metadata in the footer including the number of tasks checked (X of YY tasks done) and the current number of participants in the run. We should render the same details in the mobile app to stay consistent with the webapp.

Note that links within the status update should be tappable.

image-20250131-115246.png

Status Update Reminders

If a run is configured to prompt participants for regular updates, the user receives a reminder message at the scheduled time when the update is due. There is a custom attachment style card attached to this reminder that has buttons to allow the user to Post an update and a dropdown to Snooze the reminder for the selected duration.

Both of these options should also be available in the mobile app.

image-20250131-115413.png

Retrospective Prompt (Run finished notification)

Once a run is finished, the system posts a prompt asking whether to fill out a retrospective report.

Since the functionality to add a retrospective is not available on mobile, this custom attachment for filling out the retrospective report should not show on mobile. The message to notify users that the run as ended should only contain the text “@user marked Run Name as finished.

image-20250131-115300.png

Edge Cases