Beautified onboarding with Block Kit

A look into the ongoing “block-ification” of Toast app on Slack

Rea is the Slack local community Chapter Leader for San Francisco. She is also a co-founder, engineer, and designer at Toast.

When we first built Toast, we had a beautiful vision of funneling all user interactions through Slack. We liked Slack’s philosophy of centralized communication and simple workflows. There’s immense value in streamlining day-to-day processes.

Toast is a Slack app that notifies on GitHub pull request activity. Like many other Slack apps, we not only integrate with Slack, but with other services, too. So how do we minimize potential back-and-forth during onboarding?

Building an onboarding workflow

At its core, Toast is a Slack app that integrates with GitHub. Since we don’t believe in spamming public channels, we need to know which Slack users to DM when something happens on GitHub. The app requires user mapping to be functional.

Our first approach was marrying slash commands and CLI. Below is the welcome message we send to a user who’s installed Toast to Slack and GitHub.

Even with the color differentiators, we weren’t seeing the clean simplicity we were looking for.

This message serves to answer one question: Which Slack user corresponds to which GitHub user? Sounds easy enough, but our philosophy is to make the experience as lightweight as possible.

Here’s the workflow we built:

Add GitHub username.

Invite teammates to send onboarding instructions.

DM sent via invite.

This workflow was user-friendly and intuitive. Onboarding was simple, straightforward, and productive without leaving Slack. But it still didn’t have the crisp feel we wanted.

Exploring Block Kit

With the release of Block Kit, I was inspired to redesign our app UI. The inline select menu was the perfect block for mapping users and removed the challenge of wrangling bulky UI.

Of course, we named our development app clone — Taste.

This took me less than 20 minutes to complete. I spent about 10 of those minutes rewriting copy. App UI became so clean, that I was inspired to rewrite short and snappy messages, to match this new look.

Testing app interactions in the Block Kit Builder

Much of my prototyping and message rewrites took place in the Block Kit Builder, selecting blocks and editing the code until it was just right.

The builder also houses customizable templates, pre-built common use cases for apps in Slack, so you have a simple place to start. You can view the template I started with below.

Try out this specific template here.

Let’s take a little tour of the builder and highlight the features I like most.

On the lefthand side, there are blocks that you can add to your work in progress preview.

On the righthand side, you can preview JSON. You can easily delete and duplicate blocks, too. From here, you can either copy the JSON, or hit the big green button in the bottom left corner to “Send to Slack,” previewing the message in-client.

Toast “block-ified”

Since it was easy to rebuild the first step in our app’s onboarding experience, I decided to keep going. Now that I had so much flexibility with blocks, I paused to consider new ways to complete this workflow. Below is the step-by-step outcome.

Ginger connects Toast to Slack and GitHub. Here is what Toast sends her:

Ginger is already mapped by default. She also maps Rea.

Ginger doesn’t know how to map the other members of her GitHub org. So she asks for help in #backend.

The mapping is sent to #backend, and a link to the channel is sent to Ginger for quick access.

Mapping teammates, with the help of teammates.

Did you catch that? As Rea updates the mappings, Ginger is able to view them in real-time. This leads to an improved user experience, allowing for faster onboarding.

Through creative use of the response_url we were able to make a collaborative web-app experience. Once finished, users still see the familiar reminder to get their Toast through /toast me. They’re able to click on a button to see Toast Sampler, a fancy way of showing our users all the different Toasts they can access.

Toast Sampler is also built with Block Kit. We used the divider block to segment different parts of the menu.

Minimized context switching

After visiting Toast’s homepage to connect Slack and GitHub, all remaining user interactions can then happen in Slack. So, with a little “block magic,” we’ve stayed true to our philosophy: using simple workflows to keep the user happily in Slack.

There’s still a use-case for our legacy onboarding flow. We retain this feature for larger workspaces or open source communities with thousands of collaborators. In these flows, it’s not feasible (nor realistic) to expect one person to onboard the whole org. For this, the self-serve nature of our legacy onboarding offers a much better experience, because the mapping is offloaded to individual contributors.

Looking ahead

I hope you’ve been inspired to start exploring the many ways Block Kit can improve your Slack app. I’m excited for what’s to come with future blocks and functionality, so we can do more!

Curious? Check out Toast’s freshly updated Block Kit-enabled app in the Slack App Directory at slack.com/apps.