Find Channels

Design Complete

Important Links

MM-29365: RN: Mobile V2 Enhancements Jump To/Find Channels UXClosed

Related: MM-23060: RN: Sort "Find channels" results when user typesClosed

Figma Design

Figma Prototype

Background

These enhancements are proposed to accomplish the following:

  • Bring more focus to the Jump to experience

  • Make it more performant

  • Improve the results to be more relevant

  • Provide more obvious access to the channel directory (Browse Channels), starting DMs and creating new channels

Design

iOS

Android

Behavior

When the ‘Find Channels’ input has been tapped:

  • Rather than incorporating the find channels experience as part of the homescreen/sidebar, we are opting to open it in a modal instead to improve performance and focus. This also may help to alleviate confusion some users had between the ‘find channels’ view and the sidebar channel list

  • When ‘Find channels’ is tapped from the home screen, a modal opens.

    • The search input is immediately focused and keyboard is activated

Modal content

  • Show 3 buttons:

    • Directory: opens the existing ‘More channels’ modal. Consider changing the title to match

    • Open a DM: opens the existing ‘New conversation’ modal. Consider changing the title

    • New Channel: opens the existing action sheet for ‘New Public Channel/New Private Channel/Cancel'

  • Show a list of unread channels first (across teams) sorted by most recent post

    • up to a maximum of 10

  • Show a list of recent channels sorted by Recency (last_viewed_at)

    • Fill out the rest of the list with these (up to max 20 total between unreads and recents)

    • Exclude the channels that are in the unreads section from the recent section

  • Multiple teams

    • If the user has multiple teams on the current server, the team name displays in the list items below the channel name (except in tablet where it will show inline to the right of the channel name)

    • If the user only has the one team, the team name does not display at all in the list items

Once a user starts typing in the ‘Find Channels’ Input:

  • Show a maximum of 20 results that match the search criteria.

First show, local results

ie channels in your sidebar or users that authored posts loaded in your cache from other channels

  • Show channels, DMs and GMs that start with the search term sorted by last_viewed_at time, sort most recently viewed channels first in the list.

    • For DMs and GMs, match the display name and usernames

    • For GMs, don’t include my own username/display name as matching keywords

  • Next, Show channels, DMs, and GMs that match the search term sorted by last_viewed_at time, sort most recently viewed channels first in the list.

    • For DMs and GMs, match the display name and usernames

Then show API returned results

Requested from server because you don't have them locally

  • Show channels I haven’t joined yet and Users that I haven’t opened a DM with

    • First, show DMs that start with the search term, sorted alphabetically

    • Then show channels that start with the search term, sorted by last post

    • Then show DMs and Channels that contain search term, sorted alphabetically

    • Next, show archived channels that start with the search term, sorted by last post

Special case when search starts with “@”

If user starts a search term with @, only return DMs or users you haven’t yet opened a DM with

  • Follow the logic above for local and API results, but filter only by DMs (exclude channels and GMs)

See this ticket (currently open for Help Wanted) for more: MM-23060: RN: Sort "Find channels" results when user typesClosed

States

Below are stills of the different states of the ‘Find channels’ UX

Default State

Keyword Typed

Empty

 

Tablet