Elevating app UI with Block Kit
How Optimizely improved user experience for their Slack app
Optimizely has teamed up with Slack to launch a new app that will enable users of Optimizely’s Program Management tool to easily access their experiments and ideas, accelerate the testing development process, and foster iterative experimentation.
The ability to centralize information in Slack by connecting business critical tools, like Optimizely, is essential to productivity and time management. Bringing Optimizely into Slack enables users to easily engage with experiments and drive a culture of experimentation.
Nearly a year ago, Optimizely built a simple notifications app, allowing users to receive updates in Slack about their testing program — which required significant engineering support for user setup. Recently, with the release of Block Kit, a new UI framework for Slack apps, we were able to reimagine the Optimizely app to improve user experience.
Building better app messages
Block Kit gives app designers and developers flexibility and control over the order and appearance of app messages in Slack, allowing Optimizely to design more engaging apps and a cohesive, interactive user experience. Visuals are cleaner; graphics and images are more prominent; and interactive elements (such as datepicker or overflow menus) make it easy for users to take action.
The first version of our Slack app gives users the ability to subscribe to a Program Management Team’s activity feed, where they’ll receive updates on ideas and experiments. Before Block Kit, these messages were difficult to parse, and challenging to format — like the below.
Using the section with fields block, we are able to structure messages in a clean, easy-to-read way. Here is what these messages look like using Block Kit.
How did we use Block Kit?
Here are a few highlights.
Section + Actions
By themselves, these blocks are similar to message attachments (or secondary content). But when using them together, secondary content no longer feel like an add-on; you define the information hierarchy, so the content actually is the message.
Also, the order of information no longer requires a hacky workaround. Multiple text sections? You can do it. Distinct blocks for a message header, content and footer? It’s cleaner.
For notifications, we use an additional section block to further separate distinct information. With Block Kit, it’s less effort to write cleaner code that more clearly defines these messages.
Section with a select accessory
Before Block Kit, it was challenging (and resource intensive) to display an initial static option for select menus. With Block Kit, we can now choose an initial_option — saving the end user a few clicks and reducing friction on things like creating new ideas in Program Management.
Context
Before Block Kit, we could define the footer icon, text and timestamp only; and Slack formatted everything for us. With Block Kit, we have more flexibility and control over order and layout of content, especially through the context block. This opened up the opportunity to add incremental metadata information — like idea creation date in the footer’s timestamp, or helpful user guidance on how to create an idea.
Overall, Block Kit has enabled Optimizely to build apps on Slack in a more customizable way, saving development resources while enhancing user experience.
We are constantly looking for ways to improve our product, and this is just the beginning of Optimizely’s collaboration with Slack. Over the next few months, we’ll be adding more features to our Slack app to ensure critical information is easily discoverable and actionable for our users.
Try it today
If you already use our Program Management tool, you can add Optimizely to Slack today. If you aren’t yet a Program Management user, get a behind-the-scenes look into how Optimizely applies Program Management internally in this webinar.
You can also check out Optimizely’s Block Kit-enabled app in the Slack App Directory at slack.com/apps.
