Increasing core action completion by 45%

How user feedback helped Obie level up with pageable Slack message attachments

About 2 years ago, the team at Obie.ai set out to build a solution that would connect all of your team knowledge into one place. The not-so-obvious first step was to integrate with Slack. See, we learnt from building a failed product — one that forced customers to adopt yet another tool and yet another destination to find knowledge. Millions of users leverage Slack to communicate and collaborate with their colleagues every single day, so what better than to bring our product experience into that workspace?

Building any startup is difficult, let alone one that is built on Slack. Slack is an amazing platform to build on top of, but quite frankly, it was uncharted territory a few years ago. There weren’t necessarily blog posts or experts sharing best practices. Over time, we’ve learnt so much about building a company on top of Slack. At Obie.ai, we believe rising tides raise all ships, so we try and share our journey when we get the opportunity in hopes it helps others.

How Obie works

Obie generally works like this: you install the Slack bot, connect one or more of the many supported integrations like Google Drive, Dropbox, Confluence, or Jira, and then ask Obie questions as needed. For example: “What is the guest wifi password?”, “How do I reset a customer password?”, or by just the keywords like “guest wifi” or “reset password”. Obie will go out to those massive repositories of information and filter through the results, bringing back only the results he deems appropriate. Users are able to influence his appropriateness algorithm by giving a “thumbs up” or “thumbs down” to indicate a result was what they were looking for (or not).

Something we discovered early on was the complexity of a new design pattern: conversational design. We found that our users were not ready to talk to a bot like they would a human. Slack was also going through these hurdles and began introducing buttons and dialogs to assist everyone and make the experience feel a little familiar, i.e. clicking actions with the mouse instead of typing out those actions.

Some challenges arise

At first, we showed the top 5 results. This led to a few problems though. The first was that there was a chance that the knowledge you’re looking for isn’t in the top 5, leading to frustration and, given repeat occurrences, limited user activation.

The second problem was that the standard screen size would cut off part of the message Obie sent. The first result (and top-rated for accuracy) would be cut off, which meant users often missed that knowledge and were frustrated, thinking Obie had performed poorly.

Oh no! The first result is missing and it’s the best!

Continued iterations

To solve the second problem, we cut down the result set to 4 results.

That’s better

This solution worked, but one issue remained: what if the answer you want isn’t in the top 4 results? C’mon, Obie — you better step up! In reality, we brainstormed and banged our heads against the wall until we realized that we could borrow some learnings from other popular search experiences, like Google for example, who use paging to show a high volume of results.

Meet “the carousel”

So we set off to make a paging system for Obie’s results, which we dubbed “the carousel”. With Slack’s ability to update existing messages via the API, and a couple of buttons, we were able to develop it quickly.

In terms of technical implementation, at a high level, the carousel works like this:

The carousel resonates with users

Once we had developed the carousel, it gave us the freedom to display an infinite number of results. After playing around with the numbers, we decided to cap the total number of results to 12 (4 per page). With the limited overall real estate we have in Slack, we don’t want to overwhelm users. Also, we assume that if Obie hasn’t delivered a desired result within the first 12 options, it’s likely that the resource a user is looking for isn’t within Obie’s scope.

After we got out all of the initial kinks, we introduced the carousel to our users. The initial response was great. We received both qualitative and quantitative feedback regarding the carousel specifically and how it was minimally invasive yet still handled the outliers because users could scroll (if needed) to find their desired result.

Total “core actions” completed weekly increased at a much higher rate. Average “core actions” per user also increased in this period. No other major experiments were running at the time.

Results clicked and results “upvoted” increased after deploying the carousel. Blue = link click, green = upvote

Another iteration

After the carousel launched, we were meeting with one of our wonderful clients, Podium, who are leveraging Obie to enable their customer support team with better access to product information and help articles. During the meeting, one of the support specialists showed us an example where Obie hadn’t returned their desired result — no good. After taking a deeper look at the example, the result was on the second page! This user had no idea the carousel existed despite using Obie for months.

By simply talking to our users we realized that the ⟶ arrow was not descriptive enough to communicate there was “more here”. We decided to include “next” as well as the addition of being able to page “back”.

Introducing a “back” arrow as well as clearer copy in the carousel increased overall usage. Orange = paging, green = next, blue = back

After making these small, but important changes to the user experience we saw carousel activity more than doubled!

The finished product

Final Words

Since its initial release, we’ve re-used the carousel design in many features and experiments. One example of re-using this user experience is for our “content verification” feature, where Obie will message content owners with a list of knowledge that is out of date that is easily viewable using the carousel. Another example of how versatile this design has been for us is our Jira Service Desk integration that allows users to create detailed Service Desk tickets without having to leave Slack.

By sharing all of this we hope others can leverage some of our learnings to make their Slack applications better! And if you come across the need for displaying a lot of Slack message attachments that should be pageable, the carousel architecture and design is definitely for you. In the meantime, feel free to hit us up if you have any questions, or you’d just like to say hey! founders@obie.ai


Learn all the ins and outs of app development — join Slack at Frontiers this April. Have a question before then? Send us a tweet or drop us a note at feedback@slack.com