Slack

Product

Slack - a proprietary business communication platform.

The context

Slack introduced the new design on mobile on May 13, 2020. I didn't notice until one day my colleague told me that the new app has limitations.

After updating the newest version on my phone, I had a mix feeling about the new design. Overall, the UI looked great but the UX could be better. Therefore, I decided to improve Slack experience on mobile.

My role

• User interviews and observations.
• Paper / pencil sketching and low-fidelity wireframes.
• Using Figma for high-fidelity prototypes.
• User testing.

Timeline

2 weeks in May 2020.

‍PROBLEM

How might we design the new home screen where users can have quick updates of important messages?

PROCESS

I used 5 stages of design thinking to solve the problem.

OUTCOME

• New Slack UIs and information architecture.
• A discovery of a new problem after user testings.

Stage 1: Empathize

Step 1: Understand the purposes of this new design from the Slack team

From the article about the redesign here, the Slack team wanted to fix two problems:

• Usability: The previous menus are complex.
• Discoverability: Certain features were buried away and underutilized, making Slack harder to use than it should be.

Step 2: Read other users' negative reviews

Relevant negative reviews were tripled positive ones.

I started to see the problems surrounding the two areas: the new navigation and the new home screen.

A design can’t be perfect for everyone!

I believed the Slack team will pay more attention to the active users who may switch to competitor products after experiencing unsatisfying user experience.

Step 3: Interview with Slack active users

The purpose was to understand how active users use Slack on their mobile. Participants need to have more than 10 Slack workspaces and his/her company is using Slack as the main communication channel.

Here is my list of questions:

• What are your purposes of using Slack?
• What are the topics of conversations?
• How often do you use Slack on desktop and mobile?
• What are your purposes of using Slack on mobile?
• What are your opinions about the new Slack on mobile?
• If you could change one thing in the Slack mobile app, what would it be?
• What are the differences between the old and new app?
• What can you do on each page: Home, DMs, Mentions, You?
• What are alternatives besides Slack that you’re using?

‍

I learned that active users don't have any challenge with the usability of the new navigation and the new home screen. These added features are easy to use.

Therefore, the problem is about the usefulness of these features.

Stage 2: Define

Step 1: Create a user persona

I built this persona based on the information I collected from the Empathize stage.

Step 2: Narrow down the focus problems

As the user’ goal is to increase productivity when using Slack, the term “useful” could be defined as “productive" for users.

From the persona, an active user still doesn't satisfy with the level of productivity she gets with the new Slack mobile design. Therefore, I applied the five whys technique to drill down to the root cause of the unproductivity.

The problem: she feels unproductive when using Slack on mobile.

Why? She feels distracted by receiving many notifications.

Why? She receives many notifications for messages that are not important to her work.

Why? Slack sends her notifications for all new messages.

Why? She can’t set the criteria to prioritize the appearances of messages.

Why? She doesn’t think Slack has that option.

Therefore, the root cause is a lack of prioritization for Slack messages, so my solution should focus on improving the experiences of how users read Slack messages on mobile.

‍

The problem statement: Slack active users need feature(s) that help these users pay attention to the important messages when using Slack on mobile to increase the users' productivity.

Stage 3: Ideate

I used Crazy 8’s method from Design Sprint for ideation. The goal was to generate a wide variety of solutions to my problem statement.

Then, when I picked an idea to go forward, I tried to select the one that is effective and requires the least changes. I believe we shouldn’t make up solutions for something that doesn’t break.

After the exercise, I noticed one interesting idea:

How might we design the new home screen where users can have quick updates of important messages?

Working on the idea, I faced three new challenges:

• What would happen to the current home screen?
• What would happen to the bottom navigation?
• What criteria could users use to set prioritization for messages on the home screen?

Ideate again… and I came up with the solutions.

Stage 4: Prototype

The new home screen and navigation

There’re three changes in the new design.

• Home: I realized reading Threads is the fastest way to get updates and reply. In the current design, messages display with no context; therefore, users have to click on the message to get the context first and then reply. The new homepage shows all updates instantly.

• New feature "Reply later": Contents on Home are like news feed. Users want it to look nice and clean. When users click Reply later, the message will disappear. Users can access these messages via Threads, Channels, or Mentions.
• No message icon at Home: Users shouldn’t be distracted by the main tasks which are to get notified and to reply quickly. Users can access the message icon in Channels and Mentions.
• New navigation: the current Home will become Channels. Users can send new direct messages via the circle icon. DMs page at the bottom navigation is not necessary because then users have too many ways to send direct messages: via either Home, Channels, DMs, circle icon, or swipe gesture.

The new You page

In this design, I added the new feature Customize home to the current design. Users can personalize their Home contents in two approaches: Prioritization and Home Display.

High-fidelity prototypes

I used a combination of screenshots and new elements in these designs. I would be successful if you didn’t notice the difference between them!

Stage 5: Test

Design thinking is an iterative process to design desirable, feasible, and viable solutions. My solution is certainly feasible to develop and probably viable to get paid users because I didn’t change the fundamental of Slack.

Therefore, at this stage, I focused on testing the desirability of my solution to Amy — the user persona.

Step 1: Run the tests

Here is my testing process:

• Objectives: understand to what extend the new designs help users to increase productivity.
• Method: observe users interact with the prototype of my design and ask them to say their thoughts out loud.
• Participants: Slack active users who I interviewed in the Empathize stage.
• Part 1 of the test — ask users questions: What can you do when you’re at this screen? There will be follow-up questions during the interview.
• Part 2 of the test — ask users to complete certain tasks: These tasks are to send messages to Daniel/Annie and to set customization for home contents.
• Tools: Figma and Loom.

Step 2: Summarize findings

The testing spotted many good insights about the users’ behaviours. I need to improve these areas on my design:

• At Home page, users think these are two messages in the team_hr channel. In fact, the messages are under one thread. When users are at Thread page, they understand this. Users don’t know I use Thread concept to design Home.
• When users are asked to send direct messages to Annie, users don’t notice the message icon at Channels and Mentions. Users often stay at Slack homepage to conduct all possible tasks.
• When users are asked to customize the home contents, some users fail this task. These users try to find the word Settings or click on Preferences at You. Users tend to click on or search for the standard naming convention.

‍

Below is one of the records of the test. I have this interviewee's consent to put the video on my site.

‍‍‍

Back to the Empathize stage

I figured out that users may not need new features to help them prioritize important messages.

‍

The problem with the new Slack mobile is, indeed, giving users too many options to consume messages. Users now can access instantly more types of contents like direct messages, mentions, personal profile but then the users don’t know how to use these contents to maximize productivity.

‍

Final note: as design thinking is a non-linear process, I did spend many hours to go back and forth between stages. However, to serve the purpose of a portfolio, I rewrote the project is a much linear way!