Slack Apps

A case study of meaningful design decisions.

Slack is a powerful productivity tool that allows users to send convenient messages in workspaces. To empower users further, Slack allows them to add "Apps" for extra functionalities that may be important for work, such as Polly for creating polls, Zoom for scheduling video calls, Google Drive for linking documents, and more. I wanted to increase visibility of this feature on mobile so that users could access additional functionalities anywhere at anytime.

I ideated, created, and designed this project.

A submission for the KPCB Design Fellows 2020 app.

October 1 to October 16, 2020 (about two weeks.)

Doing More with Slack (Apps)

If you work at a company or are in any clubs in college, chances are that you've used Slack before. I'm currently part of five workspaces myself. Though Slack is useful for quick messages, it also has additional functionalities that you can access by downloading "Apps." These Apps connect products, such as Github, Zendesk, Google Calendar, and more, to your workspace so that you can be as productive as possible with one service: Slack.

Though it's easy to find where to add and access Apps on desktop, there is currently no (easy) way to download Apps on mobile. Though users can access ones they've already installed on their laptop, I wanted to implement Apps on mobile so that users can easily download, toggle, and customize Apps on their mobile devices as well.

"Apps" are organized in their own section and easy to find.
Clicking "More" in the main navigation leads you to "Apps."
"Apps" are neither well organized nor downloadable on mobile, though users can interact with them individually or view them in a browser.

What's in It for Slack

Slack's mission is to "[make] work simpler, more pleasant, and more productive," and by adding more accessibility to Apps, I believe that Slack will do all of the above. Have your hands full making lunch but need to respond to a team member? Download "Voice Message" to send a recording instantly. In bed at 3:30 AM but just remembered something you need to tell your manager? Use "Timy" to schedule a message for 9 AM from the comfort of your sheets. The possibilities for a pleasant and productive experience are endless.

