Team Sidebar

Owned by Matt Birtch
Last updated: Oct 06, 2021 by Marina Karpenko (Deactivated)
4 min read

Design Complete

https://mattermost.atlassian.net/browse/MM-29305

Figma Component File

Figma Mobile v2 Phase 1 Design File

Figma Prototype (general)

Team Sidebar Prototype

Goals

The proposal is to remove the Teams page and add a new ‘Team Sidebar’ on the same screen as the current channel sidebar in order to accomplish the following:

  1. Make way for Multi-Server Support in the near future

  2. Provide easier access to switch between teams

  3. Provide easier access to add a team

  4. Align more with the webapp UI

UI updates

A new team sidebar is added to the left of the Channel Sidebar. See below for details on the makeup of the Team Sidebar.

Anatomy

 

 

 

Team Sidebar in Context

Here is how the new Team Sidebar displays in context with the rest of the main navigation on the new Home Screen.

 

 

Behavior

Team Name

The current team name shows above the Find channels input now to identify the currently. (e.g. ‘Contributors’ in the example above)

Team Sidebar

  • The new team sidebar shows a stacked group of Team Avatars representing each Team the user has access to on the Server.

  • The order of the team list should be based on the web app order that the user has set.

  • If a user starts scrolling, the fading effect appears either at the top or at the bottom.

  • Unread badges show up for both servers and teams.

Conditions for displaying the Team Sidebar

  • If there is only 1 team: Hide the Team Sidebar.

    • If there are available teams to add/join on the server, adding other teams can be accessed through the ••• Team menu

  • If there are 2+ teams: Show the Team Sidebar

    • If there are available teams to add/join on the server a + button displays under the last team avatar.

  • If the number of teams is greater than the available space, the + button anchors to the bottom and the other team avatars scroll. NOTE: the + button is only available if there are more teams on the Server that are open to join

Few teams

 

Many teams

 

One team

 

Switching Teams

  • Tapping on a team avatar changes it to a ‘selected’ state and refreshes the Channel Sidebar list to reflect the team

  • The active channel also changes to the last viewed channel for that team (to follow the web app behavior)

Animation (video)

Failing to load a Team

In the event that a team’s data can’t be loaded, a failure state displays in place of the channel sidebar and the ‘Jump to’ input is disabled. A ‘Try again’ button displays.

 

Adding a Team

  • The + icon in the Team Sidebar is only available if there are more teams on the Server that are open to join

  • Tapping the + icon in the Team Sidebar launches the ‘Select Team’ Modal

  • When a user taps a team from this modal, the Team Avatar is appended to the avatars in the Team Sidebar

 

 

 

 

 

Tablet UI

The tablet Sidebar follows the same layout as the mobile sidebar, but just adjusts the width to match the standard iPad sidebar width (375 pt shown here).