Team

Jamie Namba, UX Designer

Mentor

Bob Duncan, Senior Product Designer

Timeline

4 weeks

2021, January - February

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

How might we empower Slack customers to add meaning and organize important content so that they can access their relevant content more efficiently?

Design Objectives

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 customers with ways to organize their Saved Items by creating a Saved Item Folder structure
2. Add meaning to Saved Items with capability to extract a link from a message, leaving behind any unnecessary text
3. Help customers optimize their Slack habits and workflow through Slackbot feature alerts and increased visibility of filter function

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

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

Tools

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

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 & Competitor 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 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.

Empathizing with Slack Customers

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)

• 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

Interview Synthesis

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

Interview Themes

• Slack is a collaborative platform that can be used to establish, build, and maintain meaningful relationships.
• Some features (such as Slackbot, Search, and Saved Items) lack meaning or usefulness to individuals without ways to further refine, customize, or organize the tools and content.

Personas

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.

Slack Solutions Research

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 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:

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 those methods aren't the most efficient for their workflow.

Defining the Objective

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.

Accessing & Organizing Relevant Content

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.

HMW empower users to add meaning and organize these important items so that they can access their relevant content more efficiently?

Navigation & Way-Finding Efficiency

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.

HMW notify users about new or underused features so that they can utilize Slack more efficiently for their purposes?

HMW make existing features more visible so that users can more easily access important items?

Ideating Solutions

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:

1. Slackbot Feature Announcements

2. Saved Items Folder System

3. Save a Link

Slack Design System, Patterns, & Flows

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.

Defining Design Requirements

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:

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

Sketches

Task Flows & UI Requirements

Wireframes & Prototyping

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.

Overlays

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.

Micro-Interactions

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."

Design Objective Solutions

Accessing & Organizing Relevant Content

HMW empower users to add meaning and organize these important items so that they can access their relevant content more efficiently?

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.

Navigation & Way-Finding Efficiency

HMW notify users about new or underused features so that they can utilize Slack more efficiently for their purposes?

HMW make existing features more visible so that users can more easily access important items?

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.

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

Prototype Tasks

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

Testing Synthesis

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

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

Improve System Feedback

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.

Final Prototype

Feel free to check out my final prototype below!

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.

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.

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

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, 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.