Building richer app experiences with Block Kit

How Doodle reimagined their scheduling app on Slack

Netali Jakubovitz
Slack Platform Blog
4 min readFeb 21, 2019

--

Time for work

Coordinating meetings today has become a necessary evil. You know the cycle — brainstorming sessions, feedback, sign-offs, updates, etc. Regardless of location or timezone, it can be hard getting past the endless: “I can’t do Monday, are you available Wednesday, let’s try for Thursday?”

While meetings will always remain a part of our work lives, the time spent scheduling them doesn’t have to.

Doodle is here to fight the good fight

We’ve brought the Doodle model to Slack — where work happens. The marriage of Doodle’s solution, combined with Block Kit (the new Slack app UI framework), gave birth to Doodle Bot.

An example of Doodle Bot in action using Block Kit.

Doodle Bot allows you to create meetings inside Slack and even invite non-Slack users (yes, they exist). Doodle Bot translates the scheduling experience for web and mobile apps, syncing constantly with Slack.

A scheduling dream come true

Slack’s announcement of Block Kit, including the newly introduced datepicker (as part of the actions block), was especially exciting for Doodle — being a scheduling tool and all. We have been building on the original platform since the beginning. Block Kit provides a new way to define the layout of app messages with more flexibility and control.

Throughout the process of integrating Doodle into Slack, we maintained the app’s core values by tapping into Slack’s contextual awareness. We adopted Doodle’s key functionalities: meeting creation, time option suggestions, and selecting the best option based on participant votes. Then, with Block Kit Builder as our prototyping tool, we brought our vision to life.

Designing messages with the Block Kit Builder.

Increased UX flexibility allowed for smooth collaboration in development. For example, clicking a block on the left pane automatically stacks the JSON data on the right side. This intuitive process enabled us to improve design, while maintaining quality and usability.

Previously dense messages are now easily accessible. Inline actions (such as message buttons or menus) have created connections between information and call to action. What’s more, the context block is critical in providing addition metadata.

The image below shows the creation of a meeting with clear definitions of primary and secondary content. Visually cognitive design elements, like correlated information layout, ensures the message is clear and actionable.

The divider and context blocks enable clear scanning of priority content.

Additional use of the context block is (what we call) face piling. The profile images literally pile up, showing voter preferences at a quick glance.

Check out the facepile of users voting on a time option in a Doodle Bot poll.

Doodle Bot has your back

Keeping the user experience in mind, we decided to use only ephemeral messages in channels and DMs, with slash commands to communicate with the app. This method allows users to proactively trigger Doodle Bot interactions, which reduces permissions and increases protection of user privacy — ultimately driving higher user engagement and a more meaningful app experience.

Looking ahead

After the initial launch of Doodle Bot in early 2019, future features will allow the app to:

  • Provide automatic time suggestions for meetings based on everyone’s availability
  • Learn habits and preferences for meeting times and locations, such as avoiding early morning pre-caffeinated hours
  • Send out invitations directly to calendars from Slack

Even if meetings aren’t going to change much, at least the way we schedule them will. For 1:1 meetings or group events, our goal is to bring people together in a more collaborative and productive way. The focus of Doodle Bot is to give you back your time — less scheduling, more doing.

Now, there is one less time killer in your day.

Want to see it for yourself? Check out Doodle’s Block Kit-enabled app in the Slack App Directory at slack.com/apps.

--

--