{"id":285,"date":"2023-04-09T22:23:39","date_gmt":"2023-04-09T22:23:39","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/experience-x\/?page_id=285"},"modified":"2023-04-09T22:28:31","modified_gmt":"2023-04-09T22:28:31","slug":"phase-3-high-fi-and-2nd-playtest","status":"publish","type":"page","link":"https:\/\/projects.etc.cmu.edu\/experience-x\/phase-3-high-fi-and-2nd-playtest\/","title":{"rendered":"Phase 3: High-fi and 2nd playtest"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Based on the takeaways from the 1st playtest, the design team started to create the first version of the prototype to do more playtests for the implementation after halves.<\/p>\n\n\n\n<p class=\"has-secondary-color has-text-color has-large-font-size wp-block-paragraph\"><strong>Design principles<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our design approach for the first high-fi prototype focused on two key aspects: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Testing the visual style&#8217;s ability to connect people to the ETC culture and assessing the viability of the visual components in the kiosk. <\/li>\n\n\n\n<li>The use of black and orange colors conveys a futuristic technology vibe, reflecting ETC&#8217;s cutting-edge approach.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">To organize the information in the kiosk, we divided it into two parts: <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"714\" style=\"aspect-ratio: 1266 \/ 714;\" width=\"1266\" controls src=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Untitled-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Left side:<\/strong> an information panel showing text info about project, hardwares and ETC info<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation.jpg\" alt=\"\" class=\"wp-image-290\" srcset=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation.jpg 960w, https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-300x169.jpg 300w, https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-768x432.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Right side<\/strong>: a 3D model with color codes representing different rooms<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-1.jpg\" alt=\"\" class=\"wp-image-291\" srcset=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-1.jpg 960w, https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-1-300x169.jpg 300w, https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/Experience-x-1_2-presentation-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These two sides are interconnected, enabling users to interact with the kiosk in a more intuitive way. For example, clicking on a button on the right side can trigger changes in the appearance of the 3D model.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-zoooom\"><img loading=\"lazy\" decoding=\"async\" width=\"1266\" height=\"714\" src=\"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-content\/uploads\/2023\/04\/a1de6a57-fe6e-433f-bf8c-8e393674a79a.gif\" alt=\"\" class=\"wp-image-292\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Our goal with this design was to create an engaging and immersive experience for users that would reflect ETC&#8217;s innovative spirit. We believe that our design approach will help us achieve that goal and provide valuable insights for further iterations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-secondary-color has-text-color has-large-font-size wp-block-paragraph\"><strong>Second playtest<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Playtest Participants:<\/strong> CMU students and ETC faculties<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Goal:<\/strong> The goal of the second playtest was to evaluate if the visual style, components, and layout of the interface helped users gain a better understanding of ETC&#8217;s work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Feedback:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>10\/10<\/strong> participants enjoyed interacting with the 3D model<\/li>\n\n\n\n<li><strong>5\/10 <\/strong>participants expressed frustration with the difficulty of finding connections between the right and left sides of the interface<\/li>\n\n\n\n<li><strong>6\/10<\/strong> participants requested that all buttons be implemented to demonstrate full functionality since it was only a Figma prototype<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Based on the takeaways from the 1st playtest, the design team started to create the first version of the prototype to do more playtests for the implementation after halves. Design principles Our design approach for the first high-fi prototype focused on two key aspects: To organize the information in the kiosk, we divided it into [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-285","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/pages\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":4,"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/pages\/285\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/experience-x\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}