The Expected (and Unexpected) Benefits of Building with Block Kit

This post was written for the Slack Platform Blog. Read the original entry here.

Guru’s Slack integration started in the early days of bots, where the experience was mostly text-based, and has grown in functionality as Slack has introduced more features — like interactive messages and app actions. We immediately saw the benefits of Block Kit, an opportunity to build the deep, rich experiences that our users have come to expect, with more familiar UI/UX patterns and interactive content. What we weren’t expecting, however, was how Block Kit would change the way our development and design teams collaborate.

Building a better onboarding experience

We first applied Block Kit to revamping the help menu of our app. Previously, when a user was getting started, the help menu would greet them with a wall of informational text. Not only was this text tough to scan, but required a user to type commands to accomplish anything. App onboarding is critical for our users, and we used Block Kit to completely reimagine the experience — in two key ways:

• Through the use of dividers, we stylized that wall of informational text by grouping similar content — making it more digestible and easier to read.
• Inline buttons and overflow menus enabled an interactive, action-oriented onboarding experience. Now users don’t need to type key commands; they can simply select button and take action quickly.

The help menu was only one place where Block Kit elevates the Guru app experience. Inline buttons in the activity feed interface bring the call to action closer to corresponding information. Overflow menus now hide actions that are less frequently used, and help the user focus on priority information. We’ve only scratched the surface — there are still countless ways Block Kit can make apps more interactive.

Speaking the same language

At Guru, building consistent experiences across all interfaces (web application, browser extension and Slack app) can be challenging. While design and development work tirelessly to ensure seamless experiences for our users, it’s a collaborative process with tons of back-and-forth. Previously, our design team (generally not accustom to building on Slack) began with a blank canvas and inevitably ran into technical limitations — especially as their designs transitioned to development, requiring many iterations before landing on a final design.

However inefficient, this process is one most developers are familiar with. While we expected to build richer, more interactive experiences using Block Kit, we didn’t anticipate just how much the Block Kit Builder would transform the partnership between design and development. The Block Kit Builder is a visual prototyping sandbox that allows you to select, stack and customize any available block.

For Guru, the Block Kit Builder bridges the design and engineering gap — enabling our designers to easily prototype their ideal user experience, while also producing the exact JSON needed for development to implement their vision. Our design team no longer needs to start from a blank slate, asking: Where can I put this button? or What text do I use? Now it’s as easy as creating the layout, sharing the URL, then iterating back-and-forth.

The Block Kit Builder also serves as a tool for development to debug troublesome JSON. If an app message isn’t rendering correctly, we simply paste the code into the builder and can instantly identify the problem.

Efficiency at its finest

The combination of Block Kit and the Block Kit Builder has resulted in a more efficient experience for both app users and the Guru team. Block Kit not only provides us with a new framework for building unique app UI, but also gives us the flexibility and control over the order and layout of information. Now it’s easier than ever to use the Guru app; plus the updated help menu gets users up and running in a snap.

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