Background

Slack is one of the most popular workplace communication tools in the market. Beyond a chat application, customers around the world use Slack to create and stay connected within niche communities (schools, conferences, professional networks). Across these different networks, resource sharing is a common practice among members. Slack channels evolve into help forums where users can ask their fellow channel members questions and receive a plethora of perspectives and relevant resources to help solve their problems.

Design Challenge

Where could I add value within the Slack user flow?

Along the vein of resource sharing, Slack recently recently shipped the "Saved Items" feature, allowing users to save messages or files for reference later. Items are listed by date and labeled with their original channel, however, the feature lacks further methods to organize and retrieve saved items in methodical way.

As users continue to use Slack to share and save resources, it follows that that they will need to easily access and navigate to their saved items. This project focuses on adding that level of organization and way-finding to the "Saved Items" feature within Slack.

Disclaimer: This project is not affiliated with Slack. This personal exploration of Slack and the views in this case study are strictly my own based on publicly available information and my own primary research. In a perfect world, I would be collaborating alongside Slack team members with access to market and user data to better inform my designs and solutions. For now, I greatly enjoyed learning from this exploration of a product I love and value.

Design Solution

Guided by insights and problem statements from my primary and secondary research (more detail on these below), my final feature additions accomplish the following outcomes:

1. Empower users with ways to organize their Saved Items by creating a Saved Item Folder structure
2. Add meaning to Saved Items by empowering users with capability to extract a link from a message, leaving behind any unnecessary text
3. Help users optimize their Slack habits and workflow by alerting them about new features through Slackbot notifications

Preparation

• Market Research
• Project Timeline
• Research Plan

Research

• User Interviews
• Affinity Map
• Persona Empathy Map
• Competitive Analysis
• Slack Design System - Flows & Patterns

Ideate & Define

• POV/HMW Brainstorm
• Feature Prioritization Matrix
• Sketch
• Task Flows
• Page UI Requirements

Design

• Wireframes
• Hi-Fi Prototype

Test

• Usability Test
• Findings Synthesis

Iterate

• Priority Revisions
• Final Prototype

Research Focus

As an avid Slack user, I began this project with an observation that Slack had evolved beyond workplace communications into community forums and a hypothesis that users would benefit from ways to further organize the abundance of resources found in Slack communities. I set out to validate this hypothesis through market, competitor, and user research with the following research questions:

1. Given that I don't have basic usage context and data on Slack, I wanted to learn more and build empathy for Slack users

• How do people use Slack?
• What pain points do users have with the current application?

2. In order to understand the specific problem space surrounding saved resources, I wanted to learn more about users' saving habits.

• How do people save resources found in Slack (or other platforms)?
• Do people use the current "Saved Items" feature? Why or why not? When? How often?

Market Research

Slack Value Proposition - In looking at the online messaging and networking landscape, I learned that Slack is positioned uniquely as both a workplace chat and collaboration tool, but more broadly as a professional networking platform as well. Slack blends business with the casual, truly creating a landscape for user communities to blossom and for real connections to be fostered.

Bookmarking - As users increasingly share files and resources on platforms such as Slack, Teams and LinkedIn, these companies have built out a "save" feature. What remains to be seen on any of these platforms is a way to organize these saved items (as Google and Evernote do).

Relevant Content - As more and more users join these platforms, the amount of content increases as well and can often get overwhelming. On social media websites such as LinkedIn, Instagram, and the new Microsoft Viva, algorithms are responsible for pushing relevant content (and ads) to users.

User Research

< Affinity map>

After establishing some baseline knowledge about Slack and the industry of chat, networking, and productivity applications, it was time to talk to some real Slack users. These interviews provided an opportunity to dig deeper into the use context and pain points of Slack users. During each session, I asked participants about how they used Slack and their current practices around saving and organizing resources. I took notes in a Google Sheet so that I could easily review and compare answers by question.

Interview Participants

• Age range: 28-40
• Locations: Los Angeles, Chicago, New York City
• Interviews: Video calls (3), Phone Calls (2)
• Level of Slack expertise: moderate to expert

Empathizing with Slack Users

Joys: Slack is a collaborative platform that can be used to establish, build, and maintain meaningful relationships.

• Ease of Use
• Users enjoy the ability to easily get in touch with other users. The casual communication tone lends itself to warm conversations and efficient collaboration.
• Organization
• Users appreciate that discussions are separated and organized by channels and threads. This helps with relevancy and user choice to engage in specific topics.
• Power users take advantage of features like threading, pinning, and pinging to add more levels of organization within channels.
• Social Connection & Professional Growth
• Within the context of professional groups, not necessarily enterprise settings, users have found connection and support with other community members.

How do people save resources from Slack?

