App modernization with Block Kit

MailClark’s Slack app upgrade, powered by blocks

The MailClark Team
Slack Platform Blog
3 min readMar 15, 2019

--

Connecting email and Slack since 2015

MailClark is as old as Slack’s App Directory — even a few months older. The first version of our mechanical clerk launched in 2015, convinced of the impending marriage between Slack and email, with MailClark as the perfect matchmaker.

The past four years proved us right. Today, over 5,000 teams rely on our bot with a mustache to manage email from the comfort of their Slack workspace. MailClark growth has been fueled by the continuous progress of the Slack Platform. Nothing illustrates this hand-in-hand evolution better than the latest developments around Block Kit — the Slack UI framework that’s powering our most important upgrade, MailClark 2.0, officially launched on Tuesday.

MailClark turns channels into an actionable inbox

Slack is where work happens, and channels are where teams collaborate. So naturally, there is no better place than a Slack channel to host a shared inbox. The new MailClark app lets you assign teammates to email, Facebook or Twitter conversations. A client sends an email about a website bug? Assign it to a developer. A blogger contacts your company on Facebook? Assign it to your PR colleague. Everything takes place in Slack — the internal discussion and the external reply — so that anybody on your team can seamlessly chime in.

To design MailClark 2.0, we transformed a Slack channel into a collaborative email experience. Channels are naturally great for triage but information must be kept both compact and structured to make conversations easy to scan. With Block Kit, this was easily achievable.

From attachments to blocks

Block Kit engineer, Michael Hahn, has a favorite block: the divider block — for its simplicity. We at MailClark also have a favorite block: the context block— because it solved one of our major design issues, namely how to summarize conversation details in a single line.

Email & social conversation details displayed with the context block.

The context block is a space to add helpful metadata or a contextual description. Handy alt text on images allows for tooltips. We use this block to display the conversation sender, the assignee, the status and the source. For instance, previously we were limited to writing Twitter instead of showing the logo.

The side-by-side comparison below says it all: information-rich messages, additive context, and quick scanning.

On the left, the MailClark app before Block Kit. On the right, the MailClark app using Block Kit.

Besides layout, can you spot the other differences?

  • Call to action in line with corresponding information
  • Actions, including overflow menus, declutter messages and open more possibilities to interact with users
  • Overall, MailClark got a facelift — regardless of Block Kit 😉

More to come, at our pace

If, like us, you’ve been building on Slack for a while, your app must have hundreds — maybe thousands — of messages, most of which use attachments. The prospect of having to migrate all those messages might seem daunting. But from our perspective, Block Kit is an opportunity to reimagine your app’s potential. What’s more, now is an excellent time to revisit some of your neglected messages and workflows that could benefit from a block redesign.

We’re planning to use the newly introduced datepicker for MailClark reminders

We expect that the Block Kit portfolio will continue to grow — and so will MailClark with canned responses and automation rules coming later this year. Block Kit gives us the building blocks we need to define the future of our app. Integrating email into Slack has never been easier.

Check out MailClark 2.0 in the Slack App Directory at slack.com/apps.

--

--

The MailClark Team
Slack Platform Blog

Developing a smart messaging assistant to manage collectively external messages (email, Gmail, O635, Facebook, Twitter) directly into Slack & Microsoft Teams.