{"componentChunkName":"component---src-templates-articles-template-js","path":"/projects/comp4461-project1","result":{"data":{"mdx":{"frontmatter":{"slug":"/projects/comp4461-project1","title":"COMP4461 Project 1","subtitle":"A more accessible app for the elderly","date":"June 10, 2020"},"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-project1\",\n  \"date\": \"2020-06-10T00:00:00.000Z\",\n  \"title\": \"COMP4461 Project 1\",\n  \"subtitle\": \"A more accessible app for the elderly\"\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, \"The objective of this project is to create an app that is easier to use for the elderlies and help them to be more active. We found that there are not enough apps that cater to older people. It is especially important that software should help those who use it instead of becoming a hindrance. That is why team \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\"CAKOL\\\"\"), \" decided to create a new approach on how to design UI for elder people. We think that this might bring a significant amount of benefit for older people, especially during the midst of a pandemic. An app that caters specifically to elderlies may alleviate some of their problems such as lack of socialization and lack of exercise. We aim to integrate those features into a simple and easy-to-use package.\"), 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-1521667103846-742fd793e340?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80\",\n    className: \"is-9by16\"\n  }), \" \", mdx(\"i\", null, mdx(\"p\", {\n    className: \"subtitle has-text-centered\"\n  }, \"Illustration: Older Lady messaging with her phone by \", mdx(\"a\", {\n    href: \"https://unsplash.com\"\n  }, \"Unsplash\"))), \" \"), \" \"), mdx(\"h1\", null, \"Empathize\"), mdx(\"p\", null, \"For the first phase of the project, we brainstormed and put up ideas on how to tackle this problem by immersing ourselves to the users\\u2019 daily habit. We found that many of them are struggling to use regular messaging app due to the complex UI. \"), 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\": \"74.84662576687117%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHei0jGL//EABgQAQADAQAAAAAAAAAAAAAAAAEAEBEx/9oACAEBAAEFAuA7Csr/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAWEAADAAAAAAAAAAAAAAAAAAAQICH/2gAIAQEABj8CSD//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAhMWH/2gAIAQEAAT8hXs6KUvzKmSkemk8Y83//2gAMAwEAAgADAAAAEH8P/8QAFREBAQAAAAAAAAAAAAAAAAAAECH/2gAIAQMBAT8Qp//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAgEBPxCIf//EABwQAQEAAgIDAAAAAAAAAAAAAAERACExQVFxgf/aAAgBAQABPxA1UA8YtHZ0Zmzt+TBaKdTIbs63MKAefdz/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Brainstorming Mindmap\",\n    \"title\": \"Brainstorming Mindmap\",\n    \"src\": \"/static/162ac8c907ed16b7a123f863a9d9a0bf/6aca1/drawing1.jpg\",\n    \"srcSet\": [\"/static/162ac8c907ed16b7a123f863a9d9a0bf/d2f63/drawing1.jpg 163w\", \"/static/162ac8c907ed16b7a123f863a9d9a0bf/c989d/drawing1.jpg 325w\", \"/static/162ac8c907ed16b7a123f863a9d9a0bf/6aca1/drawing1.jpg 650w\", \"/static/162ac8c907ed16b7a123f863a9d9a0bf/6a068/drawing1.jpg 960w\"],\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  }), \"Brainstorming Mindmap\"), \"\\n  \")), mdx(\"p\", null, \"We then use a mind map to know which type of user this app is going to serve, what kind of requirements we need to fulfill, and problems they might come into when using the app.\\nFrom the result of our brainstorming, we identified several things:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Target User\"), \": We want our app to be used mainly by older people.\")), 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, \"Health and fitness\"), \": Just like the old Latin saying \", mdx(\"i\", null, \"mens sana in corpore sano\"), \" (a healthy mind in a healthy body), older aged people need to stay active to maintain their physical and mental health.\"), mdx(\"li\", null, mdx(\"b\", null, \"Technology barriers\"), \": Elder people are less tech-savvy and may need a novel way to design the UI for the app.\"), mdx(\"li\", null, mdx(\"b\", null, \"Entertainment and socialization\"), \": Old people may feel lonely at times and need frequent contact with other people to stay happy\")))), mdx(\"h1\", null, \"Interpret\"), mdx(\"h2\", null, \"Creating a POV\"), mdx(\"p\", null, \"As a result of an interview with a member\\u2019s own grandparent, our team developed a persona of a typical user.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Name:\"), \" Lauren\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Age:\"), \" 78\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Description:\"), \" She lives in Hong Kong and lives far away from children and grandchildren in Singapore. She felt lonely due to her distance with her family and she seldom exercises. She used to dance, but now as she gets older it gets harder to do it. Moreover, she also has high blood pressure and diabetes.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Problems:\")), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Her relatives cannot visit soon due to the pandemic.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Are used to exercising with her friends\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cannot use existing online communication app as those are not user-friendly enough for her.\")))), 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-1593100126453-19b562a800c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=747&q=80\",\n    className: \"is-16by9\"\n  }), \" \", mdx(\"i\", null, mdx(\"p\", {\n    className: \"subtitle has-text-centered\"\n  }, \"Illustration: An image of an elderly woman by \", mdx(\"a\", {\n    href: \"https://unsplash.com\"\n  }, \"Unsplash\"))), \" \"), \" \"), mdx(\"h1\", null, \"Ideation\"), mdx(\"p\", null, \"After analyzing the requirements of the user, we began to create a potential solution. We created another mindmap to develop ideas on how to tackle these problems with our 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\": \"79.75460122699387%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACx0lEQVQ4y21Uy3KTUBjuw/kEblz7AG5dudKd+g5ON3XRcWeTRjNxxpl22mmdOrZJIdzJBTjcCZAAgc8f0qSl7ZlhCMnhO9/tzx7uVlVVeLziOIZlWVBVFd1uF47jbPaWZbP/4bXF2HsIliQJNF2HoijoHH1Hv99Hr9fDYDDA4eHhPSCeri1GA1jSifXSNA1fDw7wo/8T3zod8DyP+WyGGV0102K9rjejjBaoTBuV66OMk4bxjuFDylmeww0jxBYDfnXBbBtzw4Bpmgh9H0WaEhBDoWhIJhMsxyIqfYaK3mtJRg1a34tio2c5B4bHxKhCHEVgkgxXVuDd8rBFCf50ikWVw059hHnalrwzlGgXQx6FKiP1/mC1miP0AojX19CGI4SyCovjweg+VbWdkUbsYFlkjyTXT+RPKCpgIo+pcgNVFmEzG5ogYCqICGZzqLccSffgBB7G5C8jX7OyAEv85z1MbQcRcygIHbbN6Iw18tpX8lIjAH9uoMgz6L4BQRSwoHByArQSrw24fbjjiizLGiCDAhHG4yblhLwU6XNEhzqxB3cZbvauc2LoPc9QIHlXV1fgOA4epXozHOL07AwKfW9SGDJ5aXFj2L4FKZg1PtaAzzLMKeGa0Wg0wvnJKSYEQDSREHDN0KCK2IoKjn73qVY3ltDILasSZuw+BXSoa67nYen5lLKPyPUg82OEFAwWMWKS6kUhDGbRTKbQAhN6RPLTEOEqbvewqNlNpk2xV44LSRQxMw1MqG8aFdilw0CFtzQdRZgiphH951zjSOpAJunl41muR6+eCj8ImpI7JE2W5QZwRH7qNN8rqkuVFxixCxzw7/Fl+AafLl9hoO/fgZVtyfdJbzqZEVOfurcgyQl5lkYBpJDh8+VbvDt5gQ/nL/Hx4jX+st9twB3QFngL2nixrtNq/atMIgk9dR+X5jGC1X0Y2/f/A+Q+uZrNuRpSAAAAAElFTkSuQmCC')\",\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/857842f03cb675e79602f35e548aede2/a6d36/mindmap.png\",\n    \"srcSet\": [\"/static/857842f03cb675e79602f35e548aede2/222b7/mindmap.png 163w\", \"/static/857842f03cb675e79602f35e548aede2/ff46a/mindmap.png 325w\", \"/static/857842f03cb675e79602f35e548aede2/a6d36/mindmap.png 650w\", \"/static/857842f03cb675e79602f35e548aede2/e548f/mindmap.png 975w\", \"/static/857842f03cb675e79602f35e548aede2/afd0b/mindmap.png 1153w\"],\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(\"h2\", null, \"Storyboarding\"), mdx(\"p\", null, \"Our team managed to come up with several storyboards that shows what kind of problems the user might have that the app could solve.\"), 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\",\n    src: \"/img/comp4461-project1/sketch_virtual_exercise_page-0001.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual exercise 1\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/sketch_virtual_exercise_page-0002.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual exercise 2\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/sketch_virtual_exercise_page-0003.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual exercise 3\"))))), mdx(\"br\", null), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Virtual Exercise:\"), \" the user can have a virtual exercise with their group of friends. It has features such as: virtual coaching, exercise guidance, and AR interactions that might make the activity more interactive than regular video call.\")), 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\",\n    src: \"/img/comp4461-project1/online-activitis_page-0001.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual meetings 1\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/online-activitis_page-0002.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual meetings 2\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/online-activitis_page-0003.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual meetings 3\"))))), mdx(\"br\", null), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Virtual meetings:\"), \" the user can socialize with their fellow elderlies. They can have one-to-one chat and video calls, group calls, and even attend web seminars that might interest them.\")), 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\",\n    src: \"/img/comp4461-project1/storyboardvirtualdinner.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual dinner\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/virtualfoodorder.jpeg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual food order\"))))), mdx(\"br\", null), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Virtual dinner:\"), \" the user can have \\u201Cdinner\\u201D with their loved ones in a virtual setting. They can play music, share a movie, switch the virtual background theme. It also has a group food delivery feature where the user can order food together with the members of the call through an integrated menu with a simple UI. This feature is different from regular food delivery app because it can deliver to different location simultaneously and has an elder friendly UI flow. We hope that this feature can give a sense of ordering food at a real restaurant but without having to be in the same place.\")), mdx(\"h1\", null, \"Verify\"), mdx(\"h2\", null, \"Speed dating\"), mdx(\"p\", null, \"We interviewed our members own grandparents to identify any deficiency in our design. We showed them screenshots on how the app would look like and asked for their feedback. From what they say, here is a couple of improvements we could make:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Color contrast:\"), \" They feel like the colors between some foreground components and the background are hard to see and a more contrasting color would help.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Fonts and components size:\"), \" Although we tried to make the components large enough for easy input, the users feel that it is still not large enough.\")), mdx(\"h2\", null, \"Prototyping\"), mdx(\"p\", null, \"We used \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Figma\"), \" to create a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"High-Fidelity prototype\"), \" as well as \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"paper-based sketch\"), \" for the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Low-Fidelity prototype.\")), 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\",\n    src: \"/img/comp4461-project1/figma.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Figma Workspace\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/figma-mockup.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Mockup\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/prototypefoodordering.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual Food Order Sketch\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/prototype.png\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Menu Sketch\"))), mdx(\"div\", null, mdx(\"img\", {\n    className: \"is-4by3\",\n    src: \"/img/comp4461-project1/prototypeVirtualDinner.jpg\"\n  }), mdx(\"p\", {\n    className: \"content has-text-centered\"\n  }, mdx(\"i\", null, \"Virtual Dinner Sketch\"))))), mdx(\"br\", null), 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.com/embed/yd1eJXIa50I\",\n    frameBorder: \"0\",\n    allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: true\n  })), mdx(\"h3\", null, \"Eldhub's innovation:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Gesture tracking\"), \": enables gesture for a more interactive group exercise session.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Enhanced virtual interactions\"), \": Enables virtual dinner with family and meetings for increasing social engagement with relatives.\")), mdx(\"h2\", null, \"Feedback\"), mdx(\"p\", null, \"Upon improving the design of the UI based on the earlier speed dating, the users found that the app is easier to use. The enlargened buttons and descriptive actions made using the app more intuitive. The users also said that this app solves many of their problems when using an online communication tool.\"), mdx(\"h1\", null, \"Reflection\"), mdx(\"p\", null, \"As most of my work involves the design of UI components, I found out how hard it is to design for improved accessibility. High contrast colors often do not look as good aesthetically. Fitting the enlarged components are not easy as bigger components take larger space that are otherwise usable for other things. However, by doing this project, I also learned new skills for designing better human and computer interaction. Previously, I designed user interface only based on my preferences and general user interface guidelines. In this project, I tried to incorporate user feedback and a proper design workflow when making the UI. Things like storyboarding and physical prototyping is a new thing for me as usually I just use Figma to directly create a prototype. All in all, this project provides an invaluable lesson for me on how to better plan an application for a better user experience.\"), 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\": \"277px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"83.43558282208589%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABJ0AAASdAHeZh94AAABY0lEQVQ4y62QS0/CQBRG5//vSFxrXIAajQ9aKMalClgoz1Y0PGJpG9qpuDAxPpL281IqFGhhYSc5yZ0735zcGTYxvjFbnuelAnOdr0Doez58//8wPvkMhV46Qtf5QZqLGU99fNhtvFvdLXTWSM6yYb0MVz2H080ncEUIYS1EevF5NmzImPYK4I8luBtIcHvX4CqJGjnw5gn1isuzmDtsqDyQUADXpDA0h2vzi7x7CUfJ0r6wUi8z0krNRo0dwtZpIFpIwn1wFkp45M5uYfsMDkns2iFsms6hZ3P6w6gwym5hh6ZpZjHV8nhTL6g+oj8VN54cEcp47Yl0WApGX6DNP91Ri2hKe1AKGShiBoMyyZ9vAtlKPoSNlApNSE/QxAQE6HIOg7sDDG73YdSOKV8M+nF51pP70Fv3eGlViUoMVYw7Mgy1DpOY1X/9uDzTdRuGOYFhJDNeY1ueWZaJNGGmaSFNfgHbec2ikBpMwAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Color before fix\",\n    \"title\": \"Color before fix\",\n    \"src\": \"/static/be2c55881cc32156f311c5440079e414/2a985/UI-before.png\",\n    \"srcSet\": [\"/static/be2c55881cc32156f311c5440079e414/222b7/UI-before.png 163w\", \"/static/be2c55881cc32156f311c5440079e414/2a985/UI-before.png 277w\"],\n    \"sizes\": \"(max-width: 277px) 100vw, 277px\",\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  }), \"Color before fix\"), \"\\n  \"), \"\\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\": \"147px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"72.78911564625851%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAABwklEQVQ4y5VUWUtCURD2BwZBTxVFQVAQ9BBUGO0FaRtFJa1mm5m2iLmk190CTUKwzaxsw2yzxXqonr7umZDCXB8+7sw9w3dm+eYIHo82kYiHQwPhx9bj/kD/x/89SwZBaiIDEb2cWPB27sBz0PyPOCvCeFbs+37hwj43htXBCgRdMvITL01LGA96CnJkGyZroegthUctxmJ3IazzjXT2dGzKPkMWfLmzDLmoGJysAVHep8z4cnXjNVD2lyHsW0c0YMycIesR65dzqQ3cTD0+wh7+nw53+1oi/LzxQCOphntNRHEsPiNhLGTHtqqTRxdiZ3Y+Yw7PJ2Y+IxORWOaE1IJYKGtCB7aUnXAq2qlf6pEqLIqKoB2rodJN0rrcCV3L7dhR95BUlsTFNGE2lK+IF7aFptxKfj2zwb0uhrQ1H6qBcih6SkiLso4CqIcrMdWcB59+iOIyEv5MzYiIX4OAQ4oj2xSud1fwemrFlVeJgH0ax84Z3O1pc9chK9Or6cOhdQJ+4ygOLBO8PYnbvY3cdMjAtOc3SWCZFZJ8HPIWkpKOH0zILafJp9ppQarHgQk3vjFMMsxnSLfHKUtO9lAkQzLCbwNn7WNx+HjYAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Color after fix\",\n    \"title\": \"Color after fix\",\n    \"src\": \"/static/e67bf851460c839902f6296ff9ab8e5d/a70ce/UI-after.png\",\n    \"srcSet\": [\"/static/e67bf851460c839902f6296ff9ab8e5d/a70ce/UI-after.png 147w\"],\n    \"sizes\": \"(max-width: 147px) 100vw, 147px\",\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  }), \"Color after fix\"), \"\\n  \")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/projects/comp4461-project1"}},"staticQueryHashes":[]}