Slack



* ILLUSTRATION PROPERTY OF SLACK


At Slack I worked on both the Core Product and Platform teams, designing for everyday-affordances on the client, as well as those for external app integrations.







01 — Core Product


The Core Product team focuses on Slack’s desktop and web client, designing all the primary affordances that users work with in the app.

I worked on a few affordances, including improving the Quick Switcher and Quick Status features.





Quick Switcher

The Quick Switcher allows users to easily find and switch between different channels. As Slack startedoffering new languages for its app, we looked at updating this affordance to accomodate Japanese characters. I prototyped solutions that would preserve all components on the Quick Switcher modal, without truncating or breaking any strings.





The Issue

Due to the size and sematincs of Japanese characters, this current modal design would cause the Japanese word-strings to spill over. 







Prototypes

Prototypes explored ways we could reposition the tooltips at the top. 








Redesign

The proposed re-design moved the prompt “Jump to a conversation”to a placeholder within the search bar, while the other navigation prompts were shifted below the search results.








Demo

With the changes, Japanese (and other language) characters no longer spilled over:









02 — Platform Team, App Directory


The Platform Team manages app integrations, working on affordances within the App Directory. This directory is where admins and users find integrations they’ve installed, and the permissions associated with them.

I worked on improving the manangement logic and presentation of app information within the directory, making user permisisons  clear across a handful of scenarios.







Goals 

We wanted to clean up the App Info page: clarify affordances, create a framework for viewer use cases, clean up the language around permissions and setting, and and establish a layout that could accomodate video content.








Content Outline

Before prototyping, we outlined the required elements on the dashboard. 









Prototypes

With the framework, we prototyped layout options that could accomodate all necessary components, espeically video content, which was a new affordance.






A tabbed approach was the finalized design. 





Scenarios

We built a framework of use cases for how the components would change based on the types of apps, and who was viewing the directory.









Signed Out State
Sign in to Install CTA; no tabs.

Member Signed In; App Installed
Open in Slack CTA; tabs enabled; permisisons list.


Admin Signed in; App Installed
Open in Slack CTA; Restrict App, Permissions List; Remove app.

Member Signed In; App Not Installed
Request App Ingress






Finalized App Info Designs