Redesigning Slack through Usability Testing with Eye-Tracking
Redesigning Slack through Usability Testing with Eye-Tracking
UX/UI Design
UX/UI Design
Sep 2022 - Dec 2022
Sep 2022 - Dec 2022
Team
Team
1 PM, 4 UXUI Designer (Including Me)
1 PM, 4 UXUI Designer (Including Me)
Role: UXUI Design 60%, Usability Testing 80%
Role: UXUI Design 60%, Usability Testing 80%
Class project
Utilized eye-tracker to analyze user behavior and redesign Slack for a more efficient user experience
It started with the curiosity of whether there would be any difficulties
in using the popular team-communication tool, Slack
It started with the curiosity of whether there would be any difficulties
in using the popular team-communication tool, Slack
We selected participants based on the user group and their level of proficiency,
and conducted the UT with them
We selected participants based on the user group and their level of proficiency,
and conducted the UT with them
Participants were recruited for each role based on their Slack proficiency and the size of their organization.
Participants were recruited for each role based on their Slack proficiency and the size of their organization.
We conducted user testing using eye-tracking and Maze
We conducted user testing using eye-tracking and Maze
The first used eye-tracking to identify specific pain points in the current Slack interface.
The second, after redesigning, used the online tool Maze to quickly validate usability improvements.
The first used eye-tracking to identify specific pain points in the current Slack interface.
The second, after redesigning, used the online tool Maze to quickly validate usability improvements.
We structured a task hierarchy to guide users through the missions
We structured a task hierarchy to guide users through the missions
Tasks were categorized into primary, secondary, and additional levels, with difficulty evenly distributed
Tasks were categorized into primary, secondary, and additional levels, with difficulty evenly distributed
As a result of the first UT, issues were found in the "Save a message" for beginner users
and in the "Use Apps" for advanced users.
As a result of the first UT, issues were found in the "Save a message" for beginner users
and in the "Use Apps" for advanced users.
Beginner: Has difficulty locating the save icon and repeatedly right-clicks the message.
Master: Faces challenges when connecting apps and struggles to identify how to use the button.
Beginner: Has difficulty locating the save icon and repeatedly right-clicks the message.
Master: Faces challenges when connecting apps and struggles to identify how to use the button.
Issues with 'Finding a Channel' and 'Check mention and reaction'
were commonly observed for all participants.
Issues with 'Finding a Channel' and 'Check mention and reaction'
were commonly observed for all participants.
Common Issues
The grouping of Channels and DMs makes it challenging for users to quickly locate a specific channel.
Users often miss the Mentions & Reactions section in the sidebar and tend to focus solely on channel notifications.
Common Issues
The grouping of Channels and DMs makes it challenging for users to quickly locate a specific channel.
Users often miss the Mentions & Reactions section in the sidebar and tend to focus solely on channel notifications.
We analyzed the first UT results to identify the attributes causing issues
We analyzed the first UT results to identify the attributes causing issues
01. Visual Clarity: Is the guidance visually clear for achieving the goal?
02. Convenience: Is the process convenient and free from discomfort when performing the task?
03. Predictability: Does the functionality align with user expectations?
04. Familiarity of Terms: Are the terms and labels used in the interface familiar and intuitive for the users?
05. Affordance: Does the design naturally guide the user towards achieving the goal?
*This ratio is based on the analysis results of all tasks.
01. Visual Clarity: Is the guidance visually clear for achieving the goal?
02. Convenience: Is the process convenient and free from discomfort when performing the task?
03. Predictability: Does the functionality align with user expectations?
04. Familiarity of Terms: Are the terms and labels used in the interface familiar and intuitive for the users?
05. Affordance: Does the design naturally guide the user towards achieving the goal?
*This ratio is based on the analysis results of all tasks.
And derived Usability Principles to define design guidelines.
And derived Usability Principles to define design guidelines.
Save a message - Improving Visual Clarity
After the redesign, task completion time was reduced from 23 seconds to just 10 seconds.
Save a message - Improving Visual Clarity
After the redesign, task completion time was reduced from 23 seconds to just 10 seconds.
How to resolve it?
Separate the emoji reactions at the bottom and main functions like bookmarks and pinning at the top to enhance visual clarity.
Simplify the terminology for easier understanding.
How to resolve it?
Separate the emoji reactions at the bottom and main functions like bookmarks and pinning at the top to enhance visual clarity.
Simplify the terminology for easier understanding.
Use apps - Improving Predictability
After the redesign, task completion time was reduced from 80 seconds to just 32 seconds.
Use apps - Improving Predictability
After the redesign, task completion time was reduced from 80 seconds to just 32 seconds.
How to resolve it?
Explore apps and enable integration with an ON/OFF toggle.
Enhance usability with a menu tree UI instead of complex commands.
How to resolve it?
Explore apps and enable integration with an ON/OFF toggle.
Enhance usability with a menu tree UI instead of complex commands.
Find a channel - Improving Convenience
After the redesign, task completion time was reduced from 22 seconds to just 6 seconds.
Find a channel - Improving Convenience
After the redesign, task completion time was reduced from 22 seconds to just 6 seconds.
How to resolve it?
Assign color labels to each channel for quick identification.
How to resolve it?
Assign color labels to each channel for quick identification.
Check mention and reaction - Improving Affordance
After the redesign, task completion time was reduced from 62 seconds to just 11 seconds.
Check mention and reaction - Improving Affordance
After the redesign, task completion time was reduced from 62 seconds to just 11 seconds.
How to resolve it?
Separate notifications related to the user,
Distinguish between read and unread things and encourage checks through toast messages.
How to resolve it?
Separate notifications related to the user,
Distinguish between read and unread things and encourage checks through toast messages.
Next Project
