{"id":1071,"date":"2021-05-15T21:52:08","date_gmt":"2021-05-15T19:52:08","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?p=1071"},"modified":"2021-05-15T21:52:08","modified_gmt":"2021-05-15T19:52:08","slug":"a4-p8-ideation-and-storyboard","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/05\/15\/a4-p8-ideation-and-storyboard\/","title":{"rendered":"[A#4, P8] Ideation and Storyboard"},"content":{"rendered":"\n<ol class=\"wp-block-list\"><li><strong>Problem and hypothesis statement<\/strong> <\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>PROBLEM STATEMENT<\/strong><\/h4>\n\n\n\n<p>Max needs a way to easily choose board games online with his friends because they changed their board game nights to remote board game nights because of the pandemic and are not very accustomed to the online board games. We will know this to be true when we see: The group can choose a board game according to their interests in a short amount of time.\u00a0<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>HYPOTHESIS STATEMENT<\/strong><\/h4>\n\n\n\n<p>We believe that by creating a web application that includes a filter and recommendation system for online board games for<strong> <\/strong>Max, we will achieve that Max and his friends will have less stress and frustration during their remote board game nights.<\/p>\n\n\n\n<p>2.\u00a0<strong>Task flow with BPMN<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54-1024x382.png\" alt=\"\" class=\"wp-image-1078\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54-1024x382.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54-300x112.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54-768x287.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54-1200x448.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/2021-05-15_20-54.png 1332w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>Our task flow with BPMN starting from when user has logged in until he\/she logs out.<br>The task flow was created with <a href=\"https:\/\/bpmn.io\/\">BPMN.io<\/a><\/figcaption><\/figure>\n\n\n\n<p><em>Why did we decide to do a task flow with BPMN?<\/em><\/p>\n\n\n\n<p>We chose BPMN because the task flow gives us a good overview over the activity order of a user in our web application. Moreover, we chose BPMN because we find it very clear and easy to understand without any unnecessary details. It therefore helps us to focus on the essential aspects of our idea for further steps in our project.<\/p>\n\n\n\n<p>3.\u00a0<strong>Moodboard<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard-1024x578.png\" alt=\"\" class=\"wp-image-1079\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard-1024x578.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard-300x169.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard-768x434.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard-1200x677.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/moodboard.png 1442w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>Our moodboard. We worked a lot with pictures that we think create certain atmospheres that we also want to have for our application later.<br>We created the moodboard with <a href=\"https:\/\/jamboard.google.com\/\">jamboard.google.com<\/a>.<\/figcaption><\/figure>\n\n\n\n<p><strong>4.-5. Sketches<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-1024x768.jpg\" alt=\"\" class=\"wp-image-1081\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-1024x768.jpg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-300x225.jpg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-768x576.jpg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-1536x1152.jpg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-2048x1536.jpg 2048w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image0-1200x900.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>An individual sketch of how the filter system for the board games might look like.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1024x768.jpeg\" alt=\"\" class=\"wp-image-1082\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1024x768.jpeg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-300x225.jpeg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-768x576.jpeg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1536x1152.jpeg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1200x900.jpeg 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16.jpeg 1600w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption><em>Another individual sketch of how the filter system might look like.<\/em><br><br>We decided to keep the sidebar with the video chat from the first sketch and the prediction of how closely the shown game matches the filters from the second sketch.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-1024x768.jpeg\" alt=\"\" class=\"wp-image-1083\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-1024x768.jpeg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-300x225.jpeg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-768x576.jpeg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-1536x1152.jpeg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1-1200x900.jpeg 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.16-1.jpeg 1600w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>A sketch of how an embedded board game might look like.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-1024x768.jpg\" alt=\"\" class=\"wp-image-1084\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-1024x768.jpg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-300x225.jpg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-768x576.jpg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-1536x1152.jpg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-2048x1536.jpg 2048w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/image01-1200x900.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption><em>Another sketch of how an embedded board game might look like.<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-1024x768.jpeg\" alt=\"\" class=\"wp-image-1085\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-1024x768.jpeg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-300x225.jpeg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-768x576.jpeg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-1536x1152.jpeg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1-1200x900.jpeg 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.15-1.jpeg 1600w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption><em>And another sketch of how an embedded board game might look like.<\/em><br><br>We decided to keep the sidebar with the video chat from the second sketch for the embedded board games as it seemed to us the most useful for different types of games.<\/figcaption><\/figure>\n\n\n\n<p><strong>6. Storyboard<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.17-1024x768.jpeg\" alt=\"\" class=\"wp-image-1086\" width=\"920\" height=\"688\" \/><figcaption>The first page of our storyboard.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-1024x768.jpeg\" alt=\"\" class=\"wp-image-1087\" width=\"911\" height=\"683\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-1024x768.jpeg 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-300x225.jpeg 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-768x576.jpeg 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-1536x1152.jpeg 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18-1200x900.jpeg 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/WhatsApp-Image-2021-05-15-at-21.14.18.jpeg 1600w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>The second page of our storyboard.<\/figcaption><\/figure>\n\n\n\n<p><strong>Reflexion<\/strong><\/p>\n\n\n\n<p><strong>Wer hat welchen Beitrag geleistet?<\/strong><\/p>\n\n\n\n<p> Wir haben in Gruppenarbeit die Aufgaben bearbeitet, also haben wir alle zusammen bearbeitet.  Da wir f\u00fcr alles shared documents verwendet haben, konnten wir so gut gemeinsam Texte schreiben und das Moodboard, den Task flow erstellen. So haben wir sichergestellt, dass wirklich immer alle ihre Ideen mit einflie\u00dfen lassen konnten. F\u00fcr die individuellen Aufgaben haben wir uns jeweils einen Tag Zeit gelassen und uns dann erneut getroffen, um die Ergebnisse zu besprechen. Wir hatten uns entschlossen, dass Ina das Storyboard zeichnet, da wir das Layout am vielsagensten fanden. Wir haben davor besprochen, wie das Storyboard aussehen soll und sie hat nach der Fertigstellung es nochmal mit uns besprochen, sodass wir noch kleinere \u00c4nderungen zusammen umsetzen konnten.<\/p>\n\n\n\n<p><strong>Was habt ihr gelernt?<\/strong><\/p>\n\n\n\n<p>Wir haben unser Wissen \u00fcber die Darstellung von Task Flows mit BPMN vertieft. Au\u00dferdem haben wir gelernt, unsere Idee auf die wesentlichen Aspekte runterzubrechen, damit sowohl der Task Flow als auch das Storyboard auf eine klare (und im Fall des Storyboards sehr bildliche) Weise die Funktionen unseres Projekts darstellt.<\/p>\n\n\n\n<p><strong>Was lief gut?<\/strong><\/p>\n\n\n\n<p>Da wird diesmal erst individuelle Ans\u00e4tze erarbeiten mussten f\u00fcr das Moodboard und die Sketches, mussten wir diese schlie\u00dflich auch gegenseitig beurteilen um auf gemeinsame Nenner zu kommen. Das lief sehr gut, da wir alle sehr konstruktive Kritik gegeben haben, die unsere Idee weitergebracht hat.<\/p>\n\n\n\n<p><strong>Was m\u00f6chtet ihr verbessern?<\/strong><\/p>\n\n\n\n<p>Wir haben erst bei dem gemeinsamen Treffen uns die Aufgaben durchgelesen und gesehen, dass individuelle Arbeit n\u00f6tig ist. Deshalb f\u00e4nden wir es hilfreich, wenn wir die Aufgabe schon vorher durchlesen w\u00fcrden in Zukunft, um m\u00f6gliche individuelle Arbeit schon vorher zu erledigen und sie so direkt besprechen zu k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem and hypothesis statement PROBLEM STATEMENT Max needs a way to easily choose board games online with his friends because they changed their board game nights to remote board game nights because of the pandemic and are not very accustomed to the online board games. We will know this to be true when we see: &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/05\/15\/a4-p8-ideation-and-storyboard\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A#4, P8] Ideation and Storyboard\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6161,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[384608,395141,400188],"tags":[],"class_list":["post-1071","post","type-post","status-publish","format-standard","hentry","category-projekt-8","category-week-4","category-assignment-4"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/users\/6161"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1071"}],"version-history":[{"count":8,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":1092,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1071\/revisions\/1092"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}