Overview

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.

My role

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.

Design leadership

• Led, mentored, and provided support for Designers to ensure the products we built were solving the right problems for our customers and business partners, and was of high quality
• Helped designers identify strengths and growth opportunities, as well as interest areas, and creating a plan for them to grow and excel in their role
• Supported, directed, and advocated for designers on my team, depending on what they needed (improving a skill, level-ing up to lead their own projects, etc.)
• Determined where each designer would fit the best within our team, based on their experience, strengths, and interests.
• Built trust and mutual respect with designers on my team through open conversations, individual and team activities, and making sure their voice was heard on the team
• We had one of the closest, most supportive teams in the company, and I'm still really close with several of the designers. I've continued mentoring and championing them with other job opportunities.

Product Design

• We had one of the closest, most supportive teams in the company, and I'm still really close with several of the designers. I've continued mentoring and championing a few with future job opportunities.
• Coached and provided feedback on your team’s performance, helping them to develop clear career development goals and action plans on how to
• Advocated for Android design improvements, especially with Material Design guidelines and innovations on the Android platform.
• Managed several products with a team that consisted of a Designer, Engineers, and Business leads
• Worked with various teams throughout the company (Engineering, QA, Business, Support) to make I was delivering high quality experiences that meets our customer's needs

Feature: Quick Replies

Background

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.

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.