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.

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 Slack customers continue to share and save resources, it follows that that they will need to easily access and navigate within their saved items. This project focuses on adding that level of organization and way-finding to the "Saved Items" feature within Slack.

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:

If you'd like to learn more about my process in designing these solutions, please scroll on!

Airtable • Dovetail • Figma • Google Suite • Maze • Miro • Notion • Zoom

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.

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

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 also increases 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.

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 to dig deeper into their use contexts and pain points.

During each interview 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 before compiling the data into an affinity map.

Interview Participants (5)

Two main themes and three personas emerged from the user interviews.

The empathy map below highlights the nuances between different user contexts ranging from novice to power user, as well as some overall pains and gains within the Slack user experience.

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.

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 details and 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. organizing channels into sections). While this might be true for some users, my research findings point towards a more nuanced view:

In order to define my design objectives, I narrowed my primary and secondary research findings into four key insights and conducted a POV-Insights-HMW 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.

Using IBM's Prioritization Matrix activity, I assessed my brainstorm ideas based on user value and feasibility within my project timeline.

Taking my research on existing Slack solutions into account, I decided to pursue three main feature adds that allowed me to address both of my design objectives - adding user value with relevant content and organization of important items:

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.

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.

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?

This iterative approach helped me define a cohesive and contextualized solution to simulate four real life experiences:

Thanks to an open source Slack UI Kit on Figma Community, I immediately jumped into high fidelity wireframes and prototyping. I adjusted and reworked many of the components, but this kit saved me a lot of time and gave me a great start in creating a seamless Slack experience.

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.

For example, for the "Save a Message to a Folder" task, I experimented with the idea of using a fly out menu from the message tool tips similar to the emoji overlay. However, upon examining the existing Slack design patterns from my research, I discerned that when Slack requires a user to input text and make a selection, they use a modal like the ones you see in my design here.

Building off a UI kit also allowed me spend more time exploring the Figma micro-interaction prototyping capabilities.

Part of what makes Slack such a user-friendly software is the availability of information in the form of hover hints. I applied the same hover hints to my prototype to simulate a "real" Slack experience, and throughly enjoyed myself amongst the many prototyping "noodles."

Saved Item Folders

Utilizing the new toolbar on the "Saved item" page, customers can create and name their own folders in a way that makes sense for them.

Move a Saved Item to a Folder

Organize existing saved items into folders.

Bulk Edit Items

With the option to move or delete saved items in bulk, this feature will be important for ease of adoption as well as on-going maintenance of saved items.

Save a Message or Link to a Folder

Customers can extract the information meaningful to them and save an entire message or simply the attached link (or file) to a specific folder for reference later.

New Feature Notifications

Notify Slack customers about new (or underused) features through Slackbot or page banners.

Saved Item Toolbar - Filter Button

Increase visibility for search-filter function on new toolbar to empower customers with more accurate searches earlier in the task flow.

Test Subject: Hi-Fi Figma & Maze Prototype

Methodology:

Participants:

1) Saved Items Folder Structure

2) Save a Message

3) Save a Link

4) Retrieve a Saved Item

I uploaded the moderated and unmoderated test sessions to Dovetail where I manually coded the data to analyze the results. Overall the test went well, and my findings highlighted some usability issues and areas for improvement.

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

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

It is worth noting that users were also looking for more system feedback upon moving an item to a folder. In my solution, I used the existing Slack feedback notifications and decided not to change them as I did my best to incorporate a new feature using the existing design patterns for this project.

Feel free to check out my final prototype below!

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.

I really enjoyed the process of digging deeper into a software that I love from the user, design team, and business perspective. 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.

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 the challenge was engaging and pushed me to think about implementing a holistic and cohesive solution.

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, resources, and access, 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 customers around new or underutilized features within the platform itself.

The solutions I designed would also benefit from analyzing Slack data analytics. 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 customer 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.