Channel Header Updates

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

In-progress

Important Links

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

https://www.figma.com/file/a9w2q3JnVvBwo2IScP8j3K/Phase-1-Design?node-id=1283%3A89431

New Channel Header Design

The new channel header includes a few key updates to improve usability.

iOS

 

 

 

Android

 

 

Channel Header in Context

 

 

 

Android

 

 

 

 

Channel header

From the channel header, the user can access details about the channel he is in. For now, we will utilize the existing channel info UI within that displays within a modal. In a later iteration, we will update this modal as well.

 

 

 

Search Within Channel Icon

This new search icon will open up the Search modal with the “in” hidden modifier preset to the current channel.

 

 

 

 

 

 

'More' Icon

Tapping on '···' icon will open the bottom sheet with the most popular (important) actions to which users need quick access.

 

 

 

 

Design Details

With the new UI for the mobile app, there is a ‘layered’ aesthetic that allows for more visual depth throughout the app. The channel content below the header appears to sit on top of the channel header with rounded corners and a subtle shadow effect.