{"componentChunkName":"component---src-templates-articles-template-js","path":"/projects/comp4461-project3","result":{"data":{"mdx":{"frontmatter":{"slug":"/projects/comp4461-project3","title":"COMP4461 Project 3","subtitle":"Improvement to Mozilla Hubs VR","date":"June 11, 2021"},"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-project3\",\n  \"date\": \"2021-06-11T00:00:00.000Z\",\n  \"title\": \"COMP4461 Project 3\",\n  \"subtitle\": \"Improvement to Mozilla Hubs VR\"\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, \"Virtual Reality (VR), a technology decades ago predicted to be the future of immersive user interface has become more economical and easily accessible. But it is still out of reach for many people due to the need of having a dedicated headset. The Mozilla Hubs VR platform aims to bring the VR experience to the masses by implementing VR for regular 2D screens. However, it came with many usability problems that may hinder its adoption. We aim to improve and potentially provide solutions to several problems that the Hubs platform currently suffer.\"), 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-1593508512255-86ab42a8e620?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1398&q=80\",\n    className: \"is-9by16\"\n  }), \" \", mdx(\"i\", null, mdx(\"p\", {\n    className: \"subtitle has-text-centered\"\n  }, \"Illustration: Person using VR headset \", 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 potential problems that we encounter while using Mozilla Hubs. We also do qualitative coding and analysis of our experience when using Hubs for our meetings.\"), 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-1vR59RXxb9otCr0-YhHG_3HPPwjxTLh_40i7ilLwLi8Ru1zksW_4ajdudUGXhpKazQfOuhIEGEaxPrv5/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(\"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  }, {\n    className: \"column customSlider is-8 is-10-mobile is-mobile \",\n    mdxType: \"Slider\"\n  }), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3  mx-auto d-block\",\n    src: \"/img/comp4461-project3/heuristic.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Heuristic Analysis\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3  ml-100\",\n    src: \"/img/comp4461-project3/pentagon.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Qualitative Coding Chart\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3  mx-auto d-block\",\n    src: \"/img/comp4461-project3/analysis-table.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Qualitative Coding Result\"))))), mdx(\"br\", null), mdx(\"p\", null, \"Some key points in the document and the qualitative coding result:\"), mdx(\"p\", null, \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Potential Problems in Hubs\"), \":\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Unsuitable for formal use\"), \":\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"We feel that the cartoonish look of the characters are not appropriate for use in formal settings.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"There are too much freedom of movement during meetings that might hamper the meeting flow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The Hubs platform allows miscellaneous objects to be dragged freely across the 3D space and it may disrupt the meeting.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Lack of social interaction functions\"), \":\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Users can only change the voice volume\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatar expression is too rigid\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"No readily visible indication of which person that is currently talking.\")))), mdx(\"p\", null, \"To address what our team feel are problems with the application, we propose some improvements to the Mozilla Hubs platform to better accommodate meetings.\"), mdx(\"h1\", null, \"Interpret\"), mdx(\"h2\", null, \"Creating a POV\"), mdx(\"p\", null, \"This is what we thought the kind of user that will be using the VR app.\"), 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\": \"33.74233128834356%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABJ0AAASdAHeZh94AAABgElEQVQoz11RPU/CUBTtj3J0ctPE0ZnEgd3NODD4DzRxdXFi0EkXExONG4FAJYFWTCz9gvdooQ9oS6HkeO8zJoabvNze03vePfc8w/cDZHmBPF9htSqQLlN4nocwDJFlGYqiwGKxgON8Q0qJzWajMc7T6RSDwZfOZVnqfsPud+ENB3SRglIzOgmCwIcfBBBCYjKJaFhOuEIym9G/AK7r6qEzqudzhdFoRJin+4yP9zs0nm/gfr7isX4Fq/OGmCYGpFBKQUpHSBIFDlZqmiaarabuYZUcrjtEu92hy+cwEtFF33xB7byKi7MK7uu3Wg0ThBCI4livUm63SNMUltWnY+n1ud4SPiaFfcsG22c8PVzjsnaKw+Mj7O0f4KRSpTUlJK07HgtNjOJIE9N0Cdu20ev1YFFWaq7xkGxgi9gCI44myFJFKpaQ5Bf7Foa/PrFf7NWQvpmYr3JdO46j/eKV+THCINSYEGMY6/Uau7GLMfHPr//Br82DfBrSaLQw9CP8ABnNArn/7vr9AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Typical user of the app\",\n    \"title\": \"Typical user of the app\",\n    \"src\": \"/static/aa1627d820869778e094e18b7256a53d/a6d36/POV-project3.png\",\n    \"srcSet\": [\"/static/aa1627d820869778e094e18b7256a53d/222b7/POV-project3.png 163w\", \"/static/aa1627d820869778e094e18b7256a53d/ff46a/POV-project3.png 325w\", \"/static/aa1627d820869778e094e18b7256a53d/a6d36/POV-project3.png 650w\", \"/static/aa1627d820869778e094e18b7256a53d/d2a60/POV-project3.png 807w\"],\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  }), \"Typical user of the app\"), \"\\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\": \"71.77914110429448%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAACrElEQVQ4y6VTS0wTURSdfqSaKEJkwcqAgBBRiCZEFkajUEOa4MYoRuOHVE3ssiFhpQYlccPKRRMTmkiiC8OCBSFhAY0NLlCaFqG0Jf3NTDszndaZtjqlRkjG817KxrRsvMmZ++a+eefde+4dJpFImNbX100cx5lWV1eZfQuHw8z4+LiBrM1mc5fRaOzHkuA00GcymXoR74bvg+8xGAy9iPcw/9rExARTxZqARqAdOAE0A+eAFqAbOAN0Aa1MMpkcDQQC9nQ6/cDv9x9j/tey2awuCIIOQn1xcZHcaibxaCw2VdI0RRSFqKoogqqqAbfbfYrsraysWHEmCLm+8TxPsBmNRocoITJMRiIRxHjIFm7ZJxTS/ICk/Jrc4gtv+OzPVz8U9Zn3s6eB7IVCoREdViqV9HK5TJZ6KpUapYROp9NitVotDofDgjgJ1cEbD6rK6/X2o4nzkGoWDZ0VRXE+Ho9fqvpxZ2fnEeKR9WU5IzlSbPxRmueeoMT772dmGioln8f+x42NDffa2pobpB+2t7cvUoLp6WnG5XIxY2Nj9N1msx0lXhSEKTVf/M0JGUWScwU1n99cWFhoJXtLS0u3oSnVPZfL0ZKR5cNaFVnIo4NhDCMvPx1/6g41P37rbbxiu1Wn/9GoFD6f70ahUCAkej6fp4SQ4G5NwoFrV6tqiHN00D0ez3WWZaUYTJblmKIoIno7XJWtvr7+cEXDpiTLdiQSyTaO49sheguIDlUmow3ZTaLc55lM5oUkSa+DweDZqoR2u502BZe/KxaLOstxGsfze8gkNTc3117p8oimaVQ/4omh9HtMjbKolwX+ZCRdHPwSKw1/54qDoiRf8Pu+0uzR0SGiHUrdxaW7Ozs7Oob8Ts05C20FmYM0XF5evkm6jGHeww+xRwixpoR/AQpouneZXOgSAAAAAElFTkSuQmCC')\",\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/85230478e8e2cd8ec425725d9dce764a/a6d36/HTA-project3.png\",\n    \"srcSet\": [\"/static/85230478e8e2cd8ec425725d9dce764a/222b7/HTA-project3.png 163w\", \"/static/85230478e8e2cd8ec425725d9dce764a/ff46a/HTA-project3.png 325w\", \"/static/85230478e8e2cd8ec425725d9dce764a/a6d36/HTA-project3.png 650w\", \"/static/85230478e8e2cd8ec425725d9dce764a/748f4/HTA-project3.png 656w\"],\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\": \"96.31901840490798%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsSAAALEgHS3X78AAAC7ElEQVQ4y41U226jMBTM///YSvuw0rbb3AgQAgHCHYNtSNrOju2kZSut1AfL4Mt45szYK62v+HZTs+3VvZ8mN56eL4hPGUQ/YvUdILUAenyPo0Y/KEi27drDy4uHphGfgMvFj+/H/1fQabpZVr5/wlB3CLY+AvNtGP4P5CFnOSYle4JNZpwM7Tr2u80Bv5+2ZNg7ho9Tb7d3XK9vdqMQysrS2gFer6/wgxhPz3tURQMtNZTZKyfsdgHWGx9dNziG5kTz4/kREkpJswJ7P0TbCczTq2M6SIytQM9mek2gaX61gAcChocIkgQs4MyJpunw4+cvrLcewohM1lvkRY6irDBIBV211mUDYk1hvYyKgTJ9Ss7zyiqxkodBY7jLmyndgHhhgLIu7SIhBWRRktVnPXsqqqsOfVHDo8vR8ewYmsmqqlmDPdI0Zy1f76a44k/6hlGSTR6TIaXfa2rmr6y5Mcffh4ijMxlLB9iTvnfwGYUIo+hdsblJsj6agKLrUKSxPewBdqExpzi3e009DbCVbBaVlPj85xlZllHyjKauOTnR9Te6+84N3NQmFvwBmMQpwvCEru2dafe8rowh57Swki+XAoMQ3MRb0AuOlzSmpZN0tUkda5uKCVF4hOcFjJayB9jaGoYNI7Dbs6hRxAHJzdouKAjuHUIkCYHkANXVZH+1jGeuK5IjsnPKuAm07fBxCVZ5XuLg09Gy4ERLx5V127AwQb8x0IpSp1HQNF63Y4a+KpFGIXMb4xQ52eZCWMmmfrvdBnmWYFK8HYNgHGoaov65jsbxS3axoH15oUkJMpM9KmrIMGHZBMmssrxgcY88pSXDhjUcPx8DA2aL7UBNRg2TmSYZliVz2LFkcZJjs/MZv5YuaxNUxkM529Xi7VNq0d9BJb+NkigI8MJAp+eMkZG4zTdnills28f7t3i2Fs/XxyG2nyCoyOSz4g0KjzF6oVwN9V2aXkr8CvSVNQ/tu55GNraPjife5cKu+QuZqK0DnR97tAAAAABJRU5ErkJggg==')\",\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/cfaf47567d7e9a16ce4e7c28e3f771f4/a6d36/brainstorm-project3.png\",\n    \"srcSet\": [\"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/222b7/brainstorm-project3.png 163w\", \"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/ff46a/brainstorm-project3.png 325w\", \"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/a6d36/brainstorm-project3.png 650w\", \"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/e548f/brainstorm-project3.png 975w\", \"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/3c492/brainstorm-project3.png 1300w\", \"/static/cfaf47567d7e9a16ce4e7c28e3f771f4/69ac7/brainstorm-project3.png 2519w\"],\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 contains some ideas that we have to make Mozilla Hubs a better Social VR experience.\"), mdx(\"h4\", null, \"The improvements for Mozilla Hubs that we eventually choose:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Features\"), \":\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Go-to\"), \": Users can immediately transport the character near the person presenting a content without having to waste time walking\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Mouse pinning\"), \": Move characters through mouse click may give better experience than moving with keyboard keys.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Align button\"), \": Align all contents in the VR world to the user's line of sight.\")))), mdx(\"h2\", null, \"Storyboarding\"), mdx(\"p\", null, \"We created scenarios where the improvements we made might be useful.\"), 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-project3/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-project3/Storyboard2.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Storyboard Page 2\"))))), mdx(\"br\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Improvements to Mozilla Hubs VR\"), \": The application is more appropriate for meetings with some tweaks to movement mechanics and some useful functions to help meetings to be more conducive.\"), mdx(\"h1\", null, \"Verify\"), mdx(\"h2\", null, \"Speed dating\"), mdx(\"p\", null, \"We asked some people to use Hubs after we made the improvements and asked for their feedbacks. Due to the pandemic,\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Feedback\"), \":\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Fulfilled the niche of having a meeting through social VR.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"More flexible options to users\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Follow-up\"), \":\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Better use of Social VR without display\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Highlight important buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Provide interactive tutorial introduction\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Adjust access level for the person in charge of the meeting\")))), mdx(\"h2\", null, \"Prototyping\"), 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/RLpscWweOa8\",\n    frameBorder: \"0\",\n    allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: true\n  })), mdx(\"h3\", null, \"Future:\"), mdx(\"p\", null, \"Based on the feedback we received, we will make improvements in the future that are more in line with user needs. Such innovations might be:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Make the VR display more clear.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Reducing options as to not confuse users.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Highlight important functions.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Give more control to the host of the meeting.\")), mdx(\"h1\", null, \"Reflection\"), mdx(\"p\", null, \"My experience for Project 3 is quite different from the previous projects. Unlike the projects before, many in our team were foreign to the concept of Social VR before being introduced by this course. We were initially confused on how to make better experience with it. We came up with many problems that we encountered while using Mozilla Hubs for our meetings. Through that, we came up with a handful of ideas that could solve it. After few discussions, we eventually reached a conclusion that Mozilla Hubs had many usability problems that would hinder it from become a proper meeting app. \", mdx(\"br\", null), \" \", mdx(\"br\", null), \"\\nMy duties were creating the persona of a typical user and come up with usage flow. Doing both of these things were not too difficult as we are just improving an existing product. We already knew what kind of users use Mozilla Hubs and how they use it. Therefore, I created usage flow using the HTA framework for the additional features so it was simple enough to be understandable. \", mdx(\"br\", null), \" \", mdx(\"br\", null), \"\\nThrough experience from Project 3, I could understand more about Social VR and its use in real world. This up and coming technology has great potential and I am sure that it will be adopted by the masses as soon as the technology to make a more better experience i.e. the VR headset becomes more affordable. But for now, we can all experience Social VR without additional peripherals using platforms like Mozilla Hubs.\"), mdx(\"br\", null), mdx(\"br\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/projects/comp4461-project3"}},"staticQueryHashes":[]}