{"componentChunkName":"component---src-templates-articles-template-js","path":"/projects/comp4461-project2","result":{"data":{"mdx":{"frontmatter":{"slug":"/projects/comp4461-project2","title":"COMP4461 Project 2","subtitle":"Course Finder Chatbot \"OTO\"","date":"June 10, 2022"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"/projects/comp4461-project2\",\n  \"date\": \"2022-06-10T00:00:00.000Z\",\n  \"title\": \"COMP4461 Project 2\",\n  \"subtitle\": \"Course Finder Chatbot \\\"OTO\\\"\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"link\", {\n    rel: \"stylesheet\",\n    type: \"text/css\",\n    charSet: \"UTF-8\",\n    href: \"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css\"\n  }), mdx(\"link\", {\n    rel: \"stylesheet\",\n    type: \"text/css\",\n    href: \"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css\"\n  }), mdx(\"h1\", null, \"Project Description\"), mdx(\"p\", null, \"In today's hyper-connected world, learning something new has never been easier. This seemingly endless list of resources, however, might overwhelm beginners from trying in the first place. We aim to simplify this process by introducing OTO, a chatbot that can find the courses they need in an interactive way.\"), mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"div\", {\n    className: \"column is-6\"\n  }, mdx(\"img\", {\n    src: \"https://images.unsplash.com/photo-1588912914078-2fe5224fd8b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80\",\n    className: \"is-9by16\"\n  }), \" \", mdx(\"i\", null, mdx(\"p\", {\n    className: \"subtitle has-text-centered\"\n  }, \"Illustration: One example of an online learning platform \", mdx(\"br\", null), \" By \", mdx(\"a\", {\n    href: \"https://unsplash.com\"\n  }, \"Unsplash\"))), \" \"), \" \"), mdx(\"h1\", null, \"Empathize\"), mdx(\"p\", null, \"In the beginning stage of the project, we first want to find out what kind of target demographics that potentially need solutions to their problems.\"), mdx(\"br\", null), mdx(\"br\", null), mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"div\", {\n    className: \"column is-8 is-12-mobile\"\n  }, mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"iframe\", {\n    className: \"column card is-11 is-12-mobile\",\n    style: {\n      minHeight: '400px'\n    },\n    src: \"https://docs.google.com/document/d/e/2PACX-1vRFubaFUDM1k0XKSOyDu8dhpV9xicjGU4pdVrQ7gZj5urSMUpEZ1CGQ-4frlF5URnDuJgaOHKWCm2hI/pub?embedded=true\"\n  })), mdx(\"hr\", null), mdx(\"div\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Result of brainstorming session (Embedded from Google Docs)\")))), mdx(\"br\", null), mdx(\"br\", null), mdx(\"br\", null), mdx(\"br\", null), mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"div\", {\n    className: \"column is-8 is-12-mobile\"\n  }, mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"iframe\", {\n    className: \"column card is-11 is-12-mobile\",\n    style: {\n      minHeight: '400px'\n    },\n    src: \"https://docs.google.com/document/d/e/2PACX-1vTkrhmqDaIdbGTZPhnZ2Ny7dHgUD-lORrQLl0PuNuqg3fi-QeklBsS7OtCApeDHheZoKNWBoEvRmjk4/pub?embedded=true\"\n  })), mdx(\"hr\", null), mdx(\"div\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Result of brainstorming session 2 (Embedded from Google Docs)\")))), mdx(\"br\", null), mdx(\"br\", null), mdx(\"p\", null, \"The result of our brainstorming is contained within the above documents. Some key points in the document:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Target User\"), \": As university students, we studied from external sources to supplement the in-class teaching. We often find ourselves struggling to search for the specific course that fits our needs as we are flooded with the overwhelming number of resources. We then identified that most people that wanted to learn new things also face the same problem as we do.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Needs to be addressed\"), \":\"), mdx(\"ol\", {\n    type: \"a\"\n  }, mdx(\"li\", null, mdx(\"b\", null, \"Too many course \\\"recommendations\\\"\"), \": Many MOOCs and other online and offline learning platforms often advertise their own offerings. This may confuse beginners on where to choose the best place to learn.\"), mdx(\"li\", null, mdx(\"b\", null, \"Lack of motivation and discipline\"), \": Searching through courses might be boring and tedious, discouraging new learners from starting at all.\")))), mdx(\"h1\", null, \"Interpret\"), mdx(\"h2\", null, \"Creating a POV\"), mdx(\"p\", null, \"We created two typical archetypes of people that will use our service.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"650px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"38.036809815950924%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABJ0AAASdAHeZh94AAABe0lEQVQoz31Sy07DMBDMz/If/AASRy5cQO2BKxcucEIIIVFUSJVUSZy0VfNwkjZJ8+grGXYNRRUSWFrZO2vNzo6tNU2Dqq5RFAVs20Ycx6gpL8tKYYZhIAhDrFYrlfN9z3MJNxWWZRmWy6Xaua5FYYAiz9F1QBAE8H0f8/kcs9kMksjzPINpmvBcF9PJFDKSqKoKJjUaDt9hWxZcITCZeESaQ7vrXSCaOvCJLCCy7XarVNRNrZRuNhu0bYvdbqdqvDeE8ySsnJXVdaWacGg3l2d4vr9Fv3eFJElwvDqSzQS/FxP/tbTB6ws+dF0Fe8CKWOF6vVYdWYGUUjVbLBbKL7ZIxglNFSEiC7ge0DkmTOvQokhDuOMhhGPDsgWEcOCRJ3wxTVPooxHhFhzHUT5XZQnLsslDXT3OiMQIQR5SI80XBh7657g+PUEqffLjS1nbdj/efRug8v9H7qCl1hjG2xOswSMyGmm336uxOZiYvwaf2YJDHL7PMXaw6BO+BVovFJtRyAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Persona 1 and Persona 2\",\n    \"title\": \"Persona 1 and Persona 2\",\n    \"src\": \"/static/91e78018c8f0af87b867d0f5c2faaf0a/a6d36/POV-project2.png\",\n    \"srcSet\": [\"/static/91e78018c8f0af87b867d0f5c2faaf0a/222b7/POV-project2.png 163w\", \"/static/91e78018c8f0af87b867d0f5c2faaf0a/ff46a/POV-project2.png 325w\", \"/static/91e78018c8f0af87b867d0f5c2faaf0a/a6d36/POV-project2.png 650w\", \"/static/91e78018c8f0af87b867d0f5c2faaf0a/84cc5/POV-project2.png 898w\"],\n    \"sizes\": \"(max-width: 650px) 100vw, 650px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"Persona 1 and Persona 2\"), \"\\n  \")), mdx(\"h2\", null, \"Framework\"), mdx(\"p\", null, \"Additionally, we came up with a framework to make visualization of the use-case flow easier.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"650px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"69.32515337423312%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAACs0lEQVQ4y41US2hTURB9aZJGrN1lkUACtStBCN1UYlG7E7PoohgKwY2IurAqrhRRFBddKC0UFWzFQCVRERPzFuZTSWlDCF3kBU2b///bNk1K85GEhOrz3JBGklLphWHunTdzZs7cuY/KZDJMIpEobG9vN1Kp1G0KK5fLLcVisXI6na7u7Ox8hIm/sbGhge83+OiwX/J4POc0Gs1J2N4j/g3kLeyvqGg0OheJRGg4Lvp8vnECCKAXADRCzLA/golXLBavI+k9yCT2D1ZXV6XLy8sKtmtR3UskEvG7bRKJ5Ljf778E8HEkGQuFQhNGo1Fot9uHkICJx+M2fHNsbm5aKZTMsdlsHAIuk8m4hB7Zm83mHlTQQwDlcnkfgvRbW1u2bDa7CAbMysrKqF6vPw/AP6BahPxCq3JUOBym1Gp1sxKBQNAGBC2SpCnUIctqtV4mNOv1Oruvu324ZFFHXC6XS1apVHSo8kOpVPpULpcXOhxUKhWh2IvqvoBWAj1Jw2keNg7Os6C7AD2HNn1GH89otVoRbnfK6/U+Xl9ff4L+PuwAVCqVBJAPwHfomSuZTP5E5unWzT8D4Cz0c+h5h8Nx2mQyjRGqjUbj0FvmisXiI1N2Op0DhULhLi7rFu5jEnKzw2F4eJiA8fDhDsp/iVF4jf5ca1U4EQwGr4LaFVR+A+cBTMExAF7A8J+FHgGwvA2G0aFaFfPQFydosfl8nkWgiQwAnL9iIuxut/s7evhjbW1tlKbpi4RmrVZj9/b22Gq1+o+yVCrdByRaADlBBE69QqGwH69JgyQWzBuNhHYAjuh0ulNgYwsEAkYks+AS6QN9mZmZOWAbHBzsR8B9yBSCn+K5TmM/9N8GGwyGdoXoG7W7u8tBRc2hVigUfaDuZRimiOeWBeBvVDrR+pHwLBYLhXMz/i82RDBufJ7wiQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"HTA Framework\",\n    \"title\": \"HTA Framework\",\n    \"src\": \"/static/de4de3de5f8ad5c97e86a58c78c56aea/a6d36/HTA-project2.png\",\n    \"srcSet\": [\"/static/de4de3de5f8ad5c97e86a58c78c56aea/222b7/HTA-project2.png 163w\", \"/static/de4de3de5f8ad5c97e86a58c78c56aea/ff46a/HTA-project2.png 325w\", \"/static/de4de3de5f8ad5c97e86a58c78c56aea/a6d36/HTA-project2.png 650w\", \"/static/de4de3de5f8ad5c97e86a58c78c56aea/5a6dd/HTA-project2.png 802w\"],\n    \"sizes\": \"(max-width: 650px) 100vw, 650px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"HTA Framework\"), \"\\n  \")), mdx(\"h1\", null, \"Ideation\"), mdx(\"p\", null, \"After the emphatizing part of our project, we began to ideate on what features the app will have and how to implement it. To contain all the ideas, we created a mindmap.\"), mdx(\"p\", null, mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"650px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"52.760736196319016%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABxUlEQVQoz21SwWrbQBDVx5WQFju2LEexLNkpNJdccsgpCRRyKJReCj0UemsqabWS7AZbu7OrdRpyCS0U+gm5hLTf0bertFAoDMtqZ968N2/k+bkICtotFCJgNMjlIBfulEMXuIyZjAsxYnLEaFab2cJMSj3KpRfkIip1XJukNnHV+kwdfqb3ppmV1M+kn8teJo8u6Z2RoeOYLTYoBnhckIf0HlcBmLkKC+UzVFDCBUp3MtFLheOnZykkEDRGZRtVLS4Aesj5TKJlyBUkBBYjLadTOF+YqDL7NZ00cr/WgCEAQd/hHzCNC4V59riecI3L04v1y83Xu/uHnw+/ftzdn6rrV2L1YqlRGVcGssFvZXeWDDIxrVrM/GhbJuK6Pf/y7fXN97P2dsho65N1ERwogzudcsfsYuyUj6zhqpcR3rcv1k8+rnppg0G2U7mDmRmF3I7WLcLDt+V0BgK8y/UbJT9smnmlQIUsMIdLeqvWB0v4qp8vryYlBGqkvAmnxBqzCd20eEpKmfAGW+3agzYu5fFKzkuCWix56qbrDINvImCqm2dqV0399BHZRd/JHmZWyN8/x4LBFrlOOKEHaT//B9nFfx9/A50OeQz9QxpjAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Ideas Mindmap\",\n    \"title\": \"Ideas Mindmap\",\n    \"src\": \"/static/eed4c494bb123eeb0837d1a06cb21f56/a6d36/mindmap-project2.png\",\n    \"srcSet\": [\"/static/eed4c494bb123eeb0837d1a06cb21f56/222b7/mindmap-project2.png 163w\", \"/static/eed4c494bb123eeb0837d1a06cb21f56/ff46a/mindmap-project2.png 325w\", \"/static/eed4c494bb123eeb0837d1a06cb21f56/a6d36/mindmap-project2.png 650w\", \"/static/eed4c494bb123eeb0837d1a06cb21f56/e548f/mindmap-project2.png 975w\", \"/static/eed4c494bb123eeb0837d1a06cb21f56/3c492/mindmap-project2.png 1300w\", \"/static/eed4c494bb123eeb0837d1a06cb21f56/0f5bd/mindmap-project2.png 3825w\"],\n    \"sizes\": \"(max-width: 650px) 100vw, 650px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"Ideas Mindmap\"), \"\\n  \")), mdx(\"p\", null, \"This mindmap is the outline on what features the app will have and what it is going to look like.\"), mdx(\"h4\", null, \"OTO Feature Keypoints:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Features\"), \": The chatbot will have course find & match feature where the chatbot will ask relevant questions to the users which will be used as input parameter to find suitable courses.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Implementation\"), \": We will implement the chatbot in Slack due to the popularity of the platform and technically easy to implement.\")), mdx(\"h2\", null, \"Storyboarding\"), mdx(\"p\", null, \"One of our team member came up with a storyboard on the type of problems that the chatbot might give solutions to.\"), mdx(\"div\", {\n    className: \"columns is-centered is-mobile\"\n  }, mdx(Slider, _extends({\n    dots: true,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    adaptiveHeight: true,\n    autoplay: false,\n    autoplaySpeed: 3000\n  }, {\n    className: \"column customSlider is-8 is-10-mobile is-mobile \",\n    mdxType: \"Slider\"\n  }), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard1.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 1\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard3.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 2\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard4.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 3\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard5.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 4\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard6.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 5\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project2/storyboard7.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 6\"))))), mdx(\"br\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Education Chatbot\"), \": Users can find topics they are interested in without being \\\"burnt out\\\" and save many hours from scouring the web and real life for courses. The chatbot aggregates and filter out courses so it is more suited for the user's needs.\"), mdx(\"h1\", null, \"Verify\"), mdx(\"h2\", null, \"Speed dating\"), mdx(\"p\", null, \"Since we are in the middle of the pandemic, we cannot directly ask people when they are using our chatbot prototype, hence invite them to our Slack channel and see how they interact with our chatbot prototype and ask them about their opinions on this.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Feedback\"), \": The chatbot feels too rigid and it has too many buttons to choose. This makes OTO too bothersome to use. Some of the test users suggest that we focus more on text-based interaction so it feels more natural. With the chatbot replying using text messages instead of using interactive elements, the users feel as if they are chatting with a real person.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Follow-up\"), \": We took suggestions from the test users and made some changes to OTO. We eliminated most replies that included buttons, sliders, and other interactive elements and substituted them with text-based replies. But we kept some display only elements such as images with captions to explain the recommended courses better.\")), mdx(\"h2\", null, \"Prototyping\"), mdx(\"p\", null, \"We used the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/mishk0/slack-bot-api\"\n  }), \"Slackbots.js library\"), \" to build easy and fast working prototype of the chatbot directly inside Slack.\\n\", mdx(\"figure\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"650px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.46625766871166%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABJ0AAASdAHeZh94AAACDklEQVQoz4WS30sUURzF58EIgqIixB4kCAKjlyDJ3W1NaV1X0gwNCyLRpU0pwgyyMihX2w0K6u8IeukhgqAepR+U9dBL0ouyPwJ3Z2R3Z3Zmd2Y+3bnuykpC3+Fwvty5nHu+91wleKAT314//n0BRtovcj86y+OpBM8fvODpzDOSt5Ikp5+Q8Lihn7+5wMPJR8xdj3MvNsvdK3eI35hDGWg9R2h/D127u4mPzZNJp7EdG9d1cVwHV3z/K5Mq+rome6WnOUK4pY+TO/xcPjHKl4+fSKdTFIslLNOiXC5jWRaO42BXbarVquwlbLFm24jTpZi3pgwfGsBDaNcpou2jfPu6RD6/hlETMgUqlcoWR577f+BssNLddZtgcIq2tihDw3G+//hJJpNG09YpGwa6rmMILpVK8oC6mw1yJTcKK+EjI5w5fIHje0KM905TtiqUipoQKGLohhTzxvbETdMkr6nk1My2YlLwbEuEwdZ+Ak0dTARjmEaR3J9faOoahUJBiuklXfRF6ezlm0VmFhKiq26O31jK+aODRA720dHk49rpSeFIF0mvsrqyQiqVIpvJksvlUFVVXLrN4uclXr1+K4Sc7R2O+cYJN/dKwVjnhBitgF7IijtUZSAyxQYny7+XeffhvUxUPq1a4t4+D8rQsUv0i5H9OwNc9UYWT0UEJn46WzbXuV6bT6cGLzAPfwG+RJqz2Vc31AAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"OTO prototype in Slack\",\n    \"title\": \"OTO prototype in Slack\",\n    \"src\": \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/a6d36/slack-ui-project2.png\",\n    \"srcSet\": [\"/static/4bf1246963ca1e081fa0fb1405b0b5ce/222b7/slack-ui-project2.png 163w\", \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/ff46a/slack-ui-project2.png 325w\", \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/a6d36/slack-ui-project2.png 650w\", \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/e548f/slack-ui-project2.png 975w\", \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/3c492/slack-ui-project2.png 1300w\", \"/static/4bf1246963ca1e081fa0fb1405b0b5ce/b5a09/slack-ui-project2.png 1360w\"],\n    \"sizes\": \"(max-width: 650px) 100vw, 650px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", _extends({\n    parentName: \"figure\"\n  }, {\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }), \"OTO prototype in Slack\"), \"\\n  \")), mdx(\"h3\", null, \"The Prototype in action\"), mdx(\"div\", {\n    className: \"columns is-centered\"\n  }, mdx(\"iframe\", {\n    className: \"column is-6 is-12-mobile\",\n    width: \"560\",\n    height: \"315\",\n    src: \"https://www.youtube-nocookie.com/embed/Hae7A6tqV8s\",\n    frameBorder: \"0\",\n    allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: true\n  })), mdx(\"h3\", null, \"OTO innovation:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Simple Course Find and Match\"), \": Finds and recommends course around the web using simple text-based chatbot.\")), mdx(\"h1\", null, \"Reflection\"), mdx(\"p\", null, \"In this project, my duties shifted from designing the interface to implementing the prototype of OTO with another team member. I learned how to create interactive chatbots that actively replies to users. Although it is currently a prototype, OTO can already reply with rich text that includes images and links. I also found out how hard it is to create a chatbot that speaks naturally. When we tested OTO with actual users, many complained that the dialogue is too rigid and has too many button elements. Thus, we integrated the reviews and made OTO better. This continuous process of feedback and fixing the product will result in a more polished end product and made me improve my technique for designing software for humans.\"), mdx(\"br\", null), mdx(\"br\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/projects/comp4461-project2"}},"staticQueryHashes":[]}