• When asked if they used the Slack Saved Item feature to save resources, participants responded with:
• Rarely / No Need - 2 of 5 participants used other tools such as screenshots, phone notes app, browser bookmarks, or even Slack Drafts to save resources
• Sometimes - 2 of 5 participants
• I used to but forgot it existed - 1 of 5 participants

Pain Points: Some features lack meaning.

• Slack Bot
• Auto-archive channels was not particularly relevant to most interviewees
• "Remind Me" feature does not have a way to prioritize tasks
• Search
• Yields too many results
• Users don't seem to use the filter functions on search and rely on memory and scrolling
• Saved Items
• Pinned and saved items are helpful but they aren't organized
• Must save the whole message instead of just saving what the user finds meaningful

Persona Empathy Map

< Persona Empathy Map >

From the user research, I created three simple personas and mapped their different POV's onto one map. This artifact helped me highlight the nuances between the different kinds of Slack users while highlighting some overall pains and gains within the Slack user experience.

Competitive Analysis

< Competitive Analysis Matrix >

After doing my user research to get some broad Slack use case data as well as data on the "Saved Item" feature specifically, I looked into how other platforms execute saved items. I wanted to include "chat competitors" as well as "bookmark competitors." It would appear that none of the chat competitors offer a way to organize saved items. However, I noticed a trend of pushing and highlighting relevant content to users in general and saw an opportunity to build out this feature.

Slack Solutions

Before moving on to the ideation phase of my project, I spent some time on the Slack Help Center to learn more about Slack's current features and solutions.

What I learned: Slack already had solutions for many of the pain points mentioned by my interview participants. However, I only found these solutions because I was intentionally learning more about the product, looking for gaps in their solutions.

In their most recent product update (April 2020), Slack released an article detailing how they worked with their customers throughout the design process. In this piece, they reported a finding that people will find the things they really want with "just a bit of education" (i.e. channel sections). While this might be true for some users, my research findings point towards a more nuanced view.

Because Slack is so easy to use, novice to moderate users might not take the time to explore the Help Center. Instead, they rely on familiar forms of way-finding to get by, even if it isn't the most efficient.

Defining the Problem

& Ideating Solutions

< POV-HMW Matrix >

Based on my primary and secondary research, I narrowed my findings into four key insights and conducted a needs-pov-brainstorm with the intermediate user in mind.

• Insight #1: Users save items that they think will be useful later. As those items accumulate, it can be difficult to find the one they are looking for when they need it.
• Insight #2: With an abundance of channels, messages, and notifications, content that is meaningful to individual users can get lost in the limited time they have to spend on the platform.

• Insight #3: Users seem to underutilize Slack features that would increase their way finding capabilities. (i.e. Many rely on scrolling and memory to find messages rather than the search and filter functions, but also note that scrolling is a pain point.)
• Insight #4: After conducting interviews, I looked into the reported pain points of users, and found that Slack already had solutions for some of their sticking points. However, most users don't go out of their way to read through the Help Center.

Prioritization Matrix

< Feature Prioritization Matrix >

Using IBM's Prioritization Matrix activity, I transferred my brainstorm ideas into post-its and moved them around on the matrix to assess user value vs. feasibility. After doing research on existing Slack solutions as well, I decided to pursue a few utility feature adds (Saved Items) and a Slackbot feature announcement and/or suggestion. These selections allowed me to address both organizing important items and adding user value with relevant content.

• Slackbot Feature Announcements
• Saved Items Folder System
• Save a Link

Slack Design Patterns

& Existing Flows

< Existing Flows & UI Patterns >

Based on my selections for the three feature additions, I mapped out the existing Slack task flows and UI patterns to provide context for how my solutions could incorporate into the existing Slack framework.

Task Flows

UI Requirements

Sketches

< Task Flows >

< UI Requirements Doc >

< Sketches >

This portion of task flow exploration, page requirement definition, and design ideation was an iterative and cyclical process of researching the existing Slack and competitor design patterns and flows while rapidly ideating on sketches and task flows.

This iterative approach helped me ensure that my solution went beyond simply designing a feature or two. I wanted to contextualize my solutions more broadly and ensure that they felt cohesive to simulate a real life experience. How could I design these features to seamlessly incorporate into the current Slack interface? How would users discover and adopt the new features? How and when would users use the new features? How would the features relate to each other cohesively in a test setting and beyond?

Through my iterative process, I defined a solution comprised of four experiences: 1) Moving through a folder structure on the Saved Item Page

2) Saving a Message from a Channel

3) Saving a Link from a Channel

4) Retrieving a Saved Item

Wireframes / UI Kit

