{"id":74111,"date":"2020-09-24T09:30:24","date_gmt":"2020-09-24T06:30:24","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism\/"},"modified":"2020-09-24T09:30:24","modified_gmt":"2020-09-24T06:30:24","slug":"meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism\/","title":{"rendered":"#Meet the designer that made a chatbot to flag workplace racism"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a23a06202a88\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a23a06202a88\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism\/#Adding_custom_payloads\" >Adding custom payloads<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism\/#Post-release_and_improving_conversational_AI\" >Post-release and improving conversational AI<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#Meet the designer that made a chatbot to flag workplace racism<\/strong>&#8221;<\/p>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/watch-movies-tv-seriess\/\" data-internallinksmanager029f6b8e52c=\"8\" title=\"Watch Movies &amp; TV Series\" target=\"_blank\" rel=\"noopener\">watch Movies<\/a> or TV series visit the <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/dizi.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dizi.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<div>\n<p id=\"573d\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz fj ed\" data-selectable-paragraph=\"\">I detailed the user flow and visually m<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ed out the dialog, which helped me mark exit and entry points as well as guide the conversation with suggestion chips so that the recruiter would have a better idea of the type of questions they can ask me. I had other questions listed in my spreadsheet that I didn\u2019t put into any suggestion chips so that it didn\u2019t seem like the chatbot was dependent on them.<\/p>\n<figure class=\"ja jb jc jd je jf fd fe paragraph-image\">\n<div class=\"jy jz ee ka aj\">\n<div class=\"fd fe lg\">\n<div class=\"jg s ee er\">\n<div class=\"lh ji s\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"dn yp t u v cy aj c lazy\" alt=\"Image for post\" width=\"1223\" height=\"1360\" src=\"https:\/\/miro.medium.com\/max\/2446\/1*lZ-BCV-6K8KhBmny1lNEig.jpeg\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/09\/24\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F09%2F24%2Fmeet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Main user flow\" data-title=\"Share Main user flow on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Main user flow on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Main user flow<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"08e9\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz fj ed\" data-selectable-paragraph=\"\">DialogFlow is simple to work and there\u2019s a ton of free tutorials and documentation out there. Here are the basics, as well as some tips I picked up along the way:<\/p>\n<ol class=\"\">\n<li id=\"0dcc\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz li lj lk ed\" data-selectable-paragraph=\"\"><strong>To begin, create an agent.<\/strong><\/li>\n<li id=\"d141\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>Start making your intents<\/strong>, which is each step of what the chatbot will respond to. You should definitely name each intent to stay organized and structured.<\/li>\n<li id=\"b1db\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>Add in training phrases<\/strong>, which are expressions that you expect the user to say. Avoid putting in one-word phrases that could be easily confused with something else you\u2019re going to need them to say on a different intent, i.e. don\u2019t just write \u201cwhy,\u201d be specific and write out the full phrase \u201cwhy do you want to work here\u201d as well as some iterations of the phrase. These training phrases are important because it\u2019s what makes the bot smarter, and the more interactions you get with your chatbot, the more it\u2019s able to recognize and connect phrases together.<\/li>\n<li id=\"256a\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>You can use Entities to define synonyms of certain words<\/strong> and reference options. If you use this, be sure to add your entity to your action and parameters. This will allow your bot to reference user input.<\/li>\n<li id=\"64c9\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>You can write out your custom responses.<\/strong> Each text response can have variants, or you can have multiple text responses at once. Make sure you\u2019re simulating a friendly, human agent-like experience for your users \u2014 they know it\u2019s a chatbot, but it\u2019s nice to make it feel like they\u2019re actually talking to you. Plus, it\u2019s a great way to let your personality shine and stand out to recruiters!<\/li>\n<li id=\"eac0\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>Follow-up intents are a great way to make the bot more interactive.<\/strong> That is, setting up an intent to anticipate a yes or no response and putting out a custom response to handle the input without disrupting the flow by interpreting their response as a different phrase. I used these nested intents in my filters to make sure the recruiters would only have access to my answers if they answered that Black lives matter.<\/li>\n<li id=\"2fda\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>On the right side of the DialogFlow interface, there\u2019s an agent test<\/strong>. You can use this to type out a user expression and confirm that the agent is acting the way you want it. I tested my interactions after saving every intent.<\/li>\n<li id=\"f8e6\" class=\"ic id fr ie b if ll ih ii ij lm il im in ln ip iq ir lo it iu iv lp ix iy iz li lj lk ed\" data-selectable-paragraph=\"\">\n<strong>When you\u2019re satisfied, you can deploy your bot under the Integrations section.<\/strong> In your embed code, you can edit the HTML and CSS customizations to change its colors to match your own website and add a profile picture for your bot.<\/li>\n<\/ol>\n<h2 id=\"7c8b\" class=\"km kn fr ce ea ko kp ih kq kr il ks kt ip ku kv it kw kx ix ky ed\" data-selectable-paragraph=\"\"><span class=\"ez-toc-section\" id=\"Adding_custom_payloads\"><\/span>Adding custom payloads<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p id=\"c4fd\" class=\"ic id fr ie b if kz ih ii ij la il im in lb ip iq ir lc it iu iv ld ix iy iz fj ed\" data-selectable-paragraph=\"\">I didn\u2019t want my bot to only have basic text responses, and I also wanted to implement special features like suggestion chips, links, etc. It requires a tiny bit of reading and understanding basic code, but DialogFlow\u2019s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" class=\"cl hp jj jk jl jm\" href=\"https:\/\/cloud.google.com\/dialogflow\/es\/docs\/reference\/rest\/v2\/projects\">documentation<\/a> lists rich response messages, which lets your bot respond with links, images, suggestion chips, accordion text, lists, buttons, info cards, etc. Simply add the code under \u201cCustom Payloads\u201d under \u201cAdd new text response.\u201d<\/p>\n<figure class=\"ja jb jc jd je jf fd fe paragraph-image\">\n<div class=\"jy jz ee ka aj\">\n<div class=\"fd fe lq\">\n<div class=\"jg s ee er\">\n<div class=\"lr ji s\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"dn yp t u v cy aj c lazy\" alt=\"Image for post\" width=\"1328\" height=\"944\" src=\"https:\/\/miro.medium.com\/max\/2656\/1*mszBcI4nWVit7-le6FZYNg.png\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/09\/24\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F09%2F24%2Fmeet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Suggestion chips response\" data-title=\"Share Suggestion chips response on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Suggestion chips response on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Suggestion chips response<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<figure class=\"ja jb jc jd je jf fd fe paragraph-image\">\n<div class=\"jy jz ee ka aj\">\n<div class=\"fd fe ls\">\n<div class=\"jg s ee er\">\n<div class=\"lt ji s\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"dn yp t u v cy aj c lazy\" alt=\"Image for post\" width=\"1454\" height=\"1272\" src=\"https:\/\/miro.medium.com\/max\/2908\/1*Nl1J4IM3vC08NDJwG7dkLg.png\" data-lazy=\"true\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/09\/24\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F09%2F24%2Fmeet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Accordion text response\" data-title=\"Share Accordion text response on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Accordion text response on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Accordion text response<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<h2 id=\"0039\" class=\"km kn fr ce ea ko kp ih kq kr il ks kt ip ku kv it kw kx ix ky ed\" data-selectable-paragraph=\"\"><span class=\"ez-toc-section\" id=\"Post-release_and_improving_conversational_AI\"><\/span><strong class=\"ax\">Post-release and improving conversational AI<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p id=\"74ce\" class=\"ic id fr ie b if kz ih ii ij la il im in lb ip iq ir lc it iu iv ld ix iy iz fj ed\" data-selectable-paragraph=\"\">After my bot went public and I tweeted about it, I got an overwhelming number of user interactions. In DialogFlow, I can see the history of everyone\u2019s interactions as well as any flagged unmatched requests (essentially, where the bot failed to interpret the user\u2019s response). This is where I could learn more about what users were asking my bot that I didn\u2019t anticipate, such as \u201cwhere are you based?\u201d and \u201csalary requirements.\u201d From looking through these interactions, I knew what other intents I needed to integrate into my bot in order to make it more effectively conversational.<\/p>\n<p id=\"70c4\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz fj ed\" data-selectable-paragraph=\"\">Unfortunately, because of the controversial nature of the bot and the popularity of the tweet, I also got a ton of all lives matter people on my website leaving me hateful comments.<\/p>\n<p id=\"1c06\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz fj ed\" data-selectable-paragraph=\"\">I wanted to make sure that the trolls still got a proper interaction with my bot rather than just the fallback intents. So, I got my bot to out-troll the trolls with some resources that would hopefully provide clarity on the subject.<\/p>\n<figure class=\"ja jb jc jd je jf fd fe paragraph-image\">\n<div class=\"fd fe lu\">\n<div class=\"jg s ee er\">\n<div class=\"lv ji s\">\n<figure class=\"post-image post-mediaBleed aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"dn yp t u v cy aj c lazy\" sizes=\"auto, 642px\" alt=\"Image for post\" width=\"642\" height=\"990\" src=\"https:\/\/miro.medium.com\/max\/1284\/1*EXM41zDWC9zbWj3TDTf8Jg.png\" data-lazy=\"true\" srcset=\"https:\/\/miro.medium.com\/max\/552\/1*EXM41zDWC9zbWj3TDTf8Jg.png 276w, https:\/\/miro.medium.com\/max\/1104\/1*EXM41zDWC9zbWj3TDTf8Jg.png 552w, https:\/\/miro.medium.com\/max\/1280\/1*EXM41zDWC9zbWj3TDTf8Jg.png 640w, https:\/\/miro.medium.com\/max\/1284\/1*EXM41zDWC9zbWj3TDTf8Jg.png 642w\"\/><figcaption><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/09\/24\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication\/#\" data-url=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fthenextweb.com%2Fsyndication%2F2020%2F09%2F24%2Fmeet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication%2F&amp;via=thenextweb&amp;related=thenextweb&amp;text=Check out this picture on: Educational resources response\" data-title=\"Share Educational resources response on Twitter\" data-width=\"685\" data-height=\"500\" class=\"post-image-share popitup\" title=\"Share Educational resources response on Twitter\"><i class=\"icon icon--inline icon--twitter--dark\"\/><\/a>Educational resources response<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"6074\" class=\"ic id fr ie b if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz fj ed\" data-selectable-paragraph=\"\">The bright side is that, thanks to NLP, the more the user interacts with the bot, the smarter it gets. That means that the more that trolls sent death threats and mean comments to my bot, the more it could recognize these hateful phrases and respond with some resources where the user can educate themselves about the BLM movement. Kill em\u2019 with kindness.<\/p>\n<\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><strong>if you want to watch Movies or Tv Shows go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/dizi.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dizi.BuradaBiliyorum.Com<\/a> <\/span> for forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/09\/24\/meet-the-designer-that-made-a-chatbot-to-flag-workplace-racism-syndication\/\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Meet the designer that made a chatbot to flag workplace racism&#8221; If you want to watch Movies or TV series visit the Dizi.BuradaBiliyorum.Com I detailed the user flow and visually mapped out the dialog, which helped me mark exit and entry points as well as guide the conversation with suggestion chips so that the recruiter&#8230;<\/p>\n","protected":false},"author":1,"featured_media":74112,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/09\/rosie-maharjan-gq.png&signature=4365db6edf0c52b5689d4bca8857c6fc","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[1471,72435,72437,72438,72436,70759,71820],"class_list":["post-74111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-black-lives-matter","tag-chatbot","tag-internet-bot","tag-organizational-culture","tag-recruitment","tag-tech","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/74111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=74111"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/74111\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/74112"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=74111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=74111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=74111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}