{"id":172,"date":"2022-10-03T21:59:54","date_gmt":"2022-10-03T21:59:54","guid":{"rendered":"https:\/\/www.andyhartzell.com\/staging\/?page_id=172"},"modified":"2022-11-02T02:45:26","modified_gmt":"2022-11-02T02:45:26","slug":"cookie-baking","status":"publish","type":"page","link":"https:\/\/www.andyhartzell.com\/gallery\/cookie-baking\/","title":{"rendered":"Cookie Baking"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Baking\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SOpyNFtlZT4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Kinoo was founded to bring grandparents and grandchildren together across distance through play. The design challenge was double: we were tasked with creating activities that preschool children would love, that would also provide meaningful engagement for their older loved-ones. Kinoo was an iOS app, but we couldn\u2019t count on familiarity with the mechanics of touch-screen interaction: some of our users (both young and old) would be new to app-based game-play.&nbsp;<\/p>\n\n\n\n<p>To compound the challenge, Kinoo threw in an additional piece of hardware. While Grandma interacted with the touchscreen via taps and swipes, her progeny interacted by gesturing with a bluetooth-connected wand. Each activity thus had to synthesize two very different types of input.&nbsp;<\/p>\n\n\n\n<p>Given this novel interaction system, our first task was to find a form for it, one which would make it legible\u2013and ideally irresistible\u2013for our players. Our ultimate goal, of course, was to make the interface, and the technology behind it, disappear. Even the activity itself would be merely a means to an end. Like any familiar family game or ritual, it was a focal point around which players might make conversation, habits and memories.<\/p>\n\n\n\n<p>A cookie-baking activity was the natural first choice: preparing food together has always been a prime way for different generations to bond. We wouldn\u2019t be able to deliver the sensory payoff of the IRL experience, but we were careful not to deviate from the tried-and-true Toll House recipe. We knew that some of our players would treat the virtual experience as a dry-run for the real thing.<\/p>\n\n\n\n<div class=\"wp-block-envira-envira-gallery\"><div id=\"envira-gallery-wrap-351\" class=\"envira-gallery-wrap envira-gallery-theme-base envira-lightbox-theme-base\" itemscope itemtype=\"https:\/\/schema.org\/ImageGallery\"><div style=\"opacity: 0.0\"  data-row-height=\"150\" data-gallery-theme=\"normal\" id=\"envira-gallery-351\" class=\"envira-gallery-public envira-gallery-justified-public envira-gallery-0-columns envira-clear enviratope envira-gallery-css-animations\" data-envira-columns=\"0\"><div id=\"envira-gallery-item-347\" class=\"envira-gallery-item enviratope-item envira-gallery-item-1 envira-lazy-load\" style=\"padding-left: 1px; padding-bottom: 1px; padding-right: 1px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01.png\" class=\"envira-gallery-351 envira-gallery-link\" rel=\"enviragallery351\" title=\"Gesture Prompt Strategy (1 of 4)\" data-envira-caption=\"Gesture Prompt Strategy (1 of 4)\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><img decoding=\"async\" id=\"envira-gallery-image-347\" class=\"envira-gallery-image envira-gallery-image-1 envira-normal envira-lazy\" data-envira-index=\"1\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01-315x1024-640x480.png\" data-envira-src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01-315x1024-640x480.png\" data-envira-gallery-id=\"351\" data-envira-item-id=\"347\" data-envira-caption=\"Gesture Prompt Strategy (1 of 4)\" alt=\"\" title=\"Gesture Prompt Strategy (1 of 4)\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01-315x1024-640x480.png 400w,https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01-315x1024-640x480.png 2x\" data-envira-width=\"92\" data-envira-height=\"300\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-safe-src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/a><\/div><\/div><div id=\"envira-gallery-item-348\" class=\"envira-gallery-item enviratope-item envira-gallery-item-2 envira-lazy-load\" style=\"padding-left: 1px; padding-bottom: 1px; padding-right: 1px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02.png\" class=\"envira-gallery-351 envira-gallery-link\" rel=\"enviragallery351\" title=\"Gesture Prompt Strategy (2 of 4)\" data-envira-caption=\"Gesture Prompt Strategy (2 of 4)\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><img decoding=\"async\" id=\"envira-gallery-image-348\" class=\"envira-gallery-image envira-gallery-image-2 envira-normal envira-lazy\" data-envira-index=\"2\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02-327x1024-640x480.png\" data-envira-src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02-327x1024-640x480.png\" data-envira-gallery-id=\"351\" data-envira-item-id=\"348\" data-envira-caption=\"Gesture Prompt Strategy (2 of 4)\" alt=\"\" title=\"Gesture Prompt Strategy (2 of 4)\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02-327x1024-640x480.png 400w,https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02-327x1024-640x480.png 2x\" data-envira-width=\"96\" data-envira-height=\"300\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-safe-src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/a><\/div><\/div><div id=\"envira-gallery-item-349\" class=\"envira-gallery-item enviratope-item envira-gallery-item-3 envira-lazy-load\" style=\"padding-left: 1px; padding-bottom: 1px; padding-right: 1px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03.png\" class=\"envira-gallery-351 envira-gallery-link\" rel=\"enviragallery351\" title=\"Gesture Prompt Strategy (3 of 4)\" data-envira-caption=\"Gesture Prompt Strategy (3 of 4)\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><img decoding=\"async\" id=\"envira-gallery-image-349\" class=\"envira-gallery-image envira-gallery-image-3 envira-normal envira-lazy\" data-envira-index=\"3\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03-319x1024-640x480.png\" data-envira-src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03-319x1024-640x480.png\" data-envira-gallery-id=\"351\" data-envira-item-id=\"349\" data-envira-caption=\"Gesture Prompt Strategy (3 of 4)\" alt=\"\" title=\"Gesture Prompt Strategy (3 of 4)\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03-319x1024-640x480.png 400w,https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03-319x1024-640x480.png 2x\" data-envira-width=\"94\" data-envira-height=\"300\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-safe-src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/a><\/div><\/div><div id=\"envira-gallery-item-350\" class=\"envira-gallery-item enviratope-item envira-gallery-item-4 envira-lazy-load\" style=\"padding-left: 1px; padding-bottom: 1px; padding-right: 1px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04.png\" class=\"envira-gallery-351 envira-gallery-link\" rel=\"enviragallery351\" title=\"Gesture Prompt Strategy (4 of 4)\" data-envira-caption=\"Gesture Prompt Strategy (4 of 4)\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><img decoding=\"async\" id=\"envira-gallery-image-350\" class=\"envira-gallery-image envira-gallery-image-4 envira-normal envira-lazy\" data-envira-index=\"4\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04-360x1024-640x480.png\" data-envira-src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04-360x1024-640x480.png\" data-envira-gallery-id=\"351\" data-envira-item-id=\"350\" data-envira-caption=\"Gesture Prompt Strategy (4 of 4)\" alt=\"\" title=\"Gesture Prompt Strategy (4 of 4)\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04-360x1024-640x480.png 400w,https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04-360x1024-640x480.png 2x\" data-envira-width=\"105\" data-envira-height=\"300\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-safe-src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/a><\/div><\/div><\/div><\/div><noscript><img decoding=\"async\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_01.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_02.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_03.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/gesturePrompt_04.png\" alt=\"\" \/><\/noscript><\/div>\n\n\n\n<p>We assigned Grandma the role of orchestrating the ingredients, keeping order-of-operations as flexible as possible while still respecting procedural requirements (dry ingredients first!). To the child we gave the active tasks of measuring, pouring, cutting, cracking and stirring. The culminating steps of the process would be accomplished by both parties together: scooping the dough into place, setting it to bake, and munching down the results.<\/p>\n\n\n\n<p>I created placeholder assets and laid out the scene in Adobe Illustrator, then created storyboards in XD. Later I sourced final assets in Shutterstock. Our artists modified the assets to fit the requirements of the design. Some animations were created in Adobe Animate, while others, especially particle animations, were accomplished procedurally in Unity.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27.png\"><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"1024\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-715x1024.png\" alt=\"\" class=\"wp-image-315\" srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-715x1024.png 715w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-210x300.png 210w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-768x1100.png 768w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-1073x1536.png 1073w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27-1431x2048.png 1431w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-27.png 1668w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate.png\"><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"1024\" src=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-715x1024.png\" alt=\"\" class=\"wp-image-316\" srcset=\"https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-715x1024.png 715w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-210x300.png 210w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-768x1100.png 768w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-1073x1536.png 1073w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate-1431x2048.png 1431w, https:\/\/www.andyhartzell.com\/gallery\/wp-content\/uploads\/2022\/10\/Cookie-Baking-OLO-plate.png 1668w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Much of the nuance of the design process lay in tuning the wand gestures. Because we didn\u2019t yet have a true tracking system in place, we had to rely on the peripheral device\u2019s built-in IMU switch as our sole input signal. Fidelity was important, though: if the onscreen animations didn\u2019t approximate the child\u2019s gestures, the illusion of control would be broken. We also had to take into account the variety of inputs: kids would interpret prompts to pour, stir or chop in wildly different ways, especially given that the youngest players would still be mastering basic motor control.&nbsp;<\/p>\n\n\n\n<p>Another nuance: how to cue the actions without interrupting conversation or pulling focus away from the animation. We developed a lexicon of gesture prompts, which we deployed sparingly to keep the action moving along. To address use-cases where the child might be struggling to complete a gesture-based task, we empowered Grandma to discreetly help him succeed.<\/p>\n\n\n\n<p>Finally, we layered on conversion-prompts for Grandma, correlated to the various steps of the cookie-baking process. No mere afterthought, this system was central to Kinoo\u2019s value proposition. Our research had shown that many grandparents struggle to engage preschool-age grandchildren in conversation. Our prompts enabled them to use the actions in the activity as jumping-off places to explore feelings, tell stories and engage in imaginative explorations.<\/p>\n\n\n\n<p>I designed and shipped over a dozen activities for Kinoo, though most didn&#8217;t incorporate the wand. Cookie-baking consistently ranks as Kinoo\u2019s most popular wand-enabled activity, and it helped to inform subsequent activity designs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kinoo was founded to bring grandparents and grandchildren together across distance through play. The design challenge was double: we were tasked with creating activities that preschool children would love, that would also provide meaningful engagement for their older loved-ones. Kinoo was an iOS app, but we couldn\u2019t count on familiarity with the mechanics of touch-screen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/pages\/172"}],"collection":[{"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":9,"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/pages\/172\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/pages\/172\/revisions\/383"}],"wp:attachment":[{"href":"https:\/\/www.andyhartzell.com\/gallery\/wp-json\/wp\/v2\/media?parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}