Add a Feature to Slack

A Design Lab project- adding a message reminder and saving a workflow to drafts in Slack

Overview

I designed 2 new features for the Slack app:

  1. A core feature (message reminders)- an optional and customizable feature that allows users to trigger a warning notification before sending a message to channel or direct message based on their chosen triggers.

  2. A feature enhancement (save a workflow to drafts)- allows users to exit out of a workflow before submitting and saves it to their drafts to finish when they have more time.

Background

Slack is a digital HQ that enables organizations to stay connected in the ever evolving digital landscape. Slack’s main goal is to make work life simpler by offering all your tools and communication in one place. Simply put, Slack is a messaging app for organizations. This platform has been pivotal in the shift from in-person work to the WFH (work from home) and hybrid culture.

Many of these tools include either built in features within Slack's UI or apps and integrations offered within their app store. These features allow users to automate many processes to work more efficiently. 

The Problem

How can we prevent accidents in our fast paced work environment?

Slack’s ultimate goal is to make work-life simpler. When it comes to deciding which tools to use in day-to-day work, organizations are inundated with choices. There are many opportunities, but what features would create immediate value added to Slack’s UI.

These were the questions I focused on:

  • How can we provide a helping hand to users without being obtrusive?

  • How can we aid users in reducing mistakes so they can work more effectively and efficiently?

The Solution

I developed Message Reminders- Allowing users the ability to set reminders to slow down and check their work before sending a message, decreasing accidents. Essentially it is a warning notification before sending a message based on these chosen triggers;

  1. When adding an attachment to your message

  2. Spell Check: an indication that a word has been spelled wrong

  3. When formatting your message with markup

  4. Word Count: when your message goes over a certain amount of words

I also developed the ability to save a workflow to drafts- automatically saving workflow to drafts provides a helping hand when there is no time to slow down, decreasing the time it takes to do their work.

Constraints

  1. Slack already has a set UI kit and branding so I needed to create these features to seamlessly integrate into the current visual design standard.

  2. I had 80 hours total to finish the project.

Message Reminder prototype

Save a workflow to drafts prototype

Research

Goals

This project started with the hypothesis that creating an internal Polling feature would add value to the platform, so that user’s wouldn’t have to download a 3rd party app like Polly or Simple Poll. I also hypothesized that adding the ability to save a workflow to drafts would add value to the platform.

Throughout my research I discovered that adding a polling feature would not necessarily create the value that I’d thought and instead a new, more pressing, need was uncovered.

I had a few main goals throughout this process:

  1. Find out any hidden pain points using Slack

  2. Confirm my hypothesis by uncover user impressions of polling and workflows

Competitor Analysis

I completed a Competitive Analysis to get a better idea of the market: what features were popular and what was left to be desired from users.

Completing market research helped me to understand what users may be interested in when it came to polling features. I ended up doing this step twice- once for polling features and another time later on for message reminders.

I noticed a lot of user’s viewed the ability to customize a platform as a positive. From there, I focused on competitors and whether they offered any feature similar to this. I found that only Microsoft Teams and Google Workspace offered the ability to set up a warning message triggered from sending an email outside of the organization. They did not offer customization options for chat message, so there is a real opportunity for Slack to offer a completely new and innovative feature.

Provisional Personas

After I did initial market research I had a better understanding of Slack users so I created provisional personas.

I created 4 provisional personas:

  • “The Executive” problem solver and works fast

  • “The Volunteer” looking to connect with their community

  • “The 9-5er” looks for fast resolutions

  • “The Student” collaborates regularly and needs easy solutions

Survey Findings

I created a survey with 10 questions about polls. I had 12 participants complete this survey before moving onto a focus group interview.

  • 100% of participants used polls as a silly and fun way to connect with peers mainly in the #Random channel

  • 100% of participants used a 3rd party integration (Polly)

    • They felt it was easy to use and they would continue to use it

  • 100% of participants used emoji to gauge participation or to ask simple pulse check questions

  • 50% of participants preferred to use direct messages or multi-person direct messages to ask more specific questions

  • 50% of people preferred using threads to have a discussion

Interview Findings

I hosted a Focus Group Interview with 4 participants to learn more about their day-to-day in Slack and current pain points.

“Sometimes I’m working on a message that has taken me a long time to type and I accidentally hit enter… I’m worried people will see my message in channel while I hurriedly try to edit it”

The interview process did confirm my hypothesis that automatically saving an unfinished workflow to drafts would be a benefit:

  • 100% of people thought losing unsaved data is an inconvenience

  • 25% of people didn’t noticed you could open workflows in a separate window

  • 75% of people utilized the “Drafts” feature within Slack

Empathize

User Personas

After getting insight into the needs and pain points of my participants, I created a User Persona to generate an even deeper understanding of what would make work life simpler.

This helped me empathize with the user during the creation process. This also provided inspiration when it came to creating the channels, flows, and users within Slack.

Empathy Map

Next I created an empathy map to continue to explore the unique needs of Slack users like Andrew:

Storyboard

I decided to create a storyboard to better understand my user persona.

This helped me to empathize with the user and see their common pain points with story telling. These storyboards are inspired by real-life scenarios experienced by a couple of my research participants.

Define

Consolidate my findings

Researching and empathizing with the users inspired me to come up with and solidify features that would account for accidents during the working day.

I kept in mind the solutions that Slack already has in place: Based on your workspace permissions and what a Workspace Owner or Admin allows you can edit or delete your messages.

