<p>Published on <a href="http://ift.tt/2q92nSs">| Prototyping: From UX to Front End &mdash; Medium</a> Caroline Craddock <img alt="" src="http://ift.tt/2pcFYoj"></p>
<h3>The Bots Are Coming</h3>
<p>Artificial Intelligence and Virtual Assistants were once a concept in sci-fi movies. Now, in 2017 we have seen a rise in these as modern day technologies. In the last few years, they’ve really started to gather traction and begun to reveal the true power and benefits they can have for consumers.</p>
<p>Let’s go back in time, way before Chatbots ever existed. For centuries, philosophers and mathematicians had studied and expressed their ideas of what Artificial Intelligence could be.</p>
<p><a href="http://ift.tt/16SGpsU">In 1950, English Mathematician Alan Turing published a paper entitled “Computing Machinery and Intelligence” which opened the doors to the field that would be called AI.</a></p>
<blockquote><p><a href="http://ift.tt/16SGpsU">The paper itself began by posing the simple question, “Can machines think?”</a></p></blockquote>
<p>In more recent years, there have been a number of software and hardware companies embracing AI’s potential. Today, AI is no longer a concept destined for sci-fi movies. It has been predicted that AI and Chatbots are set to revolutionise the way in which we communicate with each other, with brands and with services.</p>
<p>At <a href="https://www.fbf8.com/">Facebook’s F8 event</a>, the social media giant officially announced that they are bringing Chatbots into group conversations. Before this, Chatbots were exclusively a 1:1 experience on Messenger. With this update, one participant in a group conversation will be able to add a Chatbot at a moment of need in a group conversation. Examples could be a food ordering Bot, a reservation booking Bot, a Travel suggestion Bot — the list is endless. It’s clear that Facebook’s latest Messenger update is all about enabling meaningful and useful conversations between people and businesses.</p>
<h3>Why Should We Build a Chatbot Builder?</h3>
<p>This is the direction our industry is going in. As I’ve stated in some of my previous posts — it can be challenging to keep up with trends and emerging technologies because technology moves so fast.</p>
<p>We don’t want to just play catch-up with what other companies are doing in our space. Instead, we treat technology advancements as inspiration for what we design and build next.</p>
<p>As a mobile marketing platform, we have built a range of products to allow marketers to send push notification campaigns to targeted groups of app users (<a href="http://ift.tt/2pd27ms">To show up at the right time</a>). Pulsate enables marketers to connect with their app users and build personal relationships when it comes to app engagement and user feedback.</p>
<p>Up until now, our focus was iOS and Android mobile apps. However, we couldn’t ignore the rapid growth of messaging apps, such as Whatsapp, Facebook Messenger, KiK, Snapchat, WeChat, etc. (Facebook Messenger, for example, is used by over <a href="http://ift.tt/2a8S3pl">1.2 billion people</a> every month and is growing faster than Facebook itself). With this pace not slowing down anytime soon, it’s obvious that brands and businesses don’t just need a mobile app anymore to build brand loyalty and user engagement, they need to be present where their customers are — and that’s on messaging apps.</p>
<blockquote><p><a href="http://ift.tt/2amvE61">“41% of Millennials say that they would be “truly satisfied” if they could use messaging or SMS to connect with companies and organizations where they do business.”</a></p></blockquote>
<p>If messaging apps are becoming the #1 way people communicate, then there is a strong need for marketers to engage with their customers on these messaging platforms. As a result, we decided to build two Chatbot solutions — one for iOS and Android mobile apps and one for Facebook Messenger.</p>
<h3>Where to Start?</h3>
<p>Rather than building a Chatbot platform from scratch, we wanted to build onto our already existing platform. We saw this update as an evolution of Pulsate, rather than a completely new direction.</p>
<p>It was important for us to stay true to Pulsate’s mission, enabling brands and businesses to show up at the right time for their consumers. Instead of building a Chatbot that puts the end user in complete control of the conversation’s direction (with the possibility of the Chatbot not being smart enough to respond appropriately and effectively), we chose to put the marketer in control of the direction of the conversation.</p>
<p><img alt="" src="http://ift.tt/2q0nbPD"></p>
<p>Some of today’s Chatbots allow the end user to type a message as a way of communicating with the Bot and this is something we’ll probably work on for a future update. But we must consider the complexities of language; the challenge of creating a Bot who responds successfully and efficiently to a user’s typed message. The Bot must be smart enough to interpret typos, incorrect grammar, variations of words and phrases, etc.</p>
<p>For the first version of our Chatbot Builder, we decided to focus on a solution that would allow marketers to build interactive Chatbot flows for their app users to interact with, made up of message bubbles, rich media elements, buttons and cards. Every outcome and path for the end user should be determined by the marketer, using our drag and drop style canvas to build each step of the interactive flow.</p>
<p><img alt="" src="http://ift.tt/2pcua5y"></p>
<h3>Our Solution — A Workflow Canvas</h3>
<p>Building a workflow is nothing new for marketers in their day-to-day routine. Popular marketing solutions such as HubSpot and MailChimp feature a workflow interface as a way of building out communications with end users. So using a platform like ours shouldn’t be a big challenge for marketers to undertake.</p>
<p>We strive to offer a friendly interface for every feature we design. Marketers who use our platform should not feel and intimidated and should be encouraged to introduce Pulsate into their marketing strategy. We want the value of using our product to be apparent for all users from day one.</p>
<blockquote><p>Having a positive first impression effectively increases the chance of a first-time user wanting to come back and use your product again. It shouldn’t feel like a chore.</p></blockquote>
<h3>Designing For Complexity</h3>
<p>It is up to the marketer to decide how basic or how complex they want a Chatbot flow to be. The challenge for us was to design an interface that would work well for both scenarios. Our interface needed to not overwhelm the marketer when the flow becomes complicated. Our intention was to allow the marketer to focus in on the active part of the flow that we did by creating the right amount of space between the different elements and also by highlighting all of the available configuration settings for only the active stage. This purpose of this aesthetic was to create a focussed state within a complicated flow that could be made up of multiple branches and conversation directions.</p>
<p><img alt="" src="http://ift.tt/2q0x5AU"></p>
<p>Viewing at this zoomed in level is helpful in terms of focussing on one stage at a time. However, when working on a complicated flow, the user needs to understand the context of where they are in relation to the rest of the flow.</p>
<p>This is why zoom controls were deemed necessary, as well as the ability to drag the hand cursor around the canvas to re-position the view. The user can quickly zoom out to review the workflow as a whole, with all of its content and flow directions.</p>
<p><img alt="" src="http://ift.tt/2pcO7sN">Zoom Controls<img alt="" src="http://ift.tt/2q0Fx3d">Zoomed out view to connect stages</p>
<h3>Goodbye Sidebar ?</h3>
<p>Previously, our campaign builder was made up of a sidebar to configure the content of a campaign and a device simulator to visualise what the campaign would look like to an end user. We put a lot of effort into these simulators, which displayed iOS 9, iOS 10, Android 6.0, Android 7.0 and Apple Watch views of the push notification campaign as it was being built.</p>
<p>For our Chatbot Builder, we decided to deviate from the sidebar/simulator combination and design an “edit in place” experience instead. The idea behind this was to display a “what you see is what you get” experience as you build the flow. Also, to reassure the marketer at any point of their Chatbot flow creation, they can hit the play button and interact with a simulator to test the flow in a real-time simulation</p>
<p><img alt="" src="http://ift.tt/2pcO7ZP">Chatbot Interactive Simulator</p>
<h3>Visual Styling</h3>
<p>Although Chatbots in Messenger inherit their style directly from Facebook, we had the opportunity to style the Chatbot experience for iOS and Android mobile apps. I wanted the aesthetic to be friendly and clean, fitting comfortably into apps without feeling like a foreign entity. In order to be a flexible Chatbot SDK solution, colors and fonts can be customized to match an app’s branding. However, we have determined the font sizes, margins and animations for the iOS and Android Chatbot SDK solutions.</p>
<h3>Inspired by Material Design</h3>
<p>I absolutely adore Android’s <a href="https://material.io/">Material Design</a> as a design language. Each interaction and animation have been so carefully crafted, creating the sense of a real, tactile experience when you interact with a Material Design interface. Each tap produces a playful response, navigating the user in a fun and imaginative way. I wanted to incorporate this design language into our Android SDK Chatbot experience, as well as allowing it to inspire the iOS SDK Chatbot experience.</p>
<blockquote><p>“The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.”</p></blockquote>
<p><img alt="" src="http://ift.tt/2q0k3Ug">Android ChatBot UI — Tapping a Button on a Card — Ripple Effect<img alt="" src="http://ift.tt/2pcO4ND">iOS Chatbot UI</p>
<p>To keep in line with this fun and playful nature, when each element enters the screen, it springs in with a slight bounce effect at the end, rather than a basic slide-in effect. We spent a lot of time iterating the duration, speed and size of these transition effects, so not to be too distracting but to add the right amount of playfulness to the experience.</p>
<p>We’ve also given a similar personality to the bottom buttons when they enter the screen. One by one, they spring in (On Android, using the Overshoot Interpolator animated effect).</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F214160072&amp;url=https%3A%2F%2Fvimeo.com%2F214160072&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F630564111_295x166.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=vimeo" width="404" height="720" frameborder="0"><a href="http://ift.tt/2q0k4Yk">http://ift.tt/2q0k4Yk</a></iframe></p>
<h3>The Future of Chatbots</h3>
<p>Some people might argue that Chatbots are going to replace marketers and their big marketing teams, but I don’t believe that’s what the future holds. I believe that the continued development of Chatbots will empower marketing teams with new ways to be more efficient with their time.</p>
<p>Allow Chatbots to take care of the repetitive, mundane marketing tasks, while exposing new customer insights. This will free up marketers’ time to focus on the tasks that require a human touch.</p>
<p><img alt="" src="http://ift.tt/2pcJyPl"><img src="http://ift.tt/2q0k5vm" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pcO8wR">Designing a User-Friendly Chatbot Builder</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing a User-Friendly Chatbot Builder

The Bots Are Coming

Top Stories