Slack for iOS Redesign

Given how big of a fan I am of Slack’s desktop and web apps, I was a bit disappointed when I first used the iOS app. The mobile interface is a bit complicated, and many of the features that make Slack awesome on desktop are missing on mobile. It’s usable, but not to the usual high standard Slack sets for its products.

The redesign thus falls into two categories:

ADD: iOS is missing something that makes Slack awesome on desktop. This change adds that “something” back in.

SUBTRACT: iOS is trying to do too much on mobile. This change takes out complexity.

Each change below is labeled with a category.

The redesign makes an assumption that users use Slack differently on mobile than they do on the computer. The redesign assumes users depend on Slack mobile more to read (e.g. following an unfinished work conversation en route home) than to write (e.g. typing out the full agenda of tomorrow’s meeting). Tasks concerning the latter would likely instead be done on desktop.

Navigation

iMessage (left), Messenger (middle), and GroupMe (right)

Shown above are the messaging interfaces of Apple iMessage, Facebook Messenger, and Microsoft’s GroupMe. The three popular and well designed messaging apps looks vaguely similar — all use the basic table view of iOS. I’m not arguing for ubiquitous design, but I do think that this messaging interface works well, and is one users are accustomed to seeing.

What Slack’s navigation looks like now

Slack’s navigation is split between two hamburger menus accessed by left and right swipes of the home screen. The design is a more creative approach to messaging, but doesn’t fit the mental model of users. Missing is a “home-base” list of channels that users can return to and change channels from. As it’s presented right now, users simply switch between channels without ever feeling a sense of hierarchy between the channel list and an individual channel. This is unnatural.

Redesigned navigation

The redesign involves a hybrid approach. The general look of the current state hamburger menu is preserved, but with added functionality of iOS table cells implemented.

The left menu is now full-screen and displays Team Name (ADD). Navigation has been condensed to improve readability on mobile. In addition to “Unread”, only the three most recent channels are displayed, as is the one most recent direct message. “+X more” shows the remaining content. The redesign assumes that users are more likely to use mobile to access recent conversations, rather than start entirely new conversations. Recent direct messages are more narrowed than recent channels, given the availability of other options to chat on the phone, such as iMessage.

The right menu is largely the same, remaining a hamburger (menu). The option to switch teams on Slack has been moved to the left navigation menu, to the left of Team Name, a much more convenient location (ADD). This is important as Slack scales and users begin to have more and more Slack teams. Snoozing of channels has been removed — the Do Not Disturb setting of the iPhone serves the same purpose just as easily (SUBTRACT) (Note: I might be wrong on this one. The Jan 5 update to Slack added snoozing as its own button next to search.)

Redesigned navigation (detailed)

The task flow from the center messaging screen still invokes the right menu on a right to left swipe, but now transitions to the full-screen left menu on either a left to right swipe, or the click of the back navigation button, shown top-left of the center screen above.

Search

Pre-search (left), during-search (middle), and post-search (right)

Slack’s search process is split between three states. 1) Pre-search, where all recent search history is displayed 2) During-search, where recent search history is filtered, but no results are displayed and 3) Post-search, where all results are displayed. Results are divided between messages and files.

Searching right now lacks granularity, a big problem given the high occurrence of lookup on mobile.

Redesigned during-search (left) and post-search (right)

Pre-search is unchanged.

During-search, however, has been redesigned so that results are displayed in real-time as the user searches (ADD). Filtering of recent searches ceases once the user begins typing, so as to free up screen space. The search results displayed during-search as well as post-search are now more compact. Removed are the transparent cards behind search results meant to provide context — on mobile, these are often hidden by the actual search result, hard to read, and uncomfortably space out search results (SUBTRACT).

The redesign of post-search introduces filtering options of Recent, Relevant, and Me to both message and file search results (ADD). These are options available on desktop.

Post-search files (left) and redesigned post-search files (right)

Specific to file search, the redesign of post-search results now matches the simplified iconography of desktop (ADD).

Messaging

There are four types of messages on the main Slack messaging platform. These are: 1) normal text messages 2) file attachments 3) messages when a user is commenting/sharing a file and 4) previews of links. These are shown below, in order.

Text, attachments, sharing/commenting, previews

The redesign, at a high level, is shown below. The title of the channel has been centered, with the upside-down triangle icon to the right of the title now removed. Previously, this suggested an incorrect affordance that clicking on the icon would show a dropdown of channels, rather than channel settings (actual behavior).

The right screen below is the left screen, scrolled down ~130 px.

Redesigned messages (left) and scrolled (right)