While I wanted to keep an open mind as to how I could implement certain features, my solutions and overlay designs were guided by the constraints of the existing Slack design system and what would fit most seamlessly into it.

• i.e. Save Item to Folder - I played around with the idea of using more of a fly out menu like the emoji overlay, however upon examining the existing Slack design patterns, whenever Slack requires a user to input text and make a selection, they use a modal like the ones you see in my design here.

I was also able to jump immediately into high fidelity wireframes and prototyping due to an open source Slack UI Kit on Figma Community. While I adjusted and redesigned many of the components, this kit saved me a lot of time and gave me a great start in creating a seamless Slack experience.

< Wireframes + Annotations >

Prototype

< Original Prototype>

Four Task Experiences:

1) Saved Items Folder Structure

• Check Slackbot feature announcement
• Create a new folder
• Move an existing item to a folder
• Bulk edit saved items

2) Save a Message

• From a channel, save a message to a folder

3) Save a Link

• Check Slackbot feature announcement
• From a channel, save a link to a folder

4) Retrieve a Saved Item

• Find a saved message within Saved Items

Usability Testing

< Link to Usability Test Plan >

Test Subject: Hi-Fi Figma/Maze Prototype

Methodology:

• Moderated remote video screen share sessions (Zoom/Figma)
• Unmoderated sessions (Maze)

Participants:

• Beginner to Intermediate Slack Users
• Moderated: 4 participants
• Unmoderated: 8 Participants

Usability Test Findings & Synthesis

< Link to Usability Test Findings Slide Deck >

< Dovetail Synthesis Snapshots >

< Priority Revisions Matrix >

Key Insights

1. At best, users will scan through a Slackbot message. Therefore it is important to make new feature information accessible elsewhere, too.
2. In regards to multi-select items, users are inclined to use previous actions within individual messages or other conventional selection methods.
3. When retrieving saved items, users are inclined to use the search bar (keyword) or find by folder.
4. Users would appreciate increased system feedback (labeling) to confirm completed actions.

Priority Revisions

< Before and after screens with annotations >

< Embed final prototype >

1) Increase affordance around the interface elements involved in executing the "Bulk Edit Items" and "Filter Saved Items" tasks.

Problem #1: Users were unfamiliar with the affordance of the new Saved Items toolbar.

Solution #1: Further educate users on toolbar functionality through header announcement on Saved Items page.

Problem #2: When retrieving saved items, users were most frequently inclined to use the search bar.

Solution #2: Incorporate "Saved" as a preset filter within the existing search bar filter buttons.

2) When moving an item to a folder, increase system feedback through more explicit labeling to affirm successful task execution

Problem #3: Users were looking for more confirmation that they had successfully moved an item to the (correct) folder.

Conclusion

Overall, this project and prototype were a success. My research validated my hypothesis that users would benefit from ways to further organize the plethora of resources sent in Slack. Those who tested my prototype were surprised the new features didn't exist already, and some even reported that they forgot which features existed in the current application and which were new in my prototype. It was really fun and interesting for me to dig deeper into a software that I love from the user, design team, and business perspective.

Lessons Learned

Though I had heard it before, the main lesson I learned and took to heart from this project was that constraints are your friend.

I learned a lot about working within an existing design system. As a growing designer who can get stuck in the seemingly limitless possibilities and iterations of design, working within a design system helped me to narrow my design ideations and shift my focus to the different feature use cases, discoverability and adoption scenarios that might be reflected in the real world. Wrestling with the intricacies of the Slack design system while defining and incorporating my solutions was difficult, but it was a very satisfying problem to solve and pushed me to think about implementing a holistic and cohesive solution.

Building off a UI kit also allowed me to 1) practice creating flexible and organized components in Figma and 2) spend more time on micro-interactions within the prototype. Part of what makes Slack such a user-friendly software is the availability of information in the form of hover hints. With more time to explore the capabilities of Figma prototyping, I applied the same hover hints to my prototype to simulate a "real" Slack experience, and throughly enjoyed myself amongst the many prototyping "noodles."

Future Considerations

If this project existed in the real Slack pipeline, each of the four experiences I designed would likely be a project in themselves. If I had more time and resources, I would include more user research and testing with customers (as Slack has done). In particular, the Slackbot new feature announcement and Help Center alludes to a larger discussion around how Slack can educate users around new or underutilized features within the platform itself. The solutions I designed would also benefit from analyzing Slack user data. For example, how many and what kind of users have adopted keyboard shortcuts? How effective are the Slack tip chips and feedback notifications? Data speaking to these kinds of questions would inform a better understanding of user needs and thus design solutions.

In the meantime, I'd like to thank Slack for creating a vibrant platform for communities and relationships to thrive. It was truly a joy to learn and grow as a designer through this exploration.