UX Spec: Playbooks on Mobile
Important Links
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.
Scope
The MVP for Playbooks on Mobile includes:
Accessing Runs:
Channel banner indicating active runs
Channel info menu item to view runs
Channel bottom sheet menu item to view runs
Runs list tied to each channel
Run Details:
View run name, summary, owner, participants
Post status updates
Check/skip tasks
View task details and attributes
Finishing a Run:
Option to close out a run from the mobile run details screen
Tablets & iPad
Same functionality, optimized for a larger screen
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.
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.
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.
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.
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:
In Progress (default if any in-progress runs exist)
Finished
Run Cards:
Each card shows:
Run name
Owner
Participants in an avatar stack
Last update time or date
Associated Playbook
For the MVP, we can sort runs by recently updated.
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.
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:
Run name
Run summary
Owner and Participants (read-only for MVP)
Update due in …
Post Update button
Checklists and tasks
Finish run button
Posting an Update
The user can tap the “Post update” button on the Run Details screen.
Behavior:
A modal appears similar to what happens in the webapp. It should have text at the top informing the user where this update will be posted. There should be a text field for adding in the status update. This field should be focused by default and be pre-populated with the template or the last update, as it works in the web app.
There should be another field for the
Timer for next update
and it should have a default value selected as per the playbook configuration. The user can edit this value by selecting any of the other options in the dropdown menu.Note: the user will not be able to set a custom timer for the next update in this MVP.
Finally, there should be a checkbox to
Also mark the run as finished
similar to the webapp.Once the user is done typing the update, they can tap on the
Post
button in the top right to post the update.
Result: The update is broadcast to the relevant channels as configured in the playbook.
Edge case: If the user taps the
Post
button with no text in the status update, there should be an error and the field should be highlighted.
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.
Check Off a Task
The user can tap the checkbox in the Run Details view to mark it as complete.
If a task is in the skipped state, tapping on the checkbox should take it to the unchecked state.
View Task Details
Tapping on the task name, description, or attribute area will open a bottom sheet with details:
Task checkbox
Task title (read-only)
Full description (read-only)
Actions - Check task, Skip task
Assignee (read-only in MVP; next iteration will allow editing)
Due date (read-only in MVP; next iteration will allow editing)
Slash command (read-only but clickable)
Clicking on a slash command should navigate the user back to the channel with the message input box in focus and the slash command already typed in. The user can send it as is or make changes if needed.
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.
Tablet and iPad Support
must-have
It is essential for all these features to work as well on Tablets and iPads.
Note: Test on iPad with Split view as well.
Link Handling for Playbook Runs
must-have
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
Nice-to-have
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.
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.
Tapping Post Update immediately navigates the user to that run’s “Post Update” modal.
Selecting a Snooze duration offers a bottom sheet with preset intervals (15 mins, 30 mins, 1 hour, 1 day, 1 week) to delay the reminder. Selecting any of these options should delete the update reminder message and schedule the reminder to be sent after the selected duration.
If offline, the user sees an error toast; the message remains so they can retry.
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.
Edge Cases
No Connectivity:
If the user attempts to take an action like post an update or check off a task while offline, there should be a clear error message shown to the user. In case of posting an update, any data entered should not be lost and the user should stay on that screen and be allowed to copy the entered text before closing it or regaining connectivity.
No In-Progress Runs:
The runs banner is hidden in the channel. The “Playbook runs” menu item is still present, but filters default to Finished runs.
No runs at all in a channel (In-progress and Finished)
The runs banner and the “Playbook runs” menu items are hidden for the channel. This is because we don’t have the ability to start a run, hence leaving nothing for users to view or an action to take once they go to Playbook runs.
Permission Issues:
If a user is not a participant in a run, they should not see that run in the channel banner or in the playbook runs list. The run should not be counted while displaying the number of in-progress runs for that user.