Designing a Composer to Chat Bot
The challenge
The year 2015 was very challenging, I started working at Apontador, the Brazilian market leader company looking for local businesses. During this year the Apontador had a big challenge, launch new products that make a difference in the users life. During this phase we chose launch some MVPs (Minimum Viable Product) and do market testing, including a personal assistant chat called ResolveChat. We understood our users needs and we knew that the search for a local commerce was only the beginning of a long journey to solve a problem.
The whole process I will explain here was later to chat and the service is already running, we had an MVP, and features such as composer, bots, components and cards come to add more value to the product.
Unfortunately there have been changes in the course of the project and these examples that I will demonstrate are tests for a part of the product was not released, but will be used in other products yet to come. Anyway, I think that this case can help anyone who are working with chat design.
It's a bot time
The year of 2015 began with the announcement of major products such as Facebook Messenger saying it was creating a bot store and that would be the most important release from the App Store and WhatsApp was beginning to make testing for business accounts. We had already done several tests and understood that bots would be the next apps.
After the MVP, ResolveChat started growing number of users exponentially, and we needed to use bots to our advantage, and unlike a social chat, we were talking about a commerce chat, we needed to make bots were able to replace an existing initial care, it was where most of the users had simple questions and that were repeated in almost all calls, we wanted to use bots to decrease the average time of service. But it is not just at the beginning of the conversations that we would use the bots, as in a common chat e-commerce also needed to know at certain times on ways of payments and addresses of users, we wanted to use them in those moments too.
How was born the composer
The composer is a type of keyboard that the start a bot process, but even before creating a composer, I can say that our creative process was divided into two stages, requirements gathering and study of the chat frame.
Requirements
A large services integration will be added to the chat, and our challenge was as a way to show them that the integration would make sense and look natural within a chat environment.
Chat Structure
The next step was to think of what parts of the chat could work, what would be the space that these put up our brands and services, then divide the chat 3 frames, this is a common structure already used in other apps like Telegram or Messenger, the composer is one of those parts, where there is 90% of interactions usually happen.
Within the composer division have TOP Level Tabs, it was where we needed to create actions that would change the state of the bottom view and the composer as a whole.
We knew we had two actions that would be essential for the product, the Input Tag and Input Brand, these two actions is important for both our users and for business, was where most of the bot shopping flows would happen.
The Send location was also needed as there was a service behind chat and that was all the delivery process, in addition, some user could use the integrated chat services that require sending your location or other addresses.
We would need to also provide for sending photos, this was an existing feature in the chat, many users were using to send photos of products they did not know the names or models and need help the wizard to make a new purchase.
Thus we got the following features:
Input Text, Input Tag, Input Brand, Send Location and Open Camera.
Input Text
Although we are planning bots responses with shortcuts composer, it is virtually impossible to predict all cases, and as we are talking about a chat, we can not fail to have an option for users to freely type in what they are in need.
Input Tag
Tags within the composer be presented in different contexts, but contexts that would not be explicit to users, but result in stimuli, for example on dates like Valentine’s Day or days that many tickets for a show in your town are being purchased we put up our good as a possible option.
These tags also has another very important part of marketing campaigns made on facebook or even pushs in the application were made every day. In these campaigns, saying phrases to use specific words in the chat if that campaign was of interest. The tags help users do not need to decorate and write again in the chat what they read in the campaigns, they would be presented as the first of the list.
The role of the tag is so important that caused it to become the second most important item of the composer. He would become the second “keyboard” used by most users.
Input Brand
As I said in the survey requirements, a wide integration with brands was already being done, and here we would present a shelf marks and that would be presented in a context, as in the case of women, beauty product brands appear to be a relevant category for them.
Also, here we would begin to understand which tags you have used or that most used in the chat. We begin creating a historical and deliver what is most relevant.
Custom Picker and Components
In addition to the composer, we needed to create pickers that would be answers to some action generated in the chat, such as payment and address for deliveries.
At that stage the luka.ai was one of the benchmarks have really inspired us, they use amazing way pickers in the responses of their bots. Everything is very organized and well integrated into the chat.
In this phase also create templates of components that could be used in several cases, such as the form to add a new credit card, which then used as a template for a record component of new shipping address.
That's It
We created many other interactions throughout the process, but I believe these make more sense for those who are creating new products with bots. I hope I have contributed in your work process.
A really thanks to the Henrique Manetta Perticarati a great User Researcher and Interaction Designer helped me to create all these flows and Everaldo Coelho, Rafael Siqueira and Marcel Müller in support of all process.
