Slack Desktop App Redesign
Project Intro.
Oct 2019 - Nov 2019 | Academic Project
ISE 217 Human-Computer Interaction by Dr. Moallem
This is a 4-week academic project. We worked as a team of 4 on Slack desktop application redesign. The goal is to define user experience goals and usability issues of an interactive product, then apply a user-centered design for new features or existing features that didn't meet the goals of users.
My Role
User research
Ideation
Prototyping
Usability testing
Tools
Adobe XD
Illustrator
Photoshop
Premiere
Why Slack?
Slack is a cloud-based proprietary instant messaging platform. Collaboration happens in channels, gives everyone on your team a shared view of progress.
Millions of people around the world are using Slack. However, we’ve heard some complains. So we want to know what the issues are and how we can potentially improve the user experience for current users.
DISCOVERY
Evaluate Slack
Web review
Competitor analysis
Unstructured interview
Closed card sort
1. What people are saying on web?
“The UI is super confusing. It feels disorganized and repetitive.”
— App Store
“The overall appearance can be confusing when you are looking for much needed info in a hurry.”
— Youtube
Based on the web review, many users are not happy with the UI of Slack. They think it’s confusing, difficulty to start and understand what is the best way to use it efficiently.
2. Competitor analysis
Microsoft Teams
Cisco Jabber
Fleep
Pros
In-built integration of Office 365
File collaboration: share and edit documents within the application
Search the keywords in Chat.
Integrated into phone systems
Launch web collaboration
Instantly share screen, remotely control another Windows desktop.
Send emails through the app
Quote msgs and turn into tasks
Labels to organize conversations.
Cons
Can’t organize the side bar
Structure of files confuse users
Complicated interface, difficult to start
Older messages get deleted
Inability to search chat history
Limited features on mobile app.
Limited integrations available
Not as widely used.
3. Unstructured interview & closed card sorting
We interviewed users who use Slack desktop application on a daily basis. The questions focused on their engagement with the features, goals and pain points on Slack desktop application, including “what features do you use most/least in Slack? And why?”, “What’s your 3 top goals when using Slack?”, and “Have you faced any difficulties when using Slack?”, etc.
We did a closed card sorting for top menu in order to identify the gap between the existing structure of the top menu in channels and the user's expectations.
Key takeaways
Discoverability
Many powerful features are hidden in odd places, but users are willing to learn
Ease of use
Require extra effort to use the "Thread" feature
Feedback
Users often miss new message, difficult to keep up with updates
Findability & Understandability
Sprawling menu layout with redundant items, and the meaning of the icons are unclear
THE PROBLEM
Features are not utilized to
achieve Slack’s full potential
Many of users’ problems can be solved with Slack’s own features. However, users are not aware due to their odd location or lack of knowledge, and the layout and flow is not intuitive enough for users
to find what they need.
THE GOAL
Simplify UI and educate users
Ensure features that users need most are easily accessible
Educate and encourage users to discover and utilize Slack's features
Simplify the flow of following and managing threads
Add new necessary feature(s) to enhance collaboration and productivity
Also, this is not a UI redesign. The UI should comply with existing
Slack style guide to drive product consistency.
DESIGN SOLUTIONS
First Iteration
IMPROVE FINDABILITY
1. Top header
Previous header alone had over a dozen places to click, and included two search bars. Based on our findings from closed card sorting and user interviews, users always can’t find what they look for. So to reduce the complexity, I re-organized the top navigation and redesigned the layout and look of icons. The goal is to reduce cognitive load and let users find what they need faster.
IMPROVE EASE OF USE & FEEDBACK
2. "Thread"
Before
Previous design of “Thread” only shows users one thread without providing the context, what happened before this conversation in the channel? What’s this channel about? So I want to provide additional hints regarding this issue.
After
My new design helps users keep up with updates and provide contexts by bumping up my threads updates to the most recent position in the channel, and reduce clicks to view threads in channel.
IMPROVE DISCOVERABILITY
3. New "pro tips" feature
To achieve goal #3, educate users to explore the helpful features. I explored 2 different approaches.
Approach 1 –
interactive tutorial
Intuitive: provide an interactive and guided experience, each tutorial will be completed in 3-5 clicks.
Discoverability: entry point doesn’t take primary location. Triggering point is limited through user clicks.
Feedback-based: collect users' feedback; only show users features that the community found helpful.
Approach 2 –
right-in-time hints
Non-disruptive: doesn't interfere user's current workflow.
Personalized: only show features that users never used.
Contextual: hints are presented to users at precisely the right time; when they’re needed. For example, when users click through different channels, the hint below will show up:
ENHANCE COLLABORATION
4. New “proofing” feature
To achieve goal #4 – based on competitor analysis, we want to enable Slack users collaborate in one place. This new feature allows users in channels to add comments directly to files within the Slack application.
In-app experience: everyone in channel can comment files in Slack.
Avoid context switch: no need to download and edit in other applications and upload versions of files.
Centralize the place to view aggregated comments.
A closer view of the aggregated comment
DESIGN SOLUTIONS
Second Iteration
Because of the time constraint, we conducted quick usability testing. We want know if users are satisfied and if there are any usability issues with the redesigned features, can they find certain features faster in top menu, and and which option of the tutorial feature they prefer. Our key takeaways is that many users are not happy with the “pro tips”, so I decide to redesign this feature.
Redesigned "pro tips": animated hints
Attract their attention without interrupting their workflow or forcing any actions.Easy to follow: promote features by showing the benefits and flow. Content relevant: only show unused/abandoned features.Triggering point: show up if it's a new feature, user searched key words, or new usersNon-disruptive: won't disrupt users' current flow.