{"id":241,"date":"2026-03-20T18:00:00","date_gmt":"2026-03-20T22:00:00","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/?p=241"},"modified":"2026-03-27T20:34:35","modified_gmt":"2026-03-28T00:34:35","slug":"devlog-week9","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/devlog-week9\/","title":{"rendered":"Week 9 &#8211; Creating the A\/B Tests for Navigation"},"content":{"rendered":"\n<p>This week, after 5 of the teammates returned from GDC, it&#8217;s time to mock-up our final gameplay! <\/p>\n\n\n\n<p>From last week&#8217;s game design in Pittsburgh, we got a final scheme to build up the full game structure. Our goal this week, is then to gray-box everything.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The structure in detail<\/h2>\n\n\n\n<p>What is our game structure? Essentially, our main character Naiad, losing consciousness, in her ghost from, navigates loose structures of a  hub-like space that gains access to both the spaceship and metaphorical realms. In the spaceship, she would collect items from an extended space from the picture frames depicting both hers and the earth&#8217;s pasts, and in the end, having unlocked inaccessible areas through the items collected, she would enter the final stage, where her relationship with the items and the other character (the robot) gains its emotional climax. <\/p>\n\n\n\n<p>The great thing about having things in the current structure is that it allows for emotional storytelling moments &#8211; each item, each frame, and even the character exploration, deepens the players&#8217; understanding and relationship of the characters and story. <\/p>\n\n\n\n<p>This week, we refined the ending so it fit more tightly with the hub structure, so that the final experience development could be motivated by that ending, instead of the ending emerging from the development, which would be much less intentional in design, a stray from our goal to utilize our medium well.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a57227187b33&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a57227187b33\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2502\" height=\"1695\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10.png\" alt=\"\" class=\"wp-image-1207\" srcset=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10.png 2502w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10-300x203.png 300w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10-1024x694.png 1024w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10-768x520.png 768w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10-1536x1041.png 1536w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-10-2048x1387.png 2048w\" sizes=\"auto, (max-width: 2502px) 100vw, 2502px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A\/B Testing<\/h2>\n\n\n\n<p>The team is enthusiastic and excited to build up this structure, so we can focus on polishing it as fast as possible. However, while building the navigation mechanic, where the main character moves around in our defined space, we felt the need to explore two drastically different ideas. It&#8217;s sort of like the two ends of a spectrum. Our hypothesis is: once we test the two in full, we&#8217;ll get an understanding of what balance of connection and rotation, as long as the amount of controller and display phones, would be best for our intended players.<\/p>\n\n\n\n<p>Prototype A: This focuses on <strong>rotation<\/strong> as the base mechanic, where phones act as controllers to the display phone, and alter some state it has. Here, one controller phone controls the orientation of the display phone&#8217;s camera, and a second controller phone dictates the zoom (only certain items are zoomable). Upon zooming in on an item of interest, a picture frame puzzle moment or a narrative focal point moment would be triggered. Connection is not abandoned, but is used to connection picture frames, instead of extend the space. (Yet!) We realized this never allows for change of controller \/ display phones, as the main content will stay on one phone. We also realized that this currently does not showcase the wow factor of seams blending together. However, this solves a core problem we had from our before-halves prototype &#8212; <strong>the player action is now much less choreographed<\/strong>, instead of us fixing their pinching order, the interactions with the contents on the phone is much more fluid. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/drive.google.com\/file\/d\/17kaGL8mi3M3yhWMgY3CuGOz875oYk7Ks\/view?usp=sharing\"><\/video><\/figure>\n\n\n\n<p>Prototype B: This focuses on <strong>connection<\/strong> as the base mechanic. It takes inspiration from our pre-halves prototype, where scene extends through connecting a display phone with a controller phone via a pinch gesture. What is interesting is, upon the connected phones, if you pivot the controller phone, it zooms into the item of interest, and opens up the picture frame puzzle moments. This felt safe for the team, because it utilized things we had more extensively explore from before, including a scene extension and possibility for parallax zoom. However, it never solves our main problem of choreographed movements. Regardless, it is very crucial that we playtest this with the other, so that we can see which ones players respond to!<\/p>\n\n\n\n<figure class=\"wp-block-video\"><\/figure>\n\n\n\n<p>We&#8217;ll test this on Tuesday first, and see how this will push the mechanics. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How does item collection work?<\/h2>\n\n\n\n<p>On the other hand, with the main navigation structure being built rigorously, there is further deepening of how items and the navigation fit together. One thing established was that, item collection cannot work without story, as narrative dictates the significance of the items and how it can be interacted with, as well as navigation, since they will ultimately all use the phones as mechanics, building a unified mental model of the rules of the system. Upon this, there has been explorations in the item collections and here is a first proposal that got the team extremely excited to the point we believe this might be our final meat of the puzzle experience!!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a57227189306&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a57227189306\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"978\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-12-1024x978.png\" alt=\"\" class=\"wp-image-1214\" srcset=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-12-1024x978.png 1024w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-12-300x286.png 300w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-12-768x733.png 768w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-12.png 1482w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>While we have debated how much the players need to know that they are feeling collecting, or if that collection became automatic so they focus on navigation and puzzle solving more, we viewed it as a spectrum as well. A least elegant way is to have an active inventory with slots to fill in, while if we don&#8217;t have any visible inventory space, the collection becomes automatic, which is also not as elegant as we want.<\/p>\n\n\n\n<p>However, this scheme on the left depicting an ideal state of the final most complicated puzzle right before the ending, is where 3 phones act as displays with a final phone as a main display. If items are yet to be collected, then the phones stay as display. If they are collected (the colorful dots), animation transitions the phones to a controller, and they can interact with the main display the same way we have taught them when they first collected the items, a mechanic we call one-to-one key-lock interaction.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To give a broader view of how the items keys and environmental locks related to each other, here&#8217;s a color coded diagram of how we understand the game structure.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Key1, or the Earth magnet, opens Lock1, the Sky puzzle, which transform to a locked gate (door), essentially Lock2. The key and lock can be navigated to from the hub.<\/li>\n\n\n\n<li>Going back to the hub, the ship now contains more items, and you collect Key3-1, Key3-2, Key3-3 to open a compound Lock3 in the Eye of the robot puzzle, which yield the final item to open up the original Lock2.<\/li>\n\n\n\n<li>One thing interesting is how K1-L1 navigation essentially serves as a level1, or even tutorial level for our game, and further development can deepen the differences for a more profound emotional gameplay.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5722718a38d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5722718a38d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1296\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-scaled.png\" alt=\"\" class=\"wp-image-1216\" srcset=\"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-scaled.png 2560w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-300x152.png 300w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-1024x519.png 1024w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-768x389.png 768w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-1536x778.png 1536w, https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-content\/uploads\/2026\/03\/image-13-2048x1037.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other development<\/h2>\n\n\n\n<p>3D art is blocking out the scene and narrative deepened the individual moments!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>Next Tuesday, the team would have a first playtest of this functional gray-boxed space, and it will prepare us to polish our experience for Saturday&#8217;s Playtest Day! Stay tuned.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week, after 5 of the teammates returned from GDC, it&#8217;s time to mock-up our final gameplay! From last week&#8217;s game design in Pittsburgh, we got a final scheme to build up the full game structure. Our goal this week, is then to gray-box everything. The structure in detail What is our game structure? Essentially, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry","category-devlogs"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":13,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":1236,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/posts\/241\/revisions\/1236"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/big-picture-studio\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}