But this leaves something to be desired, which lead to the idea of Message Reminders. I created a feature map to get a better understanding of where this new feature would live within Slack’s current system.

Prioritize

1.

Create a warning prompt when a user hits “enter” or selects “send” based on their customizable triggers.

The warning would look something like: “Are you sure you are ready to send this message? This is a reminder based on your chosen triggers.”

2.

What message reminder trigger options would benefit my provisional personas?

  • Including Attachments

  • Spell Check

  • Customizable keywords

  • Word count

  • Formatting

3.

Add a workflow section in “drafts” , how will this look when you exit out of the workflow?

Research Slack’s language and UI elements when adding new features and what their reasoning is for automatically saving.

Task Flow

Afterwards, I created two task flows:

  1. Setting up a message reminder

  2. Saving a workflow to drafts

User Flow

To further solidify the thought process of a user, I created a User Flow. I initially though I would put Message Reminders in Messages & Media, but throughout the process decided that Advanced may make more sense. Ultimately, the usability testing would shine more light on that decision.

Ideate

Lo Fi Sketches

I decided to draw some lo fi sketches as my lo fidelity wireframes. I made this decision, because Slack is an already established product and most of my visual design would be copy-work.

Sketching allowed me to work as efficiently as possible and only focus on the frames that I would be adding to or changing.

I used this time to brainstorm and develop the wireframes for my features; message reminders and add a workflow to drafts.

Brand Identity

Slack’s branding and UI Kit is accessible and easy to find. They provide a media kit that provides workspace screenshots, as well as their brand guidelines.

Since I couldn’t download Larsseit or Slack Circular as fonts, I did some research and found a very similar font available in Figma: Noto Sans.

I did have to recreate almost all of the icons native to Slack, since I couldn’t find downloadable vectors.

Visual Design

Putting everything together

I used Figma to create the visual design. I was able to get familiar with Slack’s voice and design style during this process, which ultimately helped in solidifying my design choices and weaving them seamlessly into the platform.

Message Reminder Visual Design

This is a reminder that will trigger when you press “enter” or click send, and your message includes one of your selected triggers.

I’ve also added an option to “view triggers” if a user is confused by this reminder.

I chose to put Message Reminders in “Advanced” because it didn’t necessarily fit in “Messages & Media”.

I included the “New” icon to alert the user this is a new feature, and ensured I used Slack’s style to explain the feature.

Here’s an example, when a user chose the triggers “Spell check” and “Word count”, as well as adding certain keywords.

The keyword option is already native to Slack in their “Notification” preferences, which helped to further blend this feature in with Slack’s UI.

Save Workflow to Drafts Visual Design

This is very similar to how this screen already appears during the workflow process.

The changes include “If you leave this will automatically save to your drafts” and I updated the “Leave” button from red to green since you are no longer losing data.

Here the Drafts have been updated to include a Workflow tab.

Everything about the Drafts section is almost identical besides including Workflows.

Note: this was created before “Drafts & Sent” was released

Test & Iterations

Test Objective

I created 2 prototypes to test each feature and see if there were any necessarily revisions needed.

Goals of the usability test:

  1. Do these features flow within Slack’s design style

  2. Are they easy to understand and navigate

Methodology

To test each prototype I initially conducted a usability test over Zoom with 3 different participants. I later decided to test my Message Reminder prototype with 2 additional participants to further solidify my findings.

I then used an affinity map to summarize my findings.

Insights

  • Overall users felt that the features flowed really well with Slacks current UI. All of the participants, did not initially know this was a hypothetical feature and had already thought this was included on the platform.

    When they found out these were not features that were currently available they expressed great desire in making them available.

    “I would 100% use message reminders for spell check and word count!”

    “I can’t believe the option to save workflow to drafts is not currently available!”

  • the majority of participants did not, at first, know where to look for message reminders. Their initial though was either “messages & media” or “notifications”.

    Participants also expressed interested in knowing more about the message reminder feature within preferences, as well as more details for “word count” and “spell check”.

  • Participants did not notice the description to save a workflow to drafts. This could use bolding or more indication that this was a feature enhancement.

1st round of tests

2nd round of tests

Product Revisions

Based on the feedback from testing here is what I focused on and revised:

Message Reminders

  • Since message reminders didn’t perfectly fit into any of the current preference categories, I created an entirely new category “Message Reminders”

  • Included more description for word count and spell check

  • I also added a “Here’s an example” section, to show what a message reminder is by including an example of the notification

Add Workflow to Drafts

  • I bolded “If you leave this will automatically save to your drafts.”

  • Included a “New” Icon

  • I also changed the “Leave” button to “Save Draft”

Group 72.png
Group 73.png

Reflection

Conclusion

I was successful in designing a new message reminder feature and save a workflow to drafts feature enhancement for Slack that meets the needs of the target audience while remaining true to Slack’s style.

Learning

One of the most interesting aspects of the project was finding information that conflicted with my hypothesis and changing my idea mid project. The presented some challenges, but ultimately taught me that empathizing with the user is the most important goal.

It was also challenging to focus on two separate features, which encouraged me to remain organized and work efficiently.

Next Steps

  • If I had more time, I would do another usability test on my iterations to ensure that these changes were a benefit and added understanding to the features

  • I would have also interviewed more people to confirm that message reminders would be a feature that would add value widespread

  • I’d ensure the design handoff to the developer and engineer teams run smoothy, and add any necessary design instructions.