SLACK+
How might we make Slack less confusing by working towards a more streamlined and guided workflow?
at a glance
The system my team of three chose to redesign is Slack's desktop application, a messenger app that facilities communication and collaboration within an organization. The application's primary goals are to support group communication and one-on-one conversations (direct messaging). We categorized the users of the system into two types: administrators/leaders of workspaces and ordinary workspace members. These two type of users interact with the system differently, with administrators performing managerial tasks such as creating channels and adding individuals to channels, while ordinary members mainly send messages in channels or directly to other users. Thus, we used these two tasks to analyze user behavior and then prototyped design changes accordingly in Figma.
timeline
March 2023
team
David Dubinin
Makayla Brown
tools
Figma
process
task analysis
ideate
define
flow diagrams
paper prototypes
wireframes
usability testing
hifi prototype
problem
While Slack is designed to improve collaboration, we have heard multiple complaints about it's confusing interface and unintuitive layout which contradict it's goal. Our group selected two tasks to focus on: sending a message in a channel and removing a member from a private channel, both tasks that require navigating Slack's confusing channel interface. These two tasks, along with observing user interactions, helped us delve into the experience of each of Slack's user types.
task analysis
First, we drafted a task analysis of each process, sending a message in a channel and removing a member from a private channel.
We then observed users and wrote notes regarding their steps in each task. Afterward, I asked a few follow up questions to clarify where confusion along the process was found.
I interviewed Emma and these are the observations and notes I saw through her process.
ideate
As a team, we developed 9 new ideas for each task, as well as a parking lot list of ideas. These ideas stemmed from the intersection of where our users stumbled in their task analysis and keeping focus on improving clarity and navigation.
define
We fleshed out 2 concepts which combined ideas that we generated above.
In Concept A we are looking to have the workspaces enlarged on the front screen and an added "manage members" button in the members tab. This concept aims to create a simpler and more effective workflow, creating less confusion for Slack users.
Meanwhile, in Concept B we are looking to move the workspaces to tabs across the top and to make the header with the channel info larger across the top of each page. This concept aims to bring focus to the headers and descriptors on each page, ensuring that the user is always working in the correct channel and workspace and they know that they are in the correct place.
flow diagrams
To ensure we were pushing our goals of clarify each step of the way, we created flow diagrams to aid us. One is as follows:
paper prototypes
We created paper prototypes of each concept and tested it with another team. At left you can see a user interacting with each prototype.
After going through a heuristic evaluation with this team, we ultimately decided to combine our two concepts into one.
wireframes
We then created our wireframes with many design changes improving on pain points from the heuristic evaluation.
usability testing
We tested our wireframes on 3 users of various Slack familiarity with a 15-20 minute procedure. We made sure to have a script so that each test was as similar as it can be.
Our test included time to share first impressions, scenarios to lead users to completing the two tasks we wanted to test, and post test questions including filling out the questions to the right on a Likert Scale.
We then compiled our user's feedback and made a prioritized list of changes to implement in the final days of this project.
high fidelity prototype
We created our final deliverable using Figma, although it was not the largest focus in our learning. We definitely could have taken the prototype further to encompass more of Slack's features, but we did implement our newly designed changes in this version.
Have a quick look below or step through the Figma here!
