Slack App Redesign in 8 Hours
I have really enjoyed using Slack desktop app for chatting with teammates among different slack teams for more than one year. And the product positioning for Slack is a platform for team communication. However, every time I switch to use the iOS Slack mobile app on the go, there are several usability pain points in the mobile version of Slack app that I hope to address through this redesign exercise.
First of all, I did a quick competitor analysis with iMessage, Facebook Messenger, Facebook Workplace, and WhatsApp, to see what aspects they did better than Slack mobile app. I also studied the desktop application of Slack, to see what are the key functions that Slack tries to keep consistent among the desktop version and its mobile app.
After that, I did two usability testings with two of my friends. User A has used Slack mobile app on a daily base, while User B never used Slack mobile app before. I asked them to use the iOS Slack mobile app to send messages, add reactions to one message, and to find a channel in a different slack team (requiring switching team). As a result of my studies, I compiled the list of usability issues below.
Too many interactions on one page, need integration & simplification
Main page is a specific chatting page for a certain group – can cause confusion: Which team does this group chatting below to? Where am I in the App?
- Text Typing Area
- Arrow button - difficult to add reaction to others' messages
- other functions simplified to “+” button (different ways to add photos/emoji)
- Two way swipe for 2 side bars
- Re-organize into one hamburger button, slack channel switch move to navigation bar, etc.
- Overall style - need to be less busy, cleaner
- Color pallet (too many colors)
- Add fun elements
Sample Process Sketch
Redesigning Main Page
- Considering the main functionality of Slack app is to support team communications, I redesigned its main page to display all new messages instead of showing the user a specific group chatting page.
- Moreover, I integrated the two top navigation buttons into one hamburger button, to make the interface less busy.
- The bottom navigation bar is also a new feature, with important interactions nested in previous side bars.
- Lastly, I also redesigned the Slack logo and overall color scheme, so it's cleaner and more flat in terms of colors.
"+" Button on Main Page
In order to allow easy access to main functions such as writing messages, uploading files, creating new groups, I designed a floating "+" button on the main page.
Integrated Side Bar
Instead of previous two side bars on the left and right sides, I redesigned the side bars to integrate them into one right side bar. The previous left side is not easy to use for most people, if they use single hand interacting with mobile phones.
- I formatted the grids for profile image, time, name, and message content, to make it cleaner in terms of overall visual style.
- I replaced the unclear "up" button in the typing area with emoji button and "+" button, so that the UI is easier to understand.
Long Press a Message
I redesign the long-press effect to a single message, so that the reactions/star mark are closer to the targeting message. And I also removed three unnecessary buttons from the bottom menu, eg. "cancel", so that the menu is less overwhelming for users to use.