Slack App Directory: Bringing task management tools into Slack with Workstreams.ai
Objective
To give distributed companies that rely on Slack a more transparent view of their work while they collaborate from home.
Results
Slack listed Workstreams.ai in the top spot of the Work from Home section in their app directory at the height of the 2020 pandemic. In addition to our listing, Slack gave us an award for “Best monetized directory app.”
Background
I was the design lead for this project.
As a designer at Workstreams.ai, one of my main responsibilities is to find ways to best integrate our application with the popular chat tool Slack. This became especially critical in 2020 as lockdowns related to COVID-19 led to a surge in Slack usage around the globe. Early that year, Workstreams.ai responded by participating in a remote Virtual Hackathon put on by Slack to help its user base work more productively from home.
The Workstreams.ai application is a Slack-first app, and integrates agile kanban boards with both Slack and Microsoft Teams workspaces. Over 30,000 teams have chosen to work with Workstreams.ai in Slack alone, because the tool seamlessly integrates transparent task management into Slack conversations — Keeping users’ daily work as efficient and aligned as possible.
Problem
Distributed Slack users need a more organized way to manage tasks, monitor progress on their work, and monitor the progress of the people they work with in specific Slack channels.
The Workstreams.ai task manager must translate its own interface into a Slack-friendly interface in order to render important task management features inside of users’ Slack channels.
Concept
Workstreams.ai already integrates with Slack, and lets users create tasks within Slack that can be edited and viewed both in Slack channels and on channel-specific taskboards via the Workstreams.ai webapp. But this taskboard is not visible in Slack, where the channel format makes larger overviews of task activity difficult.
To be more transparent for users collaborating in Slack, the team decided that more task details needed to be visible in Slack, but had to be in a format that was not limited to the standard Slack channel view.
View of Workstreams.ai tasks in Slack channel
View of Workstreams.ai tasks on Slack channel’s taskboard
Understanding & Observing
The first step for us as a team was to identify what opportunities existed on both a design level and on a technical level to give users a better overview of their work from inside of Slack. While the development team began checking what capabilities were possible to add, it was my responsibility to review user feedback to identify what functionality people were actually requiring.
User research was done on the Slack user base in several ways. One was a series of remote feedback calls with existing Workstreams.ai users to uncovering pain points they were having: either with the Slack, or with our own application. It was my responsibility to identify the right users to collect feedback from, as well as write relevant user feedback questions. After collecting feedback from several user groups around the world, a fundamental assumption about our user base was broken during this time. We had always assumed that our target user was someone already quite familiar with how Slack worked. What we discovered was that with the advent of COVID-19, a great many remote teams were were starting to sign up for Slack and Workstreams at nearly the same time, and learning how to use both tools almost simultaneously.
Another form of research was done by talking with people who worked at Slack, and trying to gain an understanding of what Slack’s goals and needs were for helping their own base. We also wanted to know more about what what was possible for us to create when using UI components solely from Slack’s interface. Our team hosted events for the Berlin chapter of the Slack platform community and used the presence of Slack employees to ask more detailed questions about these topics.
Competitive Analysis
Like with all of our features, the team also needed to uncover what functionality other third party applications had already created within Slack to see what worked, what didn’t, and what ideas were still untapped. As a designer, I was able to speak with our head of marketing, our CEO, and our development team to gain an understanding of what functionality was technically possible to create within Slack that at that point also had not been seized upon by our competitors. We were fortunate that at this early stage in the year, Germany was still not facing a serious COVID threat - allowing us to work together in the office.
Personas & User Stories
Based on our research and our detailed customer feedback, personas were created to address three user groups:
1. Regular employees using Slack : As an employee , I want to be able to get an overview of my own work, and the work of the people I collaborate with on Slack, so I can gain a better understanding of what work is most in need of my attention.
2. Managers using Slack: As a manager, I want to be able to identify where there progress stalls on specific tasks and on specific Slack channels so I can resolve any barriers to task completion as early and often as possible.
3. The Slack Organizaton: As Slack, we want apps like Workstreams to be as compatible with the Slack UI framework as possible, so we as Slack can serve the needs of more users on our platform.
While personas 1 and 2 are fairly straightforward, I was particularly insistent that we held out a persona exclusively for Slack, because for the first time, we were not translating something that previously existed in our application over to Slack’s interface, but were creating functionality exclusively for Slack, using only Slack’s UI framework to do it. For me, this qualified Slack not only as a platform, but a group of people with goals and needs that we were seeking to identify and meet.
Prototyping & Identifying edge cases
Among other improvements to our task manager’s Slack format, our team concluded that Slack’s App Home space would be the ideal spot to show a dashboard-like overview of individual performance and team performance on Workstreams.ai tasks. It also allowed us to provide a series of support links and shortcuts to important tasks and taskboards. The first prototypes were made on paper, followed by mid and high-fidelity designs using Slack’s UI framework Block Kit.
It was critical for design to collaborate with our technical team to get the final layouts rendered. With support from our developers, our design team tinkered with JSON and Block Kit Builder, providing us with critical knowledge about the latest upper limits of Block Kit — resulting in much faster iterations and smoother design handoffs to our development team.
This proved very helpful in the development phase, for our developers could execute on design goals faster, having been present with design during the high-fidelity phase of our prototyping. If a technical edge case was found, design and development came together to find an effective solution for displaying something in a different way.
Working to render UI sketches in Block Kit
A nearly-finished modal showing Workstreams.ai task activity inside of Slack
Our development team then had to build a Block Kit component suite that mimicked the behavior of a modern frontend framework, like React — to establish a lifecycle of reusable stateless and stateful components. They also updated the slack-block-kit npm package with support for all the latest features like checkboxes, radio buttons, and views - something that was critical to our designs.
Final results, feedback & testing
Our finished App Home design was finalized and then submitted for the Slack Virtual Hackathon. Following our submission, we spent three more days testing the functions that comes with app home for technical bugs before making them publicly available. Within just a few days of our submission, Slack announced that we won the Best modernized directory app category of the hackathon.
User testing was also done. Granted, in order to keep with the hackathon timeline, the majority of our most impactful testing of our design was done after release.
The submitted App Home design can be seen below:
Appearance of our App Home upon submission
Workstreams.ai App Home allows users to get a channel-by channel overview of their own work, as well as see overall performance of task completion, channel-by channel in their Slack Workspace over different time periods. Since it’s release, additional functions have been added to App Home in order to make it easier to jump to taskboards of interest after reviewing task completion stats.
The response from our user base on Slack has been positive. Additionally, the Slack app directory has since listed Workstreams.ai in their top spot of their Work from Home section online. By aligning our app’s goals closely with Slack’s, and by going as far as to create a Slack user persona as a reference point for Workstreams.ai App Home, we were able to design a feature that aligned closely with our app’s needs, Slack’s needs, and the needs of our shared user base.
Feedback & Marketing
Users expressed approval of the visual style off App Home, as well as the concept, and are still asking for even more specific ways of evaluating their task performance on Slack.
Following the release of Workstreams.ai App Home, I was also responsible for the design, scripting, storyboarding, and even narration of our instructional video on how to use App Home, which has since been used in various promotions and campaigns surrounding our product.