Quick Replies

We recently made a major improvement to our Bots platform, which I’ve called Quick Replies.

In Kik, we allow partners and brands to chat with users using Bots. These are essentially bots that pick up Keywords in a user’s message and respond with automated replies. Each bot can have a set of Keywords, which they communicate to users so they know what options are available to them.

The Problem

Bots send messages to our users, some of which contain keywords (shown in CAPITALS) to let the user know which options they can choose from. Users see these Keywords and type them in as a response. Of course this takes time and leaves room for error (user can type the words incorrectly, auto-correct can intervene and change the word, users may not understand what the Keywords are).

We want a way to make this process easier on users, while still providing them with a great chat experience. So we sought to change that.

Design Process

I started off by looking at how our current Keywords work (pretty basic as I explained above). Then I started looking at where and how we could display Quick Replies to users, and sketched out a few options, with Pros and Cons for each. Some alternatives were quickly rules out, and others were explored further.

I also looked at other apps to see what their solution was and tried to compare and contrast their approaches with what we wanted to do on our platform.

Placement Options

Next I mocked-up some of the alternatives for where the Quick Replies would go. There were several more options with some minor changes, but ultimately it came down to 3 options: above the Text Area, replacing the Keyboard, or inside the Text Area.

Between the tree, option 2 (replacing the Keyboard) was ruled out pretty quickly since it interfered with the core chat experience. It prevented users from sending their own message to the Bot and discouraged natural conversations. It also made the chat experience less personal and more mechanical. So even though it provided a lot more room and made a clear separation between the Replies and the sent bubbles, it was ultimately ruled out.

The other two options were on the table for quite a while and I kept going back and forth between them. What finally edged one ahead of the other was the implication of their placement. In option 1, the bubbles are in the main chat area (where send and received bubbles are), while in option 3, the bubbles are in the text area (where unsent content is). This distinction is quite important. Putting unsent items (the Suggested Responses bubbles) in the main chat area is quite confusing and breaks the paradigm. So option 3 was the way to go.

Bubble Options

As I was looking at and refining the placement of the Quick Replies, I was also working on how they would look and be presented to the user.

Requirements when designing the Quick Reply bubbles:

  • They must look like chat bubbles, but different from sent bubbles (so there is not confusion).
  • They must look clickable.
  • Must work for all bubble colours, and both Android and iOS.
  • If there is a long list of Replies, it must be clear that users can scroll.

For these options, I looked at both iOS and Android since they use different colours for the Text Area. Option 3 was the weakest. Even though technically it met the requirements, it wasn’t as exciting as the other options. The line style also made the bubbles too faded and so they didn’t stand out as much against the background. This was especially true for the lighter bubble colours that we have in Kik.

Between options 1 and 2, it really came down to the details. In option 2, having the tail made it clear that it was a bubble, but also made it look too much like a sent bubble (even though it was contained in the Text Area). In option 1, it was clear that the bubbles were clickable, but the opacity made them too faded. Ultimately, after prototyping both and trying them out, it was clear that the tail wasn’t needed. So option 1 was chosen.

Animations

[Coming Soon]. Animations were another major consideration and influenced a change in the animation for all chat messages sent in Kik. I’m putting together videos for the final animations, and other options we explored.

Final User Flow

The user starts a chat with a Bot, which sends the user a welcome message. This particular message has Quick Replies, which are displayed in all-caps in the incoming message, and as bubbles inside the text entry area. The user clicks on one of the option, and the message is sent.

If you look back at the initial set of screens, this seems like a very small design change, however seeing it in action and using it makes a huge impact on the user experience. The addition of Quick Replies helps users choose the options they are interested in quickly, while still engaging in an interesting, natural conversation with the Bots.


Want to see this in action? Download Kik and chat with one of our Bots :)