I am sure you must have heard the new buzz phrase in the design community- how to design conversational interfaces. It has brought a fresh wave in digital product design. Although, it’s been quite many years that conversational commerce arrived in the market. But after companies like Facebook, Google, Microsoft, many others have taken the plunge and are desperate to show that their programs can convincingly respond as humans would.
However, not everyone cares about the user experience of their Chatbots. Because well, who cares about bots! Err…Robots! I mean they are just programs, right? They do not have a personality of their own.
Your end user is a human. And, let’s face it, humans are judgmental. They have different motivations. They look for an emotional bond everywhere. So it’s important to make a first good impression. The look and feel of a chatbot application are important. And for that, you need to give a personality to your bot.
That reminds me, I have an interesting quote to share. It says-
‘Over an increasing period of time, computer-driven bots will become more human-feeling, to the point where the user can’t detect the difference, and will interact with either human agent or computer bot in roughly the same interaction paradigm.’- Chris Messina
Why am I talking about it?
Meet Chatterbot, the reason behind my mumbling. The Chatterbot is our AI friend whom we integrated with Skype (and ZOHO). Chatterbot helps us with one of the most difficult tasks of our life- collecting feedback.
I would not go into the programming details (because I know nothing about that domain). But I am here to share my experience as a character designer of Chatterbot.
A few months back we decided to make a landing page for Chatterbot. I was given the task of designing a character which would serve as its identity. The idea of creating a character for a bot was exciting and I certainly didn’t want to slack it off just because it was an in-house project.
Fast forward to present day, we have a friendly face who greets us, checks upon our completed training and collects feedback, fetch us important information from ZOHO, and oh! tells us good jokes. 😍 Seriously! Chatterbot does all of that. And that too without throwing any tantrums or tightening brows.
So, first thing first. Why do we even need a character? That too for some bot. Why so much effort?
Here’s my answer to that- Siri and Cortana. Both of them have a unique personality. They do not have a face, but they have a name. And that gives them a human connection.
A more personal example would be- you know how people judge you when you do not have a Facebook or Whatsapp DP (display picture). They assume that you are either sad, depressed or lonely. Truth be told, it is annoying and boring to talk to someone without a face.
Well, that’s pretty much the same reason for designing a character for the Chatterbot.
To give it an identity; a face with which we can recognize it and which makes the user experience human-ish. To deliver a more satisfying user experience.
After we were clear on this, I moved on to the next step.
What kind of a character are we looking for?
Google “Tips on character Design” and you will get hundreds of results. That’s the first mistake that you should avoid. Before asking Google, ask yourself- what kind of character you want to design? And, why?
Ideally, a character must be simple, relevant to your business, unique and must not have too many elements on it. Basically, it should be recognizable or atleast remind the user that he/she has seen it before.
To make the character recognizable, it is important that it strikes a chord with the user immediately. For this, I decided to use cool and light tone something that makes interaction with users fun and memorable.
With these two major decisions, I started experimenting with icons and avatars. The whole process was fun and challenging and I finally narrowed down to these five choices. I am sharing my thought process along with the reason why we rejected them (and accepted the one that we finalized)-
The mascot with a cape
While I was designing this one, I wanted it to look like a friendly Mascot with whom chatting is fun and easy. I made two color choices for this one- one using the gradient of blue-green and the other using the gradient of yellow-orange. I gave him a cape as well. But I guess it backfired. Along with the bobble-head eyes, it backfired pretty quickly. 😐
The feedback that I received for this one was-
“He looks like a superhero alien”
“What is he? An alien doctor/nurse?”
“This cape doesn’t fit with the bot image.”
“What’s with the antenna head?”
Everyone liked the blue-green gradient and said that the color choice is great but the cape came out as a kiddish element. I laughed at it and agreed with their opinion later.
The one eye bot character
This particular character was my second favorite option. Majorly, because of the colors that came out in this one. The character was aesthetically very pleasing to look at. And in addition to that, it went amazingly well with the “chat” and “bot” keywords that I had picked.
Infact the feedback that I received for this one reverberated my thoughts. “Very cool and interesting blast of colors”, one of my teammates said. *blush* 😄
But when we started analyzing it critically, the feedback turned out to be negative. Well, not extremely negative; but critical.
Some of the designers said that it looks angry (probably because of the one eye). Later, when I looked at it, I felt the same thing. I wanted to give it one more shot but almost instantaneously one more idea was throbbing in my head. So, I left it here and moved on to the next one. (I still feel this is the best color combination I ever made and this could have been THE character had I worked on it earnestly)
BTW, I have to tell you something very important. I never thought I would pay heed to this suggestion. But it really works. One of my teammate, Sonal, wrote a blog about Why every designer needs to discover the nature and she constantly pestered me to adopt this method in my designs.
One day I finally decided to pay heed to her suggestion and I am not surprised with the results! I picked these colors from the natural palette that I created with my photographs.
So here are my two cents- If you ever feel stuck, nature is the best source to draw inspiration. Go back to your picture library and use the ColourPicker plugin for Chrome to pick up the colors from your photos and it’ll give you hex code you need. Go for it and thank me later!
The cute bot character
If I had a choice, I would choose this as Chatterbot’s face. Not that I despise the current one, but this one is still my favorite. Moving on from the previous choice was tough. But thank god I have a flexible mindset.
While we were voting for the final character, we fought between this one and the final choice. Everyone in our team liked it because it was different. It offered a fresh feel to bot character and was very distinct from what you would often see in other apps/chatbot icons.
However, keeping our emotions aside, we pulled out our checklist and figured out that it will be difficult for users to relate to this image as a bot. It was adorable, unique, but somehow it didn’t gel with the image of an AI-powered chatbot.
The not-so-iconic character
I have no clue what made me design this. Clearly, I was not in my best state of mind. Nevertheless, it made our decision easier to reject it in one go.
Okay, now I remember what happened. I was procrastinating. I was dreading and whining because my previous idea had just got thrashed. I was waiting for them to come back to me and say “I think you are right. Let’s go ahead with your last option”. 🙌
I’m kidding! 😛
Everyone agreed that it quite didn’t look like a mascot. It looked like just a chat icon with some antenna heads. Overused. Nothing iconic, nothing special. Even the color scheme had hit the rock bottom here.
The chatty bot (Final character)
Do you remember the experience when you go out for shopping? You are strolling through hundred of clothes/accessories and then suddenly your eyes settle on something and the next thing you know you’re buying that item.
It was the same with this design. Almost unanimously, the moment we set eyes on this one we knew we have found a perfect match! I think it was an eclectic mix of improvements that everyone suggested in the previous ones.
And voila! We finalized this character as our Chatterbot’s face. It fitted well with our color choices and one could easily relate that this character conveys something about a bot (a conversational bot).
While the process of ideating, designing and finalizing the character was long, I personally enjoyed it very much. Especially the part where I had to keep it the experience human but the character is “not really human”.
There is this fuzzy gray area that character bots like Chatterbots are going through. Everyone knows that they are built from machine code. But the part where we are trying to make human interaction more enjoyable is where the magic happens. ❤ 😍
Also, the feedback sessions were really helpful. It was almost like hearing my inner voices and doing “one more iteration”.
Which character did you like the most?