Kik was a chat platform that was focused on providing the best communication experience. Kik also had a built in web experience, and we were innovating the way full mobile experiences could be built and delivered through chat. This included web experiences accessible right in the chat, bots, and much more. I was heavily involved with a lot of new and experimental features across the product, and leading our design team.
During my time at Kik, I took on a lot of responsibilities. A lot of these were from identifying a need within the Design team, or the company as a whole, and working with different teams to develop a solution that helped us work better and quicker, while delivering high quality products.
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
We recently made a major improvement to our Bots platform, which I’ve called Quick Replies.
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.
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.
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.
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:
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.
[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.
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.