I believe that this would boost time users spend on Slack. Additionally, more and more companies may begin using Slack, seeing that it is truly becoming an all-in-one platform that boosts productivity and smooth experiences for users. (Image from

The Problem with Apps Accessibility

Going into this, I actually wanted to add a feature in Slack that would allow users to send voice messages, but I quickly learned that there are actually products available in the Slack Apps directory that, if downloaded, allow users to do just that. Instead, then, I focused my efforts on increasing visibility and interactivity for such features.

User Interviews

Though downloading Apps adds steps to the user flow of accessing extra functionalities on Slack, it increases the number of tools users can implement and allows for customization. I decided to speak to 14 users of Slack, either college students or working professionals, and gained the following insights:

  • Users use the Apps that Slack offers, especially the extra calling, scheduling, and document-attachment functionalities.
  • Users often forget that Apps is available on mobile. ("The only way I can access them is that lightning bolt symbol within or chat.")
  • Users would like different Apps on mobile and desktop. ("I see voice messages being a lot more useful on mobile." "I don't open GitHub on my phone.")

Market Research

There are not many products out there that offer additional functionalities through the implementation of Apps, but I decided to take a look at how email and messaging platforms supplementary features. Instagram DMs and Facebook Messenger both had very focused features, such as adding images, voice clips, or GIFs. They put all of their functions into a tight space that would reveal more upon further interaction, but this works because everything in that area is focused. Slack may need something more as the added functionalities enhance the productivity experience, not just the messaging experience.

Gmail offers "Add-ons" that enhance user experience as well (Streak, Calendar, Zoom, etc.), but these are only available on desktop. Users can't access these apps at all on mobile, so there's no way to view or add such apps on mobile. Slack allows users to use Apps on mobile, so it would be great to be able to add them, too.

Facebook Messenger
Instagram DMs
Gmail on Desktop

People should be able to be productive anywhere in any way.


My research showed me that Apps must be quite visible for the user to remember to engage with them. If I wanted to help users boost productivity using Slack Apps, I would need to design a solution that is not only easy to access, but also visible enough to remind users that additional productivity functionalities exist within Slack. Below, I've included a quick summary of the priorities for my design.

Increasing Visibility Through Placement

The Entry Point for Slack Apps

On Slack's current mobile interface, there is no way to download Apps that you haven't already downloaded on desktop. Though you can use Apps in a chat by clicking the lightning bolt icon, there is no clear way of accessing them from the main screen. Chats are sprinkled in Direct Messages, which may cause some confusion and lessen clarity.

Option 1: Home Page
A non-invasive yet noticeable position relevant to chats.
Option 2: Part of Chats
Apps is visible in its own section, but it is unimportant.
Option 3: Main Navigation
Noticeable and easy to find, 1/5 most important elements.
Option 4: Profile Page
A subtle choice, tucked away in profile and far from chats.
All of these designs took inspiration from the way the desktop app is laid out. For the entry point of Slack Apps, I chose Option 1 because I believed that the positioning of Apps was both relevant and noticeable without being too "in your face." I originally wanted to go for Option 3, but in the end, I felt that Apps was not important enough to have a place in the main navigation footer. A couple of users I asked for feedback felt similarly.

An Engaging App Directory

On Slack desktop, clicking on Apps takes you to a your Apps, your workspace's Apps, a search function, and an external link that takes you to Slack's App directory. On mobile, an external link may be a hassle, but more importantly, no page for adding Apps exists yet.

Color Scheme

Before moving forward, I needed to decide on a color for the accents. Slack uses a dark green, but I felt that it seemed out of place in some of my mobile designs and perhaps was better suited to the App directory on browser. All 5 of the users I asked about color choice stated that they preferred purple to green, but this meant that I had to change the few green accents in Slack moving forward.

Option 1: Green (#007A5A)
Option 2: Purple (#7C3085)

User Interface of the App Directory

In each of the first three screenshots, there are actually 2 choices to be made: how the overall organizational hierarchy should be presented and the visual design of each App element. In total, that makes 6 possible options.

Option 1-A: Horizontal
Apps are all in one page. Directory via external link. Horizontal boxes.
Option 2-B: Vertical
Apps organized within subpages. Native directory. Same-sized boxes.
Option 3-C: Mosaic
Apps organized within subpages. Directory via link. Vertical mosaic.
Final (2-A)
Apps organized within subpages. Native directory. Horizontal boxes.

Option 1A was most closely modelled off of what Slack currently has on desktop. I believed that the Apps being all in one page, though, would be too much scrolling, so I came up with different versions. Thus, I created Options 2 and 3 as alternatives with subpages to help organize information. I oped for Option 2 in the end because I believed that a native directory would be most useful.

For the App cards, I actually preferred Option C because it is dynamic and utilizes space much better than Option B. C and B both emphasized the visual element (icon) of an App more, which I thought looked nice but was not communicating the value of an App. After some user feedback, I decided that Option A would be best because it was the most professional and standard design, emphasizing the most useful information.

Conveniently Add Apps on Mobile

Next, I needed to design the App details page and the user flow of adding an App to ensure that the experience is as seamless as possible.

An Appealing App Details Page

Next, I needed to design the App details page and the user flow of adding an App to ensure that the experience is as seamless as possible.

In the end, I chose Option 2 because the main focus of the design was downloading the App rather than visiting its homepage, reading details, or how cute the icon was. Option 1 did not emphasize the actionable items enough, though Slack's desktop version looks quite similar; (the buttons are white.) Option 3 emphasized the wrong content.

Option 1: Desktop Inspired
Simple and reminscent of Slack's desktop app.
Option 2: App Store-esque
Organized like an app from the App Store.
Option 3: Icon Heavy
More visual, with a splash of color and a large icon.

The User Flow of Adding an App

After a user adds an App, what happens?

I created two potential user flows for after a user adds an App. Option 1 is inspired by what it looks like when you save an item to a collection on Facebook or an item on Pinterest. It allows for flexibility while alerting the user that they have taken an action. Here, the flow shows that a notification pops up after a user adds an App. When clicked, the user is taken back to the home page where they can access all their Apps.

Option 2 is inspired by what it looks like to add an App on desktop. Slack's flow takes the user from the App details page to a chat with that App, so they can get started using it right away. Here, the flow shows that adding an App takes the user to the chat screen and pressing "back" takes them to their home page.

I preferred Option 1 because I liked the flexibility that it gave users, and many users felt the same. They did not mind the extra taps, even if that would be consistent.

Persistent Support for Enhancing Productivity

Finally, the last thing left to do was reorganize the home page so that users could access their apps existing Apps and interact with them.

Organizational Hierarchy of the Home Page

First, I wanted to organize the home page better so that it would be less cluttered. Similar to the desktop version of Slack, I added arrow icons that would allow for the expanding and collapsing of any section. This way, users can navigate through long lists better. Additionally, I wanted to give Apps its own section, mimicking the desktop version as well. (Mobile had Apps and Direct Messages in the same section, which was confusing for users.)

Next, I wanted to organize the information well so that users could easily find their favorite Apps (and DMs or Channels). Option 3 most closely mimics the desktop version of Slack. It shows the "Starred" section as its own. Though items would clearly be prioiritized and easily found, there is not much differentiation between a Direct Message and an App. Moreover, all "Starred" items do not have the same importance. Just because an App is favorited does not make it as important as a Channel.

I decided to move the "Starred" items to the top of their respective sections. This way, items could be organized by their type but still be easy to find. Additionally, Slack uses blue for their stars, but I believe that yellow would be better as yellow is mor standard. The difference between blue and green is also rather slight, and many users had trouble differentiating the two, even though the star is a different shape.

Option 1: Yellow Star in "Apps"
Apps as a collapsable section. "Starred" items at top with yellow star.
Option 2: Blue Star in "Apps"
Apps as a collapsable section. "Starred" items at top with blue star.
Option 3: "Starred" Section
Apps as a collapsable section. "Starred" items in their own section.

The Final Product

Overall User Flow

From home screen to Apps and back, below is a quick summary of the user flow!

Animated Prototype

Lastly, I used Principle to bring my final design to life.

Final Thoughts

What I Learned

This past month, I went to a couple of design workshops, and they all emphasized the importance of backing your design decisions thoroughly. A Facebook Portfolio Review I attended especially emphasized how important it is to pick a single design from a set of iterations, so I tried to exercise that here. This case study taught me to be a lot more confident in my own design decisions and intuition as well as incorporating user feedback and testing throughout the entire process.

Next Steps

I would like to explore how users could delete Apps from the home screen or if there is another entry point, besides the lightning bolt, that makes it easy for users to use Apps while in a chat. I would also like to explore how useful ratings would be for Apps. Though ratings can give useful information, sometimes, they aren't truly reflective of an app's potential, but this may be another way to get Slack users to further engage with their product.

Lastly, I would love to see how my product would actually affect business metrics, such as minutes spent on Slack or how many other companies would make the switch to use Slack as their main communication platform with the additional functionalities!