The redesign of each type of message, as well as some additional behavior, is explained below.

Text

Normal text messages are unchanged.

Attachments

File attachments have been condensed and are now shown in a condensed card, similar to as on desktop (SUBTRACT). File icons are the same as those shown in file search results, simplified from what is seen now (SUBTRACT).

See center-screen of the right image below.

Attachments (left) and redesigned (right)

Sharing/Commenting

Sharing/commenting on files has been condensed in copywriting from 3 lines (sharing) and 2 lines (commenting) to 1 line for each (SUBTRACT). This matches the copywriting of Slack on desktop.

See lower-screen of the right image below.

Sharing/commenting (left) and redesigned (right)

Previews

Previews of links have been condensed and rearranged. Preview text has been condensed to 4 lines, with extra text now replaced by ellipses (SUBTRACT). The preview icon has been moved to the left of the preview text and surrounded by a grey border. This looks more visually appealing, is easier to read, and is consistent to left-appearing thumbnail heuristics appearing (e.g. Youtube).

See lower-screen of the right image below.

Previews (left) and redesigned (right)

Single Tap

Behavior for single tap of any message has been added. The popular “Add Reaction” feature of Slack now appears directly below the message on user tap, as does an option to copy link (ADD). Previously, access to these options required tap and holding of a message (much less intuitive), and displayed a popover menu instead of visual options in-line.

Viewing Attachments

Clicking an attachment message opens up its own interface.

File viewing (left) and redesigned (right)

The current attachment viewer requires two clicks to actually “view” a file — one on the messages screen, and another on the View File button. The latter click is unnecessary; the file should load automatically on the first click.

The top of the interface has been changed to match the copywriting and iconography of the redesigned file search (discussed previously). Also added is a back navigation bar, to preserve the table cell view hierarchy of the earlier navigation redesign.

The bottom of the attachment view interface has been redesigned to match the bottom of the messaging interface, with just a simple text-box that pops up a keyboard to comment. Comments can be viewed through tapping the icon to the left of the text-box.

Keyboard

Slack uses two keyboards for iOS. One appears on search, the other on messaging or commenting. The latter is already slightly customized, whereas the former uses the default iOS keyboard.

Search Keyboard

Search keyboard (left) and redesigned (right)

The search keyboard has been redesigned so that the “@” and “#” keys that appear in the current state messaging/commenting keyboard now also appear on the search keyboard (ADD). Searching by users/channels is now much easier.

Substituted by “@” and “#” were the Emoji keyboard key and the Microphone key (for dictation). Searching by emojis doesn’t make sense logically, so the omittance is justified (SUBTRACT). Microphone has been moved to a different location, discussed below.

Messaging/Commenting Keyboard

Messaging/commenting keyboard (left) and redesigned (right)

The placement of the “@” and “#” on the redesigned messaging/commenting keyboard matches the location of these keys on the search keyboard (discussed above), for sake of consistency. The Emoji keyboard key has been elevated in importance to a corner button, and doubled in size. There’s two reasons for this:

  1. Emojis are what make Slack fun (ADD). The positioning encourages usage.
  2. For mobile especially, it’s easier (and more common) for a user to reply with an Emoji acting as an “I got it” or “Sounds good”, rather than a full text (SUBTRACT).

Microphone

Shown in the image of the messaging/commenting keyboard redesign above, the Microphone key now appears as an icon in the text box. It’s position is the same in the search bar for the search keyboard. Placement is based on the ongoing trend of mobile towards voice and hand-free.

Non-Branded Slack

Slack’s branding is remarkably strong for an enterprise company, and contributes greatly to the success of the product.

Examples of action sheets in Slack

Although a few of the redesigns mentioned involve branding problems, the app as a whole is incredibly well branded. It looks and feels like Slack. The last redesign feature, however, focuses on the exception of the app that does not: action sheets.

Redesigned action sheets

The redesigned action sheet, which appears in, among other places, message options, file upload, and file options, replaces the native iOS action sheet with a Slack equivalent. It’s a small change, but one with rippling effects, given how often the app relies on action sheets.

Future

Understandably, many of the changes suggested come at a cost of users having to relearn UX. Without access to Slack’s usability studies and business costs, it’s hard to truly evaluate the merit of a change. Irregardless, the purpose of this piece isn’t to critique current Slack design, but to generate discussion on a design of Slack’s future. The company is moving and growing fast, and has potential to head in a variety of promising directions. 10 years down the road, I don’t find it hard to believe that Slack will be to productivity as Facebook is to social today.

In all but its literal sense, it’s a great time to be a Slacker!

Like what you read? Give Tommy Fang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.