https://lilyyu.me Lily Peixuan Yu Mon, 02 Mar 2026 21:03:25 +0000 https://lilyyu.me en https://lilyyu.me/Index Fri, 17 Feb 2023 01:51:16 +0000 Lily Peixuan Yu https://lilyyu.me/Index <img width="3111" height="3294" width_o="3111" height_o="3294" data-src="https://freight.cargo.site/t/original/i/b2d0f20b840e6d6dcd2076acf97c79fadb5de42fce8f117980cdeb0b4f10bad2/Asset-8.png" data-mid="168739949" border="0" data-scale="5" data-no-zoom="true" data-icon-mode src="https://freight.cargo.site/w/1000/i/b2d0f20b840e6d6dcd2076acf97c79fadb5de42fce8f117980cdeb0b4f10bad2/Asset-8.png" /> 99px Studio /Lily Peixuan Yu Hey, I’m Lily 🦥 I am a design technologist, &nbsp; &nbsp; &nbsp; &nbsp; a creative coder, &nbsp; &nbsp; &nbsp; &nbsp; a digital media artist, but more importantly, &nbsp; &nbsp; &nbsp; &nbsp; a storyteller 🦋 ︎ &nbsp;&nbsp; About︎&nbsp; &nbsp; LinkedIn︎︎&nbsp; &nbsp; GitHub︎ This site is always a work in progress.Last updated: September 2025. <img width="1728" height="958" width_o="1728" height_o="958" data-src="https://freight.cargo.site/t/original/i/398686812ee6f1f089d1be016f7c29a8d1127e9c93f34b17ce2c224cb352657c/cover.gif" data-mid="223506246" border="0" src="https://freight.cargo.site/w/1000/i/398686812ee6f1f089d1be016f7c29a8d1127e9c93f34b17ce2c224cb352657c/cover.gif" /> Doomsday GlacierA visual journalism story created to raise awareness on the accelerating decline of the Thwaites Glacier <img width="800" height="400" width_o="800" height_o="400" data-src="https://freight.cargo.site/t/original/i/1b97ce1bd6d467e8012b3c46a576c4a4426ed20fa0d9d65f31810a6009724e4d/symplr_CaseStudy_InteractiveKiosk_2-11-ezgif.com-video-to-gif-converter.gif" data-mid="240857482" border="0" src="https://freight.cargo.site/w/800/i/1b97ce1bd6d467e8012b3c46a576c4a4426ed20fa0d9d65f31810a6009724e4d/symplr_CaseStudy_InteractiveKiosk_2-11-ezgif.com-video-to-gif-converter.gif" /> Interactive Kiosk: symplrA multi-device interactive demo that translates a product platform’s capabilities into clear, story-driven journeys for user prospects<img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" data-mid="213055801" border="0" src="https://freight.cargo.site/w/960/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" />Transcending BoundariesAn interactive map that introduces visitors to the many organizations within the vast UN system and the global issues they tackle <img width="4528" height="3019" width_o="4528" height_o="3019" data-src="https://freight.cargo.site/t/original/i/a0a2a3a04b51af142ea3b0c13cdae8b9735ca73d32a5a066215149905efbdfc4/_DSC00347.jpg" data-mid="200171984" border="0" src="https://freight.cargo.site/w/1000/i/a0a2a3a04b51af142ea3b0c13cdae8b9735ca73d32a5a066215149905efbdfc4/_DSC00347.jpg" />Temporal ShadowsA projection-based interactive installation where the audience embodies the flow of time with their shadows <img width="7624" height="5080" width_o="7624" height_o="5080" data-src="https://freight.cargo.site/t/original/i/0cf3989ff30a448ebe43cd9d5778cd974210cd6a584eb4c05c4977a39da6c0eb/Slide-4_3---1.png" data-mid="200173598" border="0" src="https://freight.cargo.site/w/1000/i/0cf3989ff30a448ebe43cd9d5778cd974210cd6a584eb4c05c4977a39da6c0eb/Slide-4_3---1.png" />StickAroundAn AR-based app that sends text and hand-drawn messages by sticking them in people’s homes as post-it notes <img width="2040" height="1444" width_o="2040" height_o="1444" data-src="https://freight.cargo.site/t/original/i/edd66a52662f32d2b80bb8a06c39832f18182879583aa055f9d4d5b01fc6ae7a/Screen-Shot-2023-02-16-at-9.27.29-PM.png" data-mid="168732769" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/edd66a52662f32d2b80bb8a06c39832f18182879583aa055f9d4d5b01fc6ae7a/Screen-Shot-2023-02-16-at-9.27.29-PM.png" />Artificial Stories of the FacesAn artistic inquiry leveraging AI to unveil stereotypes related to physical appearances embedded in movie scripts <img width="1622" height="1112" width_o="1622" height_o="1112" data-src="https://freight.cargo.site/t/original/i/658e29bbdb6f39b89214dc6d7f432bac4594ae7fcdcae5d6147fb2e72ee7799d/Screen_Shot_2021-11-21_at_6.05.07_PM.png" data-mid="215448579" border="0" src="https://freight.cargo.site/w/1000/i/658e29bbdb6f39b89214dc6d7f432bac4594ae7fcdcae5d6147fb2e72ee7799d/Screen_Shot_2021-11-21_at_6.05.07_PM.png" />Dataflies An interactive data visualization illustrating the interconnections between me, my diet, and my emotions <img width="800" height="459" width_o="800" height_o="459" data-src="https://freight.cargo.site/t/original/i/8bc14be5e9e257216ae6f9b9dcf7f2f14197ac39474b5ee86f841b5bca03b075/ScrollCapture2025-10-01at12.38.24-ezgif.com-optimize.gif" data-mid="238909869" border="0" src="https://freight.cargo.site/w/800/i/8bc14be5e9e257216ae6f9b9dcf7f2f14197ac39474b5ee86f841b5bca03b075/ScrollCapture2025-10-01at12.38.24-ezgif.com-optimize.gif" />Standard of FearAn interactive news series exploring the impact of Texas’s abortion bans on communities, health care, and access to care<img width="3456" height="2234" width_o="3456" height_o="2234" data-src="https://freight.cargo.site/t/original/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" data-mid="212730190" border="0" src="https://freight.cargo.site/w/1000/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" /> The Echoes UnheardA web-based interactive storytelling experience that unveils the poetic essence of dialects through the lens of music and personal stories <img width="5840" height="4176" width_o="5840" height_o="4176" data-src="https://freight.cargo.site/t/original/i/206ffd80162772668b4f4042d0ad4f69a1a0dc9e38003f5f5276219efb120b9c/Home---v3-animated-map-with-scrolling.png" data-mid="196185703" border="0" src="https://freight.cargo.site/w/1000/i/206ffd80162772668b4f4042d0ad4f69a1a0dc9e38003f5f5276219efb120b9c/Home---v3-animated-map-with-scrolling.png" />Reimagining Out of Eden WalkA web-based interactive storytelling experience for a slow journalism initiative around humanity, culture, and beyond <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" data-mid="192700648" border="0" src="https://freight.cargo.site/w/1000/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" />YoutopiaAn interactive installation utilizing projection to visualize a shared vision of utopia through collective imagination <img width="1354" height="729" width_o="1354" height_o="729" data-src="https://freight.cargo.site/t/original/i/77058de1adebaccf9ef34269a1fbe058eb312b60d1e8d373e8c87300d9fcf633/Presentation-1.png" data-mid="203690715" border="0" src="https://freight.cargo.site/w/1000/i/77058de1adebaccf9ef34269a1fbe058eb312b60d1e8d373e8c87300d9fcf633/Presentation-1.png" />Community CanvasAn AR-based experience that allows members of a neighborhood community to participate in imagining and designing their common open space<img width="800" height="448" width_o="800" height_o="448" data-src="https://freight.cargo.site/t/original/i/1b4977b98161e9a475d4886fe6b18aa0c27311fc6b5596bff539717e5edd27bf/typing-ezgif.com-crop.gif" data-mid="243393651" border="0" src="https://freight.cargo.site/w/800/i/1b4977b98161e9a475d4886fe6b18aa0c27311fc6b5596bff539717e5edd27bf/typing-ezgif.com-crop.gif" />Typing...A minimalist WASD-driven game that invites players to generate letters by rolling a die, turning chance and movement into a playful word-puzzle experience Go to top︎ https://lilyyu.me/Interactive-Graphics Mon, 02 Mar 2026 21:03:25 +0000 Lily Peixuan Yu https://lilyyu.me/Interactive-Graphics <img width="3111" height="3294" width_o="3111" height_o="3294" data-src="https://freight.cargo.site/t/original/i/b2d0f20b840e6d6dcd2076acf97c79fadb5de42fce8f117980cdeb0b4f10bad2/Asset-8.png" data-mid="245543036" border="0" data-scale="5" data-no-zoom="true" data-icon-mode src="https://freight.cargo.site/w/1000/i/b2d0f20b840e6d6dcd2076acf97c79fadb5de42fce8f117980cdeb0b4f10bad2/Asset-8.png" /> Lily Peixuan Yu Hey, I’m Lily 🦥 I am a design technologist, &nbsp; &nbsp; &nbsp; &nbsp; a creative coder, &nbsp; &nbsp; &nbsp; &nbsp; a digital media artist, but more importantly, &nbsp; &nbsp; &nbsp; &nbsp; a storyteller 🦋 ︎ &nbsp;&nbsp; About︎&nbsp; &nbsp; LinkedIn︎︎&nbsp; &nbsp; GitHub︎ This site is always a work in progress.Last updated: November 2025. <img width="1728" height="958" width_o="1728" height_o="958" data-src="https://freight.cargo.site/t/original/i/398686812ee6f1f089d1be016f7c29a8d1127e9c93f34b17ce2c224cb352657c/cover.gif" data-mid="245543068" border="0" src="https://freight.cargo.site/w/1000/i/398686812ee6f1f089d1be016f7c29a8d1127e9c93f34b17ce2c224cb352657c/cover.gif" /> Doomsday GlacierA visual journalism story created to raise awareness on the accelerating decline of the Thwaites Glacier <img width="872" height="460" width_o="872" height_o="460" data-src="https://freight.cargo.site/t/original/i/407661c1ec30505b0a042a3c91c328e161fbdebe9c614ae39a7270b7824997e9/Screenshot-2026-03-02-at-1.11.53PM-1.png" data-mid="245543247" border="0" src="https://freight.cargo.site/w/872/i/407661c1ec30505b0a042a3c91c328e161fbdebe9c614ae39a7270b7824997e9/Screenshot-2026-03-02-at-1.11.53PM-1.png" /> Women on the Ballot, Women in the HouseA graphics clip about the gender gains and gaps in Singapore’s Parliament <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" data-mid="245543065" border="0" src="https://freight.cargo.site/w/960/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" />Transcending BoundariesAn interactive map that introduces visitors to the many organizations within the vast UN system and the global issues they tackle <img width="2040" height="1444" width_o="2040" height_o="1444" data-src="https://freight.cargo.site/t/original/i/edd66a52662f32d2b80bb8a06c39832f18182879583aa055f9d4d5b01fc6ae7a/Screen-Shot-2023-02-16-at-9.27.29-PM.png" data-mid="245543031" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/edd66a52662f32d2b80bb8a06c39832f18182879583aa055f9d4d5b01fc6ae7a/Screen-Shot-2023-02-16-at-9.27.29-PM.png" />Artificial Stories of the FacesAn artistic inquiry leveraging AI to unveil stereotypes related to physical appearances embedded in movie scripts <img width="1622" height="1112" width_o="1622" height_o="1112" data-src="https://freight.cargo.site/t/original/i/658e29bbdb6f39b89214dc6d7f432bac4594ae7fcdcae5d6147fb2e72ee7799d/Screen_Shot_2021-11-21_at_6.05.07_PM.png" data-mid="245543067" border="0" src="https://freight.cargo.site/w/1000/i/658e29bbdb6f39b89214dc6d7f432bac4594ae7fcdcae5d6147fb2e72ee7799d/Screen_Shot_2021-11-21_at_6.05.07_PM.png" />Dataflies An interactive data visualization illustrating the interconnections between me, my diet, and my emotions <img width="800" height="400" width_o="800" height_o="400" data-src="https://freight.cargo.site/t/original/i/1b97ce1bd6d467e8012b3c46a576c4a4426ed20fa0d9d65f31810a6009724e4d/symplr_CaseStudy_InteractiveKiosk_2-11-ezgif.com-video-to-gif-converter.gif" data-mid="245543070" border="0" src="https://freight.cargo.site/w/800/i/1b97ce1bd6d467e8012b3c46a576c4a4426ed20fa0d9d65f31810a6009724e4d/symplr_CaseStudy_InteractiveKiosk_2-11-ezgif.com-video-to-gif-converter.gif" /> Interactive Kiosk: symplrA multi-device interactive demo that translates a product platform’s capabilities into clear, story-driven journeys for user prospects <img width="800" height="459" width_o="800" height_o="459" data-src="https://freight.cargo.site/t/original/i/8bc14be5e9e257216ae6f9b9dcf7f2f14197ac39474b5ee86f841b5bca03b075/ScrollCapture2025-10-01at12.38.24-ezgif.com-optimize.gif" data-mid="245543069" border="0" src="https://freight.cargo.site/w/800/i/8bc14be5e9e257216ae6f9b9dcf7f2f14197ac39474b5ee86f841b5bca03b075/ScrollCapture2025-10-01at12.38.24-ezgif.com-optimize.gif" />Standard of FearAn interactive news series exploring the impact of Texas’s abortion bans on communities, health care, and access to care<img width="3456" height="2234" width_o="3456" height_o="2234" data-src="https://freight.cargo.site/t/original/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" data-mid="245543064" border="0" src="https://freight.cargo.site/w/1000/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" /> The Echoes UnheardA web-based interactive storytelling experience that unveils the poetic essence of dialects through the lens of music and personal stories <img width="5840" height="4176" width_o="5840" height_o="4176" data-src="https://freight.cargo.site/t/original/i/206ffd80162772668b4f4042d0ad4f69a1a0dc9e38003f5f5276219efb120b9c/Home---v3-animated-map-with-scrolling.png" data-mid="245543049" border="0" src="https://freight.cargo.site/w/1000/i/206ffd80162772668b4f4042d0ad4f69a1a0dc9e38003f5f5276219efb120b9c/Home---v3-animated-map-with-scrolling.png" />Reimagining Out of Eden WalkA web-based interactive storytelling experience for a slow journalism initiative around humanity, culture, and beyond<img width="1354" height="729" width_o="1354" height_o="729" data-src="https://freight.cargo.site/t/original/i/77058de1adebaccf9ef34269a1fbe058eb312b60d1e8d373e8c87300d9fcf633/Presentation-1.png" data-mid="245543062" border="0" src="https://freight.cargo.site/w/1000/i/77058de1adebaccf9ef34269a1fbe058eb312b60d1e8d373e8c87300d9fcf633/Presentation-1.png" />Community CanvasAn AR-based experience that allows members of a neighborhood community to participate in imagining and designing their common open space<img width="800" height="448" width_o="800" height_o="448" data-src="https://freight.cargo.site/t/original/i/1b4977b98161e9a475d4886fe6b18aa0c27311fc6b5596bff539717e5edd27bf/typing-ezgif.com-crop.gif" data-mid="245543071" border="0" src="https://freight.cargo.site/w/800/i/1b4977b98161e9a475d4886fe6b18aa0c27311fc6b5596bff539717e5edd27bf/typing-ezgif.com-crop.gif" />Typing...A minimalist WASD-driven game that invites players to generate letters by rolling a die, turning chance and movement into a playful word-puzzle experience Go to top︎ https://lilyyu.me/Reimagining-Out-of-Eden-Walk Mon, 06 Nov 2023 20:46:48 +0000 Lily Peixuan Yu https://lilyyu.me/Reimagining-Out-of-Eden-Walk Reimagining Out of Eden Walk #Interactive Storytelling&nbsp; &nbsp; #Visual Journalism&nbsp; &nbsp; #UX Research&nbsp; &nbsp; #UX Design&nbsp; &nbsp; #National Geographic <img width="5840" height="4176" width_o="5840" height_o="4176" data-src="https://freight.cargo.site/t/original/i/0992c50b9794c55f617e6d6f51955ec30cca576921122b40ffff914ab89730f9/Home---v3-animated-map-with-scrolling.png" data-mid="196081650" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/0992c50b9794c55f617e6d6f51955ec30cca576921122b40ffff914ab89730f9/Home---v3-animated-map-with-scrolling.png" /> “Out of Eden Walk (OOEW) is a years-long journalistic expedition through which National Geographic Fellow Paul Salopek is walking the globe, retracing the pathways of human origins from Africa to South America. This 24,000 mile odyssey is an exercise in slow journalism, allowing Paul to report the major stories of our time holistically by slowing down to walking speed to share the full context and voices of local people behind the headlines. Paul’s words, as well as his photographs, video, and audio, are creating a global record of human life at the start of a new millennium.” OOEW is National Geographic‘s longest standing project with a global following and has a legacy of followers from other platforms like Reddit. The project continues and has many years to go, but the current website, pioneering when built, runs on an outdated platform. During my internship at National Geographic Society, I reimagined the OOEW website with more current storytelling and interaction approaches using UX research and design methodologies. TimelineInternship Period: June - August 2023 ToolsDesign &amp; Prototyping: Figma, ProcreateWeb Analytics: Heap Collaboraters Project ManagerStakeholdersContent Editors/Managers My Role: Research:&nbsp;Conducted stakeholder interviews to gather project requirements and insights; Performed comparative analysis to evaluate design approaches and best practices.Design &amp; Prototyping: Created iterative designs based on feedback; Developed interactive prototypes to visualize design solutionsFinal Work Share-out: Presented and shared final work with stakeholders, including the CEO, to gather feedback and ensure alignment. 00. Final Work Preview 01. Identifying Opportunities a. Contextual AnalysisI began the research process by analyzing program-related documents to gain a comprehensive understanding of the context. This involved reviewing background information, goals, and existing frameworks associated with the OOEW project. By extracting key terms and themes from these documents, I established a foundational understanding of the project's scope and identified several initial considerations for the UX design phase. This preliminary assessment served as a guiding framework, helping to shape design decisions and focus on critical areas that would enhance user experience. <img width="5535" height="3342" width_o="5535" height_o="3342" data-src="https://freight.cargo.site/t/original/i/9e91a61d9cba915272f6b113a0d3afb42dbe3626087b6818a4887722d7b9232b/keywords_extraction1.png" data-mid="213742199" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/9e91a61d9cba915272f6b113a0d3afb42dbe3626087b6818a4887722d7b9232b/keywords_extraction1.png" /> <img width="590" height="681" width_o="590" height_o="681" data-src="https://freight.cargo.site/t/original/i/cf18fb9a8d3a6d97c3c69b4fe5c8ac42ef0f4c30d9b3e6a7010f0daa92932e37/keywords_extraction2.png" data-mid="213742201" border="0" data-scale="3" src="https://freight.cargo.site/w/590/i/cf18fb9a8d3a6d97c3c69b4fe5c8ac42ef0f4c30d9b3e6a7010f0daa92932e37/keywords_extraction2.png" /> . <img width="3775" height="2100" width_o="3775" height_o="2100" data-src="https://freight.cargo.site/t/original/i/cd0b6f7ef6ef0e886dab2b048e55f6ceeb58166ed3364eecf6fe96e939c18552/keywords_extraction3.png" data-mid="213742302" border="0" data-scale="50" src="https://freight.cargo.site/w/1000/i/cd0b6f7ef6ef0e886dab2b048e55f6ceeb58166ed3364eecf6fe96e939c18552/keywords_extraction3.png" />b. Stakeholder Interviews To further inform the design process,&nbsp;I engaged with 7 stakeholders through a series of interviews, including Paul Salopek, who initiated the OOEW project, his content editors, National Geographic Storytelling Program Managers, Product Manager, etc. <img width="6912" height="3888" width_o="6912" height_o="3888" data-src="https://freight.cargo.site/t/original/i/f606f31ec6870febdd69f9aad1196e3a0fb0c3d07cc3e6172391872275db1383/interview1.png" data-mid="213757637" border="0" src="https://freight.cargo.site/w/1000/i/f606f31ec6870febdd69f9aad1196e3a0fb0c3d07cc3e6172391872275db1383/interview1.png" /> <img width="6912" height="3880" width_o="6912" height_o="3880" data-src="https://freight.cargo.site/t/original/i/43a13d205fdf17d3806eb23ebb1d8af86c204e0a9b51d0e61c677a61b54bdc1d/interview3.png" data-mid="213757638" border="0" src="https://freight.cargo.site/w/1000/i/43a13d205fdf17d3806eb23ebb1d8af86c204e0a9b51d0e61c677a61b54bdc1d/interview3.png" /> <img width="6912" height="3897" width_o="6912" height_o="3897" data-src="https://freight.cargo.site/t/original/i/6717551773b6c1ab5b8ed92e052e519ea8b7c5da0e2c9144c9d96b246118d2b0/interview2.png" data-mid="213757636" border="0" src="https://freight.cargo.site/w/1000/i/6717551773b6c1ab5b8ed92e052e519ea8b7c5da0e2c9144c9d96b246118d2b0/interview2.png" /> Their input was crucial for refining the identified priorities, ensuring that the UX design aligned with both user needs and stakeholder expectations.&nbsp;Among the various valuable insights gathered, the following were identified as the most critical: <img width="3197" height="149" width_o="3197" height_o="149" data-src="https://freight.cargo.site/t/original/i/8de4b32b139d623ab3488eb00b5585355589808dcf402bba3e0335b07ab1b380/Amplify-Storytelling-through-Experience-Design-.png" data-mid="213758115" border="0" data-scale="59" src="https://freight.cargo.site/w/1000/i/8de4b32b139d623ab3488eb00b5585355589808dcf402bba3e0335b07ab1b380/Amplify-Storytelling-through-Experience-Design-.png" />The platform should be crafted to deeply enhance storytelling, creating immersive and emotionally engaging experiences that captivate and resonate with users. .<img width="2288" height="149" width_o="2288" height_o="149" data-src="https://freight.cargo.site/t/original/i/3a8394d194c1e5d067e994b78494d8049b1d5c524c92aba9c5510bce0fb9e879/Serve-as-a-Robust-Digital-Archive-.png" data-mid="213758114" border="0" data-scale="46" src="https://freight.cargo.site/w/1000/i/3a8394d194c1e5d067e994b78494d8049b1d5c524c92aba9c5510bce0fb9e879/Serve-as-a-Robust-Digital-Archive-.png" />It’s essential for the platform to function as a comprehensive digital repository, facilitating the efficient organization and retrieval of diverse information. <img width="2788" height="149" width_o="2788" height_o="149" data-src="https://freight.cargo.site/t/original/i/9564088c4357b455652479c7d524e7d5c7637e7bd82b89a4512ee7d6815bc744/Integrate-Diverse-Data-Types-Seamlessly-.png" data-mid="213758113" border="0" data-scale="51" src="https://freight.cargo.site/w/1000/i/9564088c4357b455652479c7d524e7d5c7637e7bd82b89a4512ee7d6815bc744/Integrate-Diverse-Data-Types-Seamlessly-.png" />The design should support a broad range of data formats, enabling the effective integration of geo-spatial data, audio recordings, and other multimedia elements to enrich the user experience. c. Site Analysis I conducted a thorough site analysis. This involved evaluating the current site architecture, user interactions, and navigation flows to identify existing challenges and opportunities for improvement. <img width="1761" height="873" width_o="1761" height_o="873" data-src="https://freight.cargo.site/t/original/i/84eadfe5640008849a02eebee177692bb1cf32a2c34130c104927346c4e9e6d6/Frame-614.png" data-mid="213758378" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/84eadfe5640008849a02eebee177692bb1cf32a2c34130c104927346c4e9e6d6/Frame-614.png" /> <img width="1761" height="783" width_o="1761" height_o="783" data-src="https://freight.cargo.site/t/original/i/991b927970972e03354a777058e713368f89e6948373e40d886cae530573a236/Frame-620.png" data-mid="213758379" border="0" src="https://freight.cargo.site/w/1000/i/991b927970972e03354a777058e713368f89e6948373e40d886cae530573a236/Frame-620.png" /> <img width="1778" height="705" width_o="1778" height_o="705" data-src="https://freight.cargo.site/t/original/i/47db513fcfa38ea9c59d5fbb8f440c117593745f2f0f87886637780d1a95b143/Frame-618.png" data-mid="213758380" border="0" src="https://freight.cargo.site/w/1000/i/47db513fcfa38ea9c59d5fbb8f440c117593745f2f0f87886637780d1a95b143/Frame-618.png" /> <img width="1761" height="796" width_o="1761" height_o="796" data-src="https://freight.cargo.site/t/original/i/518fbda775dbe08dce4f13800ce39fc4b32e6420d36d996089c2546c7905ae1b/Frame-616.png" data-mid="213758381" border="0" src="https://freight.cargo.site/w/1000/i/518fbda775dbe08dce4f13800ce39fc4b32e6420d36d996089c2546c7905ae1b/Frame-616.png" /> Major Findings&nbsp;Linear Storytelling ApproachThe current design follows a straightforward, linear storytelling path, which may limit narrative flexibility and user engagement.Complex Information ArchitectureThe existing structure is intricate and convoluted, presenting challenges for users in navigating and accessing information efficiently. d. Comparative Analysis I conducted a comparative analysis by reviewing reference websites to identify trends, approaches, and patterns for interactive storytelling in journalism. This helped to refine strategies for organizing assets and designing interaction patterns that enhance the storytelling experience on the OOEW website. This analysis provided insights into best practices and innovative approaches to elevate user engagement and narrative effectiveness. Comparator Selection CriteriaSelected comparator websites are web-based interactive storytelling projects that:Come from a strong brand for digital journalismCover various types of media and data, including images, video, audio, geo-spatial data, time-series data, etc. <img width="1920" height="842" width_o="1920" height_o="842" data-src="https://freight.cargo.site/t/original/i/b746612266cf49ae528ac8edc88c302696112fd3656e19bd795f6757d25a6f70/Slide-16_9---35.png" data-mid="196674455" border="0" alt="Selected Comparators" data-caption="Selected Comparators" src="https://freight.cargo.site/w/1000/i/b746612266cf49ae528ac8edc88c302696112fd3656e19bd795f6757d25a6f70/Slide-16_9---35.png" /> Major Findings&nbsp;💡“Scrollytelling” as the main interaction approachImmersive while allow for user-led non-linear navigationQualitative visual explainers to break down events chronologically and geographicallySituate audience in the context 02. Research-based Design Insights a. Design GoalsUtilize “scrollytelling” to improve navigationEnhance the integrations of various media/data typesApply geo-spatial data with cartography to contextualize the narrative b. Proposed Architecture <img width="7680" height="2836" width_o="7680" height_o="2836" data-src="https://freight.cargo.site/t/original/i/74ece8c4497e2d17c3394c71dc39e1c67d69ac1528893731bf8b48da75f3e39d/Slide-16_9---13.png" data-mid="196675258" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/74ece8c4497e2d17c3394c71dc39e1c67d69ac1528893731bf8b48da75f3e39d/Slide-16_9---13.png" /> 03. Design Studio a. Wireframing During this stage, I made two iterations of wireframes based on the feedback from stakeholders. <img width="4232" height="2532" width_o="4232" height_o="2532" data-src="https://freight.cargo.site/t/original/i/4dd0249d5f09ccc6b1cc7fe1634f2d848305932582d4bd51e140fbd202ccb4fe/image-12.png" data-mid="196852622" border="0" alt="First Iteration" data-caption="First Iteration" src="https://freight.cargo.site/w/1000/i/4dd0249d5f09ccc6b1cc7fe1634f2d848305932582d4bd51e140fbd202ccb4fe/image-12.png" /> <img width="7680" height="2768" width_o="7680" height_o="2768" data-src="https://freight.cargo.site/t/original/i/22412b1e1e413d7e6098eeaa6e6b4583ceff4a951e00f43eeb0974ffc307c68d/Slide-16_9---71.png" data-mid="196853034" border="0" alt="Second Iteration" data-caption="Second Iteration" src="https://freight.cargo.site/w/1000/i/22412b1e1e413d7e6098eeaa6e6b4583ceff4a951e00f43eeb0974ffc307c68d/Slide-16_9---71.png" /> Summarized Feedback from StakeholdersImprove post discoverabilityHighlight human elements in the storyStrengthen connections between postsEnhance connections between assets b. Prototyping Integrating all the feedback that I received from the two iterations of wireframes, I developed a final prototype. . <img width="5288" height="2740" width_o="5288" height_o="2740" data-src="https://freight.cargo.site/t/original/i/ab37c5e64b0dd5499255d3618ef4df37b192bf44b4405926defa9d4c1a41aef0/image-13.png" data-mid="196859372" border="0" alt="Prototyping in Figma" data-caption="Prototyping in Figma" src="https://freight.cargo.site/w/1000/i/ab37c5e64b0dd5499255d3618ef4df37b192bf44b4405926defa9d4c1a41aef0/image-13.png" /> 04. Final Work . 05. Some Design Decisions “Super Nav”Originally, I followed the current site’s approach of using a dropdown menu with chapter names for navigation. However, inspired by stakeholder feedback emphasizing a need for more contextual and holistic journey insights, I developed a "super nav." This navigation feature offers readers a comprehensive overview of each journey segment, integrating time, location data, and post categories to enhance user understanding and engagement. <img width="5760" height="4096" width_o="5760" height_o="4096" data-src="https://freight.cargo.site/t/original/i/3e737eaa057414f6c8b08f89256683f0652b1d5cfd80465f1395c3a23af51041/Map-States---v1.png" data-mid="196867145" border="0" alt="Original Dropdown Menu" data-caption="Original Dropdown Menu" src="https://freight.cargo.site/w/1000/i/3e737eaa057414f6c8b08f89256683f0652b1d5cfd80465f1395c3a23af51041/Map-States---v1.png" /> <img width="5800" height="4107" width_o="5800" height_o="4107" data-src="https://freight.cargo.site/t/original/i/63af1cdb684024192fff07d29fce7a4e192e6bfcc165a2fd0ef07ad61ac0f5fa/OOEW-Header.png" data-mid="196867146" border="0" alt="New Design for Navigation: &quot;Super Nav&quot;" data-caption="New Design for Navigation: &quot;Super Nav&quot;" src="https://freight.cargo.site/w/1000/i/63af1cdb684024192fff07d29fce7a4e192e6bfcc165a2fd0ef07ad61ac0f5fa/OOEW-Header.png" /> CardsThe initial iteration of post cards is shown on the left below. In the final version, I opted for circular frames for people's images, positioned alongside each card. This design decision aimed to emphasize the human elements of the story. Following Object-Oriented UX principles, which discourage masked objects (where different objects serve distinct purposes), I ensured that each design element was distinct. This approach allowed for a focused presentation of metadata associated with posts across different categories. <img width="1856" height="2316" width_o="1856" height_o="2316" data-src="https://freight.cargo.site/t/original/i/6fe93fd5eee6228238442628f515172a7ec2763b76dedd98dd8f29819196c6f7/Slide-16_9---84.png" data-mid="196875188" border="0" alt="First Iteration" data-caption="First Iteration" src="https://freight.cargo.site/w/1000/i/6fe93fd5eee6228238442628f515172a7ec2763b76dedd98dd8f29819196c6f7/Slide-16_9---84.png" /> <img width="4016" height="3840" width_o="4016" height_o="3840" data-src="https://freight.cargo.site/t/original/i/77835b56d3cd9f19f86ac97f9016bcd711796c187a4214488bda9e48106e728b/Slide-16_9---91.png" data-mid="196867472" border="0" alt="Final Design for Different Types of Posts" data-caption="Final Design for Different Types of Posts" src="https://freight.cargo.site/w/1000/i/77835b56d3cd9f19f86ac97f9016bcd711796c187a4214488bda9e48106e728b/Slide-16_9---91.png" /> 06. Areas for Growth Due to time constraints, I have several unresolved questions and design goals for further exploration: User Research QuestionsDo users who enter sideways get a full picture of the journey?How is the human element perceived?What do users consider as the story’s focal point? Design GoalsCreate an "About" page to unify all OOEW resources.Refine navigation with additional iterations.Develop tooltips and explainers for contextual onboarding.Enhance search UI with recommended keywords and filters.Implement read/unread states for posts to help readers get the latest updates.Improve accessibility for mobile and low-bandwidth users. Acknowledgements Thanks to Luke Miller, Pauline Munga, Mary Finer, the UX Team, the Constituent Products Team from National Geographic Society for the guidance and support.Thanks to Paul Salopek, Julia Payne and Ollie Payne from the OOEW Editorial Team, stakeholders from National Geographic Society‘s Storytelling Programs, Content and Editorial Strategy, Strategic Communications, and Mapping for the insights and feedback. https://lilyyu.me/The-Echoes-Unheard Sun, 09 Jun 2024 00:58:35 +0000 Lily Peixuan Yu https://lilyyu.me/The-Echoes-Unheard The Echoes Unheard #Interactive Storytelling&nbsp; &nbsp; #Slow Journalism&nbsp; &nbsp; #Digital Archive&nbsp; &nbsp; #Spatial Audio&nbsp; &nbsp; #Immersive Soundscape<img width="3456" height="2234" width_o="3456" height_o="2234" data-src="https://freight.cargo.site/t/original/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" data-mid="212550030" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/574091f159f7267f6baf2d3b3b39b38c5f62312bee96d16b3d704c5243c7e497/hero.gif" /> The Echoes Unheard is an immersive web-based interactive experience that explores the poetic essence of dialects through music and personal narratives. Through captivating storytelling, it delves into the cultural richness and emotional depth embedded within various dialects. Timeline February - May 2024 Tools Frontend Development: HTML, CSS, Three.js, Vanilla JavaScriptBackend: Google FirebaseDesign &amp; Modeling: Figma, Blender My Role: Research &amp; Conceptualization:&nbsp;Conducted extensive research to explore the intersection of dialects, music, and personal narrativesContent Production:&nbsp;Produced compelling content that brings forth the poetic and cultural significance of dialectsInteraction Design:&nbsp;Designed interactions to engage users and enhance storytelling immersionDevelopment:&nbsp;Developed the frontend and backend functionalities to ensure seamless user interaction and data management 01. Inspirations &amp; Research My initial inpiration came from Out of Eden Walk (OOEW), a project initiated by Paul Salopek, who is a journalist and an Explorer supported by National Geographic. Paul has been walking around the world, following a historical human migration, for over 10 years, starting from South Africa and currently in China. Along the way, Paul has been writing stories about the journey and the people he has met in this journey. He has also been collecting data in various types, like images, videos, audio, panoramas, geo-locations, etc.&nbsp;&nbsp; <img width="3444" height="2304" width_o="3444" height_o="2304" data-src="https://freight.cargo.site/t/original/i/1f668c33c53b74c129e5e134dcffcf6f1ec876f7859e58a19f91bdb94997c7ce/ooew.png" data-mid="212550998" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/1f668c33c53b74c129e5e134dcffcf6f1ec876f7859e58a19f91bdb94997c7ce/ooew.png" />Out of Eden Walk, Paul Salopek I had the chance to encounter with this project when I was working at Nat Geo, and my job back then was to redesign the website for OOEW, which serves as a digital archive for Paul’s writing and the data he collected. <img width="2443" height="3070" width_o="2443" height_o="3070" data-src="https://freight.cargo.site/t/original/i/df0af781bc852f097f37158378524936f860da46ff5c5ec5c384785428ebf36a/ooew_website.png" data-mid="212551008" border="0" data-scale="39" src="https://freight.cargo.site/w/1000/i/df0af781bc852f097f37158378524936f860da46ff5c5ec5c384785428ebf36a/ooew_website.png" />Out of Eden Walk WebsiteDuring the project, the term “slow journalism” came up very often. It is an approach that Paul took as his practice in OOEW to record the story about people. I personally found it very touching and especially precious in this digital age where almost everything is about the speed.So what exactly is “slow journalism”? <img width="2646" height="1472" width_o="2646" height_o="1472" data-src="https://freight.cargo.site/t/original/i/8ab14012ef5acacd3023598efa4781b28887bbc0d3083898e3e5d157ce6cf78c/IMG_11CC9143BB14-1-1.png" data-mid="212579420" border="0" data-scale="55" src="https://freight.cargo.site/w/1000/i/8ab14012ef5acacd3023598efa4781b28887bbc0d3083898e3e5d157ce6cf78c/IMG_11CC9143BB14-1-1.png" />Slow Journalism, Erik Neveu Erik Neveu, a journalist, defined this term from eight different aspects. Among these, four of them stood out to me the most and later became the guideline for the development of my own project: <img width="1272" height="140" width_o="1272" height_o="140" data-src="https://freight.cargo.site/t/original/i/13ab17cb3dabce8c6882f74144dcb064346ad44fe08f592337a4ed726e61768c/Frame-611.png" data-mid="212585355" border="0" data-scale="20" src="https://freight.cargo.site/w/1000/i/13ab17cb3dabce8c6882f74144dcb064346ad44fe08f592337a4ed726e61768c/Frame-611.png" />Slow journalism has literal slowness in the processes of data collection and story invesigation. <img width="960" height="146" width_o="960" height_o="146" data-src="https://freight.cargo.site/t/original/i/936d5679ef77ac7d21cab853e4a1eb9e4fe444f7b27a730aa114ceaff9398e8e/Frame-610.png" data-mid="212585358" border="0" data-scale="16" src="https://freight.cargo.site/w/960/i/936d5679ef77ac7d21cab853e4a1eb9e4fe444f7b27a730aa114ceaff9398e8e/Frame-610.png" />It is about the community and for the community. <img width="1072" height="148" width_o="1072" height_o="148" data-src="https://freight.cargo.site/t/original/i/75b133b796578ec0aea2fd0ee18a90d0d843729f548d653c299fa716740f04d8/Frame-609.png" data-mid="212585357" border="0" data-scale="17" src="https://freight.cargo.site/w/1000/i/75b133b796578ec0aea2fd0ee18a90d0d843729f548d653c299fa716740f04d8/Frame-609.png" /> It transform its audience into partners and encourage them to respond to and contribute to the stories. <img width="2220" height="149" width_o="2220" height_o="149" data-src="https://freight.cargo.site/t/original/i/1e848fceba3fb695a1d2d8c4c3d418d8b71ee2b9cf042e925203c4e9e2036beb/Frame-608.png" data-mid="212585356" border="0" data-scale="35" src="https://freight.cargo.site/w/1000/i/1e848fceba3fb695a1d2d8c4c3d418d8b71ee2b9cf042e925203c4e9e2036beb/Frame-608.png" /> It focuses on the deep and untold backstage stories. 02. Conceptualization With a deeper understanding of slow journalism in mind, I continued by asking myself: What can I journal about? <img width="2514" height="1914" width_o="2514" height_o="1914" data-src="https://freight.cargo.site/t/original/i/00197399c9bdebc9dbb370c1f0aeca9c65c09bef09c0409c87365151d45c675e/mla.png" data-mid="212581083" border="0" alt="My Little Airport" data-caption="My Little Airport" src="https://freight.cargo.site/w/1000/i/00197399c9bdebc9dbb370c1f0aeca9c65c09bef09c0409c87365151d45c675e/mla.png" /> <img width="1955" height="1220" width_o="1955" height_o="1220" data-src="https://freight.cargo.site/t/original/i/bfd8d4191a28194adf81278b71e63f5f3cf10dc28514e3714a06ff0ed11bc2e5/rainbow.png" data-mid="212581082" border="0" alt="Shanghai Rainbow Chamber Singers" data-caption="Shanghai Rainbow Chamber Singers" src="https://freight.cargo.site/w/1000/i/bfd8d4191a28194adf81278b71e63f5f3cf10dc28514e3714a06ff0ed11bc2e5/rainbow.png" /> As I pondered this question, I started to realize that a lot of my favorite music were songs in dialects that I wasn’t familiar with. For instance, the left image above is one of my favorite bands, My Little Airport. They are from Hong Kong, and naturally, most of their work is in Cantonese. The one on the right is Shanghai Rainbow Chamber Singers. Similarly, a lot of their work is created and performed in Chinese dialects. Despite the unfamiliarity from the languages, these songs are the ones that have been carrying rich personal sentiments for me. I also discovered some common themes in them:<img width="1897" height="1338" width_o="1897" height_o="1338" data-src="https://freight.cargo.site/t/original/i/9c6aef13c6c5f91d8d6ffb45602ca7e21c9fb059cf46a8e619b0c3c49549defa/themes.png" data-mid="212584962" border="0" data-scale="36" src="https://freight.cargo.site/w/1000/i/9c6aef13c6c5f91d8d6ffb45602ca7e21c9fb059cf46a8e619b0c3c49549defa/themes.png" /> Melody is indeed essential as it is the medium that allows these sentimental, poetic, and intimate sensations to flow towards me.&nbsp; However, I came to realize that it was the ambiguity inbetween the familiar and unfamiliar feelings I had for these languages created all these sensations for me. <img width="2423" height="538" width_o="2423" height_o="538" data-src="https://freight.cargo.site/t/original/i/7e4e7c9692fe20c0d08bb91431d93dafe2e989da77807748814fc5e7685affcc/sentimental--poetic--intimate.png" data-mid="212586522" border="0" data-scale="42" src="https://freight.cargo.site/w/1000/i/7e4e7c9692fe20c0d08bb91431d93dafe2e989da77807748814fc5e7685affcc/sentimental--poetic--intimate.png" /> <img width="1390" height="230" width_o="1390" height_o="230" data-src="https://freight.cargo.site/t/original/i/7ffe0db0708161010dd40cade566062490b4ba59cbd86100a51d10911f9e1f32/thesis_wave.gif" data-mid="212586545" border="0" data-scale="65" src="https://freight.cargo.site/w/1000/i/7ffe0db0708161010dd40cade566062490b4ba59cbd86100a51d10911f9e1f32/thesis_wave.gif" /> <img width="1479" height="121" width_o="1479" height_o="121" data-src="https://freight.cargo.site/t/original/i/bc22fb0f9230ad80bdd767721e16029c631febc897081b973d09e555bf682004/unfamiliar---familiar.png" data-mid="212586521" border="0" data-scale="28" src="https://freight.cargo.site/w/1000/i/bc22fb0f9230ad80bdd767721e16029c631febc897081b973d09e555bf682004/unfamiliar---familiar.png" /> Thus, I decided that my focus would be on languages/dialects.&nbsp; I also thought about my experience back in high school. When we were learning ancient Chinese poetry, our teacher would often ask us to read those poems out in a Southern Chinese dialect, as I am personally from the southern part of China. And that is to let us feel the rhythms and rhymes in the poems, because the ancient pronunciations are better preserved in dialects than in the modern mandarin we are speaking nowadays. I began to realize that there is something very poetic and artistic hidden within dialects.&nbsp;Yet, people nowadays tend to see dialects mainly as a tool for daily communication, or even less - Due to the centralization of language and promotion of mandarin, specifically in China, a lot of dialects are being marginalized.&nbsp; Therefore, my goal for this project is to reveal the&nbsp; <img width="1787" height="656" width_o="1787" height_o="656" data-src="https://freight.cargo.site/t/original/i/709e424f730d22ab95fcf14df8cc41a4f6afa434a47d32da674dc8c5a5e863c7/goal.png" data-mid="212655885" border="0" data-scale="33" src="https://freight.cargo.site/w/1000/i/709e424f730d22ab95fcf14df8cc41a4f6afa434a47d32da674dc8c5a5e863c7/goal.png" /> 03. Form Combining the findings from the research and conceptualization processes, I decided on the form that I would take to achieve my goals. I wanted to create a collection/archive of songs that:&nbsp;<img width="1766" height="901" width_o="1766" height_o="901" data-src="https://freight.cargo.site/t/original/i/937b09970c3f2c10ad50a1d3b66a4513444c6ee86ef68b83d710f5a279164136/form.gif" data-mid="212655530" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/937b09970c3f2c10ad50a1d3b66a4513444c6ee86ef68b83d710f5a279164136/form.gif" />In terms of its form, I decided it to be: <img width="3699" height="1502" width_o="3699" height_o="1502" data-src="https://freight.cargo.site/t/original/i/5eb0c4984d0569dc0df2b0c8fb9e8f0883ea355493828e504aefb98993eab045/form2.gif" data-mid="212655022" border="0" data-scale="76" src="https://freight.cargo.site/w/1000/i/5eb0c4984d0569dc0df2b0c8fb9e8f0883ea355493828e504aefb98993eab045/form2.gif" /> Combining the ideas above, this project would be: <img width="5928" height="3970" width_o="5928" height_o="3970" data-src="https://freight.cargo.site/t/original/i/226275974e3eb5fb291a989b438245df115b1ccaf3d5026f8ab6eb4d7cef5a18/form3.png" data-mid="212655493" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/226275974e3eb5fb291a989b438245df115b1ccaf3d5026f8ab6eb4d7cef5a18/form3.png" /> 04. Demo a. Opening &nbsp; As the user enters the website, they will see an opening scene leading them to the experience.&nbsp; Headphones are recommended for spatial audio to work better. There are also instructions on navigation and interactions by keyboard and mouse. By clicking on the boat icon&nbsp;<img width="480" height="480" width_o="480" height_o="480" data-src="https://freight.cargo.site/t/original/i/b83b61e35ea66e632e90b2db6ac32d0d0b28deba8ae320bfe6597dda3bf60275/boat_icon.png" data-mid="212661497" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/480/i/b83b61e35ea66e632e90b2db6ac32d0d0b28deba8ae320bfe6597dda3bf60275/boat_icon.png" />, the user will begin their journey. b. Navigation Once entering the scene, the user will find themselves on a boat in the water, surrounded by islands. Each of these islands represents a song I selected that has special meanings to me. The spatial audio of that song is attached to the island. As the user navigates and moves around, the audio changes based on their direction and distance in relation to the island. The visual representations here like the boat, water, islands, etc., are to create a sense of drifting, being uncertain about where home is, and an always onging search for a sense of belonging. sound on c. Journals When the user chooses one of the islands, they will see some brief introduction to the song, including the song title, the artist, the language/dialect the song is performed in. As they click on the book icon&nbsp;<img width="480" height="480" width_o="480" height_o="480" data-src="https://freight.cargo.site/t/original/i/b64c14c1fd966191fde744dd628e18ca100c1452965fdc76c5021261191691b0/book_icon.png" data-mid="212713857" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/480/i/b64c14c1fd966191fde744dd628e18ca100c1452965fdc76c5021261191691b0/book_icon.png" />, a hand-written journal by me will show up. It tells a personal story between me and this song. The handwriting is in Chinese, and by hovering over the dots next to the text, tooltips for an English translation will appear. sound on d. Audience Contribution There is also another component where the audience are encouraged to contribute to this experience. When clicking on the pen icon&nbsp;<img width="480" height="480" width_o="480" height_o="480" data-src="https://freight.cargo.site/t/original/i/4f0a7ac76487369fd0e30530ecd3f592c1a3e2c33a1eaa56af4e23bb374065bf/pen_icon.png" data-mid="212714627" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/480/i/4f0a7ac76487369fd0e30530ecd3f592c1a3e2c33a1eaa56af4e23bb374065bf/pen_icon.png" />,&nbsp;the user will be encouraged to submit a song that has special meanings to them. They will first see a collection of songs submitted by previous users. By hovering over the song titles, they could read about the stories related to the songs. As they scroll down, there will be a form for them to submit their own song. 05. Tech Stack For development, I used HTML, CSS, and Vanilla JavaScript for 2D interfaces, and Three.js for the 3D environment. I also used Google Firebase to store the data users submitted. <img width="4464" height="2854" width_o="4464" height_o="2854" data-src="https://freight.cargo.site/t/original/i/03c036e40031936fc900c47b8fc412069a40392d1c10a5a94f25f66db60cf572/tech.png" data-mid="212657832" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/03c036e40031936fc900c47b8fc412069a40392d1c10a5a94f25f66db60cf572/tech.png" />System Diagram 06. Future Opportunities&nbsp; This will be an ongoing collection of songs and stories. I hope to keep updating the collection with my personal memories and with the contribution from my audience as well.I hope to experiment with visualizing the data from audience contribution by auto-generating an island when there is a new submission.I am also curious about the opportunity to integrate WebXR, combing spatial audio with a headset to create a more immersive soundscape experience. https://lilyyu.me/Youtopia Wed, 04 Oct 2023 13:32:14 +0000 Lily Peixuan Yu https://lilyyu.me/Youtopia Youtopia #Projection-based&nbsp; &nbsp; #Interactive Installation&nbsp; &nbsp; #Playful Communications for Serious Research &nbsp;&nbsp; #UN SDGs&nbsp; &nbsp;#Collective Opinions&nbsp; &nbsp;#Utopian Thinking <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" data-mid="192703428" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" /> Youtopia is a projection-based interactive installation that visualizes people’s visions on an ideal society. The project is based on an NYU research on children’s social representations of utopian societies. Timeline: February - May 2023 Tools: Arduino, TouchDesigner, Adafruit APDS9960 proximity sensors, laser cutting, projection Exhibition: Spring Show 2023 @NYU ITP Team:&nbsp;Bruce Arthur Jr., Jaxon Wang, Karina Chow, Lily Yu, and Queenie Huang My Role: Concept ideationInteraction designPhysical computingFabrication 01. Ideation &amp; Research We initiated our research by reading through the original research, the novel The Giver that the research was highly relevant to, as well as the 17 UN Sustainable Development Goals (UN SDGs) that the research was based on. Based on our initial understanding of the research, we started with some general ideation to organize our thoughts. We also proceeded to develop a few potential ideas as well as a moodboard. &nbsp;<img width="1730" height="1698" width_o="1730" height_o="1698" data-src="https://freight.cargo.site/t/original/i/eaddecc0feabcce34c0dbc605989220f768c73257866a6b301c2e26dc3c286f0/Screenshot-2023-10-11-at-9.22.54-AM.png" data-mid="193375078" border="0" data-scale="38" src="https://freight.cargo.site/w/1000/i/eaddecc0feabcce34c0dbc605989220f768c73257866a6b301c2e26dc3c286f0/Screenshot-2023-10-11-at-9.22.54-AM.png" /> &nbsp;&nbsp;<img width="1940" height="1650" width_o="1940" height_o="1650" data-src="https://freight.cargo.site/t/original/i/629d16438bb203364eed9d0266a5474a9a1955b9e70098ea63b8cbf9fcc4fe2c/Screenshot-2023-10-11-at-9.55.49-AM.png" data-mid="193377979" border="0" data-scale="44" alt="Idea Conceptualization" data-caption="Idea Conceptualization" src="https://freight.cargo.site/w/1000/i/629d16438bb203364eed9d0266a5474a9a1955b9e70098ea63b8cbf9fcc4fe2c/Screenshot-2023-10-11-at-9.55.49-AM.png" />General Ideation &amp; Conceptualization <img width="2474" height="1640" width_o="2474" height_o="1640" data-src="https://freight.cargo.site/t/original/i/dc55902eba048b289bd0746a56b3e41f171f21738794d13a0f1d87d6019bcf25/Screenshot-2023-10-11-at-9.59.12-AM.png" data-mid="193378266" border="0" data-scale="73" src="https://freight.cargo.site/w/1000/i/dc55902eba048b289bd0746a56b3e41f171f21738794d13a0f1d87d6019bcf25/Screenshot-2023-10-11-at-9.59.12-AM.png" />Moodboard We proceeded with contacting Dr. John Jost, one of the researchers who conducted the study. Luckily, we got the chance to interview him and his kid Elliot, who was also engaged in the research. The meeting helped us understand better their research process and the key messages that the researchers would hope to convey to a larger audience, among which, collective deliberation as a community is essential for a shared society stood out the most to us. Based on our research, we identified our goal and target audience of this experience we would be designing:<img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/05d01205f8e2bc3b76597c844f3e7dfa7468e3b9e15a614f26ac789cb9900669/Conceptual-Package.png" data-mid="195949872" border="0" data-scale="83" src="https://freight.cargo.site/w/960/i/05d01205f8e2bc3b76597c844f3e7dfa7468e3b9e15a614f26ac789cb9900669/Conceptual-Package.png" /> We also developed our conceptual package and presented three potential ideas to our peers and guest critics from the American Museum of Natural History. <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/277ee3c08fbc3b5bc4ea2287a9aceab8e1242eb1c5040b08ff550b703e7d2aae/Conceptual-Package-1.png" data-mid="195951160" border="0" src="https://freight.cargo.site/w/960/i/277ee3c08fbc3b5bc4ea2287a9aceab8e1242eb1c5040b08ff550b703e7d2aae/Conceptual-Package-1.png" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/d0741725051cfaf9cc2772c56d199a054655756b0b848df47a7ccf4c330f4497/Conceptual-Package-2.png" data-mid="195951159" border="0" src="https://freight.cargo.site/w/960/i/d0741725051cfaf9cc2772c56d199a054655756b0b848df47a7ccf4c330f4497/Conceptual-Package-2.png" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/bc91f66e832db931501f622d8fac1ddd67a8ff8cf9e4bb1e5b72b6e1e221d693/Conceptual-Package-3.png" data-mid="195951158" border="0" src="https://freight.cargo.site/w/960/i/bc91f66e832db931501f622d8fac1ddd67a8ff8cf9e4bb1e5b72b6e1e221d693/Conceptual-Package-3.png" /> All three ideas felt strong to the guest critics: they appreciated our attempt to collect data/opinions from the audience and visualize them, as well as the collaborative interactions, which is a representation of how changes in a society happen in real life. They also posed some thought-provoking questions like: For Idea 2, how would we approach the potential issue with copyright/crediting of AI-generated content? For Idea 3, how would we create incentives to prompt the participants in the scavenger hunt? Base on the feedback that we received from our peers and the guest critics, we decided to move forward with the first idea, the interactive city miniature projection. 02. Project Planning We proceeded with creating a schematic package that would help us manage the project development process as well as our budget. <img width="3230" height="767" width_o="3230" height_o="767" data-src="https://freight.cargo.site/t/original/i/8ad45e5f50e639c21acc3904980cb12161d3cde9318b755e61ed74c6b7d51c16/Screenshot-2023-10-04-at-10.34.35-AM.png" data-mid="195955275" border="0" src="https://freight.cargo.site/w/1000/i/8ad45e5f50e639c21acc3904980cb12161d3cde9318b755e61ed74c6b7d51c16/Screenshot-2023-10-04-at-10.34.35-AM.png" />Gantt Chart <img width="5276" height="2972" width_o="5276" height_o="2972" data-src="https://freight.cargo.site/t/original/i/df423e93e72fe37e0c52a28819655222737a45b02c01adee4642ac7f854dca6a/Slide-16_9---1.png" data-mid="195977763" border="0" data-scale="79" src="https://freight.cargo.site/w/1000/i/df423e93e72fe37e0c52a28819655222737a45b02c01adee4642ac7f854dca6a/Slide-16_9---1.png" />User Flow &amp; System Diagram 03. Project Development Paper &amp; Cardboard Prototyping We started with making simple prototypes using paper and cardboard for play testing. This approach was very effective in testing if the flow of the experience and the interactions would help to achieve our project goal.<img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/1534ba41028c76bc87463a4a3a879f0e8854be7d36c6ab716ff5b14dedd595a4/IMG_3206.jpg" data-mid="195977942" border="0" data-scale="29" src="https://freight.cargo.site/w/1000/i/1534ba41028c76bc87463a4a3a879f0e8854be7d36c6ab716ff5b14dedd595a4/IMG_3206.jpg" />&nbsp; <img width="2302" height="3069" width_o="2302" height_o="3069" data-src="https://freight.cargo.site/t/original/i/c6eb45352003429bc95fa8063fb7b6920d511f33f861cbbc0a4e93e40c11f98f/IMG_3385.jpg" data-mid="195977943" border="0" data-scale="27" src="https://freight.cargo.site/w/1000/i/c6eb45352003429bc95fa8063fb7b6920d511f33f861cbbc0a4e93e40c11f98f/IMG_3385.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/9e6afb588ee6c56a8a74ee8c1e99ed2c96b9df03f5f6665263e3c24537346062/IMG_3390.jpg" data-mid="195977944" border="0" data-scale="31" src="https://freight.cargo.site/w/1000/i/9e6afb588ee6c56a8a74ee8c1e99ed2c96b9df03f5f6665263e3c24537346062/IMG_3390.jpg" /> Fabrication After finalizing the design of the city models, we started fabrication using laser cutting.&nbsp; <img width="1512" height="2016" width_o="1512" height_o="2016" data-src="https://freight.cargo.site/t/original/i/a9e6c2d60479b80b4a6e4af4d7dcb8eb2a52a8afd12ba4432159b22f1c8e0f1a/IMG_3540-1.jpg" data-mid="195978782" border="0" src="https://freight.cargo.site/w/1000/i/a9e6c2d60479b80b4a6e4af4d7dcb8eb2a52a8afd12ba4432159b22f1c8e0f1a/IMG_3540-1.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/3fa088977494d0505f18f4ac947aae625680d8faafcc75878ed7b3de71c625d4/IMG_3542.jpg" data-mid="195978397" border="0" src="https://freight.cargo.site/w/1000/i/3fa088977494d0505f18f4ac947aae625680d8faafcc75878ed7b3de71c625d4/IMG_3542.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/1974517ca98eccaa0987282cb5a1325916c6cf77df6fd2b13ec91f2a276a483d/IMG_3703.jpg" data-mid="195978811" border="0" src="https://freight.cargo.site/w/1000/i/1974517ca98eccaa0987282cb5a1325916c6cf77df6fd2b13ec91f2a276a483d/IMG_3703.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/dc82ab4f7be9a55f22b299d41112cfa02cc3a6530e967e00e841013a36b94eba/IMG_3541.jpg" data-mid="195978389" border="0" src="https://freight.cargo.site/w/1000/i/dc82ab4f7be9a55f22b299d41112cfa02cc3a6530e967e00e841013a36b94eba/IMG_3541.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/8e2cfea8a7e357cb4d889bdb3b8e6081164196a108b314c4001efd2494ad1a1f/IMG_3706.jpg" data-mid="195978420" border="0" src="https://freight.cargo.site/w/1000/i/8e2cfea8a7e357cb4d889bdb3b8e6081164196a108b314c4001efd2494ad1a1f/IMG_3706.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/7ae4d791c932a1e4d625660e0e8d8c51152142bc9a67c185e52b129048e460f0/IMG_3634.jpg" data-mid="195978411" border="0" src="https://freight.cargo.site/w/1000/i/7ae4d791c932a1e4d625660e0e8d8c51152142bc9a67c185e52b129048e460f0/IMG_3634.jpg" /> Physical Computing &amp; Projection SetupWith the models ready, we started testing sensors and wiring up circuits. Our original plan was to use the IR Break Beam sensors. However, we found that they were quite finicky to work with, especially when our building models and tokens are not in standard shapes. After struggling to figure out different ways to stabelize the performance of the break beam sensors for a while, we decided to try distance sensors and finally landed on APDS9960 because of its advantage in size. <img width="970" height="728" width_o="970" height_o="728" data-src="https://freight.cargo.site/t/original/i/ab495b533678c300354ff78bfdefa006833a15e43973a66ff836065e09125d75/2168-04.jpg" data-mid="195979632" border="0" alt="IR Break Beam Sensor" data-caption="IR Break Beam Sensor" src="https://freight.cargo.site/w/970/i/ab495b533678c300354ff78bfdefa006833a15e43973a66ff836065e09125d75/2168-04.jpg" /> <img width="970" height="728" width_o="970" height_o="728" data-src="https://freight.cargo.site/t/original/i/46e06f6a090deb9a4270f68959ba05ddd5df8bf9aff4d892317420b81c9b228a/4007-00.jpg" data-mid="195980115" border="0" alt="Ultrasonic Distance Sensor" data-caption="Ultrasonic Distance Sensor" src="https://freight.cargo.site/w/970/i/46e06f6a090deb9a4270f68959ba05ddd5df8bf9aff4d892317420b81c9b228a/4007-00.jpg" /> <img width="3022" height="2266" width_o="3022" height_o="2266" data-src="https://freight.cargo.site/t/original/i/223df0a77b2ba9b8e16cf0affab7b0de0c683c9395db8786c835dc876ae1d3ee/IMG_3683.jpg" data-mid="195979630" border="0" alt="Adafruit APDS9960" data-caption="Adafruit APDS9960" src="https://freight.cargo.site/w/1000/i/223df0a77b2ba9b8e16cf0affab7b0de0c683c9395db8786c835dc876ae1d3ee/IMG_3683.jpg" /> For projection mapping, we used TouchDesigner. We tested the mapping locations with color blocks while creating assets for each of the city models. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/0344ae83c06b818de8b533714bdb1feea3eacb1f983804da07a2025bcef5034d/IMG_3773.jpg" data-mid="195979791" border="0" data-scale="33" src="https://freight.cargo.site/w/1000/i/0344ae83c06b818de8b533714bdb1feea3eacb1f983804da07a2025bcef5034d/IMG_3773.jpg" />&nbsp; &nbsp;<img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/57ff91264c8b126d92f8956de5d122695de25715822b76775f613c7f8abd454b/IMG_3735.jpg" data-mid="195979790" border="0" data-scale="33" src="https://freight.cargo.site/w/1000/i/57ff91264c8b126d92f8956de5d122695de25715822b76775f613c7f8abd454b/IMG_3735.jpg" /> Information Design We also designed the tokens, infographics on the tabletop, and a poster. <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/cf3c41ceb0fa70718a006abb487523012760de7bdfa9d667441eef33b6560a00/DSC09599.JPG" data-mid="196043604" border="0" src="https://freight.cargo.site/w/1000/i/cf3c41ceb0fa70718a006abb487523012760de7bdfa9d667441eef33b6560a00/DSC09599.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/9e433375435b41fa6e7b873d932de392cfa58c9fdfab42d7c488b67aa4533be6/DSC07814.JPG" data-mid="196043562" border="0" src="https://freight.cargo.site/w/1000/i/9e433375435b41fa6e7b873d932de392cfa58c9fdfab42d7c488b67aa4533be6/DSC07814.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/6c30ef315dce88d973c963db87d0e8899bf52c5ac615ea2a03c54d646ad9f256/DSC00708.JPG" data-mid="196043513" border="0" src="https://freight.cargo.site/w/1000/i/6c30ef315dce88d973c963db87d0e8899bf52c5ac615ea2a03c54d646ad9f256/DSC00708.JPG" /> User TestingBefore the final exhibition, we did user testing with our peers and guest critics from the American Museum of Natural History to make sure the overall flow of the experience make sense. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/b4720653a68eea82942539fbb96f5603eaf203e060a002bd3ff467b4c2a397be/361DAB79-F06F-4277-810C-1062299210A9-1.jpeg" data-mid="196044578" border="0" data-scale="61" src="https://freight.cargo.site/w/1000/i/b4720653a68eea82942539fbb96f5603eaf203e060a002bd3ff467b4c2a397be/361DAB79-F06F-4277-810C-1062299210A9-1.jpeg" />Some Fun/Hectic WIP Moments :D <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/98324c26cf038b8cd48dbdd2f5817aaf68965d0908176a58d8638e8623750f08/PXL_20230503_222643775-1.jpg" data-mid="196044925" border="0" src="https://freight.cargo.site/w/1000/i/98324c26cf038b8cd48dbdd2f5817aaf68965d0908176a58d8638e8623750f08/PXL_20230503_222643775-1.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/e79a4746733313d1ca8e35c8e2b2121824f7c0353e6633b1d4067ea7ae9903ee/IMG_3722.jpg" data-mid="196045225" border="0" src="https://freight.cargo.site/w/1000/i/e79a4746733313d1ca8e35c8e2b2121824f7c0353e6633b1d4067ea7ae9903ee/IMG_3722.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/750e4afa651aa335266f496b08bec2f2bec29f1aab1a9d424822d7af5aa6778c/PXL_20230407_214854221.jpg" data-mid="196045227" border="0" src="https://freight.cargo.site/w/1000/i/750e4afa651aa335266f496b08bec2f2bec29f1aab1a9d424822d7af5aa6778c/PXL_20230407_214854221.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/ca360a62e72cf9e2894986d1ee448feab9edcb0bda92ee255284fba0dcf3d068/PXL_20230430_071159587.jpg" data-mid="196044934" border="0" src="https://freight.cargo.site/w/1000/i/ca360a62e72cf9e2894986d1ee448feab9edcb0bda92ee255284fba0dcf3d068/PXL_20230430_071159587.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/a86068ef1d4dafa629af355e0a259abc8b8222e687ef8efb2e8bc98ad2f38252/IMG_3839.jpg" data-mid="196045223" border="0" src="https://freight.cargo.site/w/1000/i/a86068ef1d4dafa629af355e0a259abc8b8222e687ef8efb2e8bc98ad2f38252/IMG_3839.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/3bac6e8d2ec1401b1973a918f37fa713bfc2a86d247e24ce7b9e262ce84b800d/PXL_20230503_085038416.jpg" data-mid="196044930" border="0" src="https://freight.cargo.site/w/1000/i/3bac6e8d2ec1401b1973a918f37fa713bfc2a86d247e24ce7b9e262ce84b800d/PXL_20230503_085038416.jpg" /> 04. Final Work <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" data-mid="192703428" border="0" src="https://freight.cargo.site/w/1000/i/3c1f48cc8f5f248f7a95cc988c82d65daf338cebaa22823211da25791396f231/DSC07926-2.JPG" /><img width="4656" height="3104" width_o="4656" height_o="3104" data-src="https://freight.cargo.site/t/original/i/817522a6521fcfcde99cd854dc46dcc1c7501a8b74c5c35e230679bae400d2ef/DSC09588-2.jpg" data-mid="196056973" border="0" src="https://freight.cargo.site/w/1000/i/817522a6521fcfcde99cd854dc46dcc1c7501a8b74c5c35e230679bae400d2ef/DSC09588-2.jpg" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/e950e694ed7ba2b5d0958405598cdbde179ebf426107f84b3cdee68b1bb9fedb/DSC07930.JPG" data-mid="196056985" border="0" src="https://freight.cargo.site/w/1000/i/e950e694ed7ba2b5d0958405598cdbde179ebf426107f84b3cdee68b1bb9fedb/DSC07930.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/18f6f45f01248c5fb5592a32461ee8ba6252c81568065dcab51daf6bac327ca9/DSC00507.JPG" data-mid="196056978" border="0" src="https://freight.cargo.site/w/1000/i/18f6f45f01248c5fb5592a32461ee8ba6252c81568065dcab51daf6bac327ca9/DSC00507.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/7ba3a69ca8ab6f677b2401b8e787e0bc49ec5b279fa536c7cc8b0df57e992c9a/DSC00457.JPG" data-mid="196056981" border="0" src="https://freight.cargo.site/w/1000/i/7ba3a69ca8ab6f677b2401b8e787e0bc49ec5b279fa536c7cc8b0df57e992c9a/DSC00457.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/2efb7f908ab2ece572fc89009baaf242e01271b9a9b5ea648ccb07beb33ecb08/DSC00541.JPG" data-mid="196056977" border="0" src="https://freight.cargo.site/w/1000/i/2efb7f908ab2ece572fc89009baaf242e01271b9a9b5ea648ccb07beb33ecb08/DSC00541.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/a3e9f5d69f6c69a0a4f0a310c1d5dabef20aad5868c23194b455f9fde8bedf0e/DSC00467.JPG" data-mid="196056980" border="0" src="https://freight.cargo.site/w/1000/i/a3e9f5d69f6c69a0a4f0a310c1d5dabef20aad5868c23194b455f9fde8bedf0e/DSC00467.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/3fbe14c49dc8e5fc8e445bab48b43a830a60cb8040718726f0aab19104978078/DSC07918.JPG" data-mid="196056984" border="0" src="https://freight.cargo.site/w/1000/i/3fbe14c49dc8e5fc8e445bab48b43a830a60cb8040718726f0aab19104978078/DSC07918.JPG" /><img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/5ae68394d3809a37fe3c7bf3f5c00677474d1f941c22ad2289667b317a454a3e/DSC07967.JPG" data-mid="196058578" border="0" src="https://freight.cargo.site/w/1000/i/5ae68394d3809a37fe3c7bf3f5c00677474d1f941c22ad2289667b317a454a3e/DSC07967.JPG" /> https://lilyyu.me/Temporal-Shadows Wed, 27 Dec 2023 04:17:31 +0000 Lily Peixuan Yu https://lilyyu.me/Temporal-Shadows Temporal Shadows#Projection-based&nbsp; &nbsp; #Interactive Installation&nbsp; &nbsp; #Computer Vision&nbsp; &nbsp; #Motion Tracking&nbsp; &nbsp;#OpenFrameworks <img width="4528" height="3019" width_o="4528" height_o="3019" data-src="https://freight.cargo.site/t/original/i/26fddc465a4f73ecd9dc4f9c648c9897f50f6689f956a4d895a08d70249fc3c6/_DSC00347.jpg" data-mid="200171707" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/26fddc465a4f73ecd9dc4f9c648c9897f50f6689f956a4d895a08d70249fc3c6/_DSC00347.jpg" /> Temporal Shadows is a projection-based interactive installation that invites the audience to experience the temporal flow with the play of ephemeral shadows. Within this visual dialogue, the transformative essence of shadows echoes the ever-changing nature of time. As shadows morph, they become personal imprints on the temporal canvas, emphasizing the individual's role in their ongoing narrative. Timeline: November - December 2023 Tools: OpenFrameworks, Xcode, Kinect Exhibition: Winter Show 2023 @NYU ITPNew Year’s Eve Ball 2023 @Brooklyn Art Haus Collaborator:&nbsp;Yi-Chun Lan My Role: Concept ideationInteraction designProgramming Technical Breakdown <img width="1200" height="671" width_o="1200" height_o="671" data-src="https://freight.cargo.site/t/original/i/3364403355b47182462b444769b336ba6c5458efd01eb3bdbe9af3d29e5d511a/setup.png" data-mid="211411440" border="0" alt="Physical Setup" data-caption="Physical Setup" src="https://freight.cargo.site/w/1000/i/3364403355b47182462b444769b336ba6c5458efd01eb3bdbe9af3d29e5d511a/setup.png" />Physical Setup The project utilizes two Kinects for motion tracking, one on the ceiling to track the position of the audience as they walk around in the space, and the other on a stand to capture their silhouette. The data is then passed to OpenFrameworks for graphics processing. A projector mounted on the ceiling projects the visuals onto the floor as shadows. <img width="4168" height="1132" width_o="4168" height_o="1132" data-src="https://freight.cargo.site/t/original/i/b87641e3709dd8a500d12591d74e5c466ffec4508276e9af50c517570ebee247/system.png" data-mid="211411460" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/b87641e3709dd8a500d12591d74e5c466ffec4508276e9af50c517570ebee247/system.png" /> System Diagram “Behind the Scenes” <img width="800" height="517" width_o="800" height_o="517" data-src="https://freight.cargo.site/t/original/i/ce63aa28c2b45dd90bfdec5796e0e79d1515bbc75cd815fd17ba6747f7bdae32/process0.gif" data-mid="211411643" border="0" src="https://freight.cargo.site/w/800/i/ce63aa28c2b45dd90bfdec5796e0e79d1515bbc75cd815fd17ba6747f7bdae32/process0.gif" /> <img width="636" height="510" width_o="636" height_o="510" data-src="https://freight.cargo.site/t/original/i/87004ffa514e9ca1fe382072d72368dc2c3b080d05955580eef7c000df9691b2/process.gif" data-mid="211411644" border="0" src="https://freight.cargo.site/w/636/i/87004ffa514e9ca1fe382072d72368dc2c3b080d05955580eef7c000df9691b2/process.gif" /> Link to GitHub Repo:https://github.com/LilYuuu/seeing-machines-final Final Work https://lilyyu.me/StickAround Wed, 27 Dec 2023 04:49:43 +0000 Lily Peixuan Yu https://lilyyu.me/StickAround StickAround#AR&nbsp; &nbsp; #iOS App&nbsp; &nbsp; #ARKit&nbsp; &nbsp; #RealityKit&nbsp; &nbsp; #SwiftUI&nbsp; &nbsp; #Object Memory <img width="7624" height="5080" width_o="7624" height_o="5080" data-src="https://freight.cargo.site/t/original/i/d4f79899a4bbd6b9eee606d6f7ecd42b2da71383dea4ebb58d93b319d8aa4bc1/Slide-4_3---1.png" data-mid="200173760" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/d4f79899a4bbd6b9eee606d6f7ecd42b2da71383dea4ebb58d93b319d8aa4bc1/Slide-4_3---1.png" /> StickAround is an AR-based app that sends text and hand-drawn messages by sticking them in people’s homes as post-it notes. Timeline: October - December 2023 Tools: ARKit, RealityKit, SwiftUI, Xcode My Role: Concept ideationUI/UX design &amp; prototypingProgrammingUser testing Development ProcessComing soon. Link to GitHub Repo:https://github.com/LilYuuu/StickAround Final Work https://lilyyu.me/Transcending-Boundaries Wed, 27 Dec 2023 20:17:31 +0000 Lily Peixuan Yu https://lilyyu.me/Transcending-Boundaries Transcending Boundaries#Interactive Installation&nbsp; &nbsp; #Data Visualization&nbsp; &nbsp; #Unity&nbsp; &nbsp; #United Nations&nbsp; &nbsp; #SDGs <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/c9f31bebb3be3bc6070623fb6e85999a1499fc8d78bf75457037fb37ef7b8471/DSC00324.JPG" data-mid="200212795" border="0" data-scale="96" src="https://freight.cargo.site/w/1000/i/c9f31bebb3be3bc6070623fb6e85999a1499fc8d78bf75457037fb37ef7b8471/DSC00324.JPG" /> Transcending Boundaries is an innovative collaboration with the United Nations, designed to create an interactive 3D globe map showcasing the UN’s diverse organizations and global initiatives. This project offers a comprehensive view of the UN's efforts across various domains such as child welfare, gender equality, and refugee support. Through this engaging tool, users can explore the UN’s multifaceted contributions and understand its impact on addressing world issues. Timeline Project Development: October - December 2023 Exhibition: United Nations Headquarters, New York, December 2023 Client &amp; Collaboration Developed in partnership with the United Nations, highlighting the UN’s commitment to leveraging technology for global awareness and education in key humanitarian areas ToolsDesign &amp; Prototyping: Figma, Adobe SuiteDevelopment: Unity, SQLite, NocoDB Team Members JD Calvelli: Database Management Mashiyat Zaman: UI Development Queenie: UI/UX Design My Role Research: Conducted extensive research on the UN’s organizational structure and initiativesUI/UX Design: Developed iterative interface designs, ensuring an intuitive experience for exploring the 3D globePrototyping: Created interactive prototypes to visualize and refine the globe’s functionalitiesUI Development: Implemented the user interface in Unity 01. Identify Opportunities Problem IdentificationUpon exploring the variety of UN organizations and their diverse causes, we identified a significant gap: There is no single resource that systematically presents information about the UN’s multifaceted work. Existing Information FlowFor instance, the graph below shows that learning about the UN’s efforts regarding global issues like child welfare involves navigating through disjointed content scattered across multiple websites, leading to a fragmented and challenging user experience. <img width="12802" height="5401" width_o="12802" height_o="5401" data-src="https://freight.cargo.site/t/original/i/4f2dc1701f3362f4a38652202a3f5a89281bdacae8d649da7dfc773517342656/ori_flow.png" data-mid="212959650" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4f2dc1701f3362f4a38652202a3f5a89281bdacae8d649da7dfc773517342656/ori_flow.png" /> Existing Flow to Learn About The UN’s Work Regarding Child Welfare Proposed SolutionTo address this issue, we proposed to the UN the creation of "Transcending Boundaries," an interactive map systemThis tool introduces visitors to the many organizations within the vast UN system by highlighting their work based on specific global issues. Our goal is to provide a centralized, systematic way to explore and understand the UN’s global impact. As a proof of concept, we focused on three critical global issues: child welfare, refugee support, and gender equality. This selection demonstrates the potential of the platform to cover a wider range of topics in the future. 02. Project Goals Information ConsolidationTo create a user-friendly interactive platform that consolidates information about various UN organizations and their missionsEducation &amp; EngagementTo educate and engage users on the UN's global impact through a visually appealing and informative mediumAccessibilityTo make complex data about international organizations accessible and engaging to a broad audience 03. Design &amp; Development Research Objective To gather information about the UN’s various organizations and their achievements, focusing on child welfare, refugee support, and gender equality, and build a database.Methods We first collected data with manual entry from UN official websites, reports, and publications, and initially stored them in a Google Sheet for collaborative data review and preliminary analysis. We cross-checked information from multiple sources to confirm reliability, and finally, migrated the data into a structured database using NocoDB for later integration into the interactive map. <img width="12534" height="3033" width_o="12534" height_o="3033" data-src="https://freight.cargo.site/t/original/i/9684f95c4b71512a6feec8b37fcd771aefc9dc0f0504798581da3daaf5c9db37/data_pipeline.png" data-mid="212992623" border="0" src="https://freight.cargo.site/w/1000/i/9684f95c4b71512a6feec8b37fcd771aefc9dc0f0504798581da3daaf5c9db37/data_pipeline.png" /> Data Collection Pipeline UI/UX Design User Flow To outline the key user touchpoints and experience flow, we created the user flow chart below. <img width="5392" height="8024" width_o="5392" height_o="8024" data-src="https://freight.cargo.site/t/original/i/d7d10b50af0325efb83548fcc75332343b6c7e4ee90a92f9508b9180279fa8e0/user_flow.png" data-mid="212995678" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/d7d10b50af0325efb83548fcc75332343b6c7e4ee90a92f9508b9180279fa8e0/user_flow.png" /> User Flow WireframesWe created initial sketches to outline the basic layout and the general flow of the interactive map. Based on the sketches, we developed iterations of&nbsp;low-fidelity wireframes. <img width="1331" height="998" width_o="1331" height_o="998" data-src="https://freight.cargo.site/t/original/i/36680603ed5604276334972076022de5584dd5e13ccc6553f59cda5e37a42879/user_flow_sketch.png" data-mid="212995851" border="0" alt="Initial Sketches" data-caption="Initial Sketches" src="https://freight.cargo.site/w/1000/i/36680603ed5604276334972076022de5584dd5e13ccc6553f59cda5e37a42879/user_flow_sketch.png" /> <img width="1380" height="1638" width_o="1380" height_o="1638" data-src="https://freight.cargo.site/t/original/i/78f183b38591ffeddde9972c1b3ad80e69511af2e8c756b7d4e0a54e7e6d1b3a/lowfi.png" data-mid="212996003" border="0" alt="Low-Fidelity Wireframe Iterations" data-caption="Low-Fidelity Wireframe Iterations" src="https://freight.cargo.site/w/1000/i/78f183b38591ffeddde9972c1b3ad80e69511af2e8c756b7d4e0a54e7e6d1b3a/lowfi.png" /> Then we continued to develop multiple iterations of high-fidelity wireframes to incorporate feedback from the client. <img width="2332" height="612" width_o="2332" height_o="612" data-src="https://freight.cargo.site/t/original/i/8af74ea4cf09b3c3124ba0255c642e6c7cee79e20ff2b82cece07efd0efdb193/hifi.png" data-mid="212996027" border="0" src="https://freight.cargo.site/w/1000/i/8af74ea4cf09b3c3124ba0255c642e6c7cee79e20ff2b82cece07efd0efdb193/hifi.png" /> High-Fidelity Wireframe Iterations Prototyping &amp; User Testing ToolsFigmaFor creating interactive prototypes to communicate ideas and quickly iterate on designsUnityTo develop more interactive and visually rich prototypes for user testing Prototypes <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c91dff63296c0e5daccac4439c56d191240773ea011de5d16b21ec945da2357d/proto01.gif" data-mid="213025602" border="0" alt="Initial Mock-up in Figma" data-caption="Initial Mock-up in Figma" src="https://freight.cargo.site/w/1000/i/c91dff63296c0e5daccac4439c56d191240773ea011de5d16b21ec945da2357d/proto01.gif" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/ddb7d43ff918e1c5e6fe37f31d4369b415f8de9acc8019dad1f8bb8f9ecf4003/proto02.gif" data-mid="213025604" border="0" alt="Touchscreen Prototype Made with Unity" data-caption="Touchscreen Prototype Made with Unity" src="https://freight.cargo.site/w/960/i/ddb7d43ff918e1c5e6fe37f31d4369b415f8de9acc8019dad1f8bb8f9ecf4003/proto02.gif" /> User Testing <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/a4e61818450d675351fafd80c0dd0fee599ae7ee92e8445392805047f5efcea5/user_test01.gif" data-mid="213028369" border="0" src="https://freight.cargo.site/w/960/i/a4e61818450d675351fafd80c0dd0fee599ae7ee92e8445392805047f5efcea5/user_test01.gif" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/dbd9b0028cefe3fc0ab9927188c9abbf6d045eef8e190dadb408af9d4cbeb620/user_test02.gif" data-mid="213028367" border="0" src="https://freight.cargo.site/w/960/i/dbd9b0028cefe3fc0ab9927188c9abbf6d045eef8e190dadb408af9d4cbeb620/user_test02.gif" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/db3d82845f14b41ad6d9f2bf64929edb3e2a2596a9a4bb800a57686c26e63171/user_test03_.gif" data-mid="213028440" border="0" src="https://freight.cargo.site/w/960/i/db3d82845f14b41ad6d9f2bf64929edb3e2a2596a9a4bb800a57686c26e63171/user_test03_.gif" /> With the interactive prototype, we conducted multiple user testing sessions on different iterations using a TV touch screen. The feedback we received was highly constructive and can be categorized into three main areas: Interfaces Use a more vibrant color palette to make the interface more visually engagingAdd more visual cues and affordances to guide users in interacting with the interfaceInclude a back button to return to the home scene Interactions Adjust the globe rotation speed to mimic the interactions with a real globe Content Shorten text descriptions for better readabilityIncorporate additional multimedia elements like images and videos to enrich content Development The following chart shows the technology stack we used to build this system. We developed the UI in Unity, created a database using SQLite, and connecting the database with NocoDB to provide a friendly graphic user interface for data management. <img width="18168" height="4384" width_o="18168" height_o="4384" data-src="https://freight.cargo.site/t/original/i/ad10df510b2d0facfce7c9bee3a0c482d48efa5a4fecd806eb3be4bbc487049a/tech_stack.png" data-mid="213035441" border="0" data-scale="86" src="https://freight.cargo.site/w/1000/i/ad10df510b2d0facfce7c9bee3a0c482d48efa5a4fecd806eb3be4bbc487049a/tech_stack.png" /> Technology Stack 04. Design Evolution&nbsp; a. Exhibition at The UN Headquarters Our interactive map system was exhibited as an installation at the UN Headquaters Lobby. <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/e013ce30a5fb64f94d024222f1aaabae46c297efae0e4c4ca33e00cfe32dcb0d/exhibition01.gif" data-mid="213037644" border="0" data-scale="100" src="https://freight.cargo.site/w/960/i/e013ce30a5fb64f94d024222f1aaabae46c297efae0e4c4ca33e00cfe32dcb0d/exhibition01.gif" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" data-mid="213037643" border="0" data-scale="100" src="https://freight.cargo.site/w/960/i/e9b349be8d616b17cf619623dcea56f0bb64af77cba55b43f07fb2e7124e899e/exhibition02.gif" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/10ab27612eb8cc43010e08db281df8143fd4375d42dd795c6bf759330cafb153/DSC00324.JPG" data-mid="213037605" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/10ab27612eb8cc43010e08db281df8143fd4375d42dd795c6bf759330cafb153/DSC00324.JPG" /> <img width="5536" height="3691" width_o="5536" height_o="3691" data-src="https://freight.cargo.site/t/original/i/bdf936b4902583fbc11d8592879e6de9d0e5d7503f41454d8f2c3ffe2c9ce552/DSC00127.jpg" data-mid="213037777" border="0" src="https://freight.cargo.site/w/1000/i/bdf936b4902583fbc11d8592879e6de9d0e5d7503f41454d8f2c3ffe2c9ce552/DSC00127.jpg" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/fa4ad43c73fe1bc682bf006d1738dbf95215c335520095496c815f78f7d460ab/DSC00234.JPG" data-mid="213037604" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/fa4ad43c73fe1bc682bf006d1738dbf95215c335520095496c815f78f7d460ab/DSC00234.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/f26f558646eca1ac9fcfc58328169a6cc18a9f71985e122496c46c0a386b5912/DSC00247.JPG" data-mid="213037607" border="0" src="https://freight.cargo.site/w/1000/i/f26f558646eca1ac9fcfc58328169a6cc18a9f71985e122496c46c0a386b5912/DSC00247.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/375b063802791bffaddd180c2adc5149929a93c0dbcd9cf6c572c7869b4b6191/DSC00265.JPG" data-mid="213037606" border="0" src="https://freight.cargo.site/w/1000/i/375b063802791bffaddd180c2adc5149929a93c0dbcd9cf6c572c7869b4b6191/DSC00265.JPG" /> Our interactive map system was exhibited as an installation at the UN Headquaters Lobby. b. Opportunities for Design Enhancement&nbsp; During the exhibition, we spoke to the audience who interacted with our installation and gathered some insights for enhancement in the design aspect. Upon analysis, I created a following list of goals for an updated design: 1. User Interface Improvements Create an Independent Start Screen: Purpose: To balance the key information and capture the audience’s attention effectively.Apply a More Vibrant Color Palette: Purpose: To make the educational experience more visually engaging. Provide More Interaction Prompts: Purpose: To communicate which elements are interactable and provide guidance on interactions. 2. Navigation Enhancements Implement Dropdown Menus:Purpose: Enhance the&nbsp;navigation flow for seamless routing to different content levels. 3. Information Presentation Add Individual Windows for Organization Information:Purpose: To offer a better context understanding than just using acronyms. c. Enhanced Design Post-UN Exhibition 05. Design Decision Highlights a. 3D vs. 2D We used a 3D globe instead of 2D maps because of multiple reasons: Visual Appeal Our project goal is to demonstrate global impacts the UN has achieved. 3D globes can better communicate the idea from a comprehensive view, while 2D maps are usually segmented due to space limitation. User EngagementComparing to 2D maps, 3D globes tend to be more immersive and intuitive in terms of interactions on a large screen. As an interactive element, it will encourage exploration and discovery.Data Representation3D globes offer superior data layering capabilities compared to 2D maps, effectively reducing visual information clutter. <img width="720" height="720" width_o="720" height_o="720" data-src="https://freight.cargo.site/t/original/i/b188ce8a9a12d10a2d2be9dcde8d73ac65f912131839bc527cd797f74607a51e/spinning_globe_dot-ezgif.com-optimize.gif" data-mid="213701137" border="0" data-scale="29" data-icon-mode src="https://freight.cargo.site/w/720/i/b188ce8a9a12d10a2d2be9dcde8d73ac65f912131839bc527cd797f74607a51e/spinning_globe_dot-ezgif.com-optimize.gif" /> b. Color Palette &nbsp; <img width="2176" height="2816" width_o="2176" height_o="2816" data-src="https://freight.cargo.site/t/original/i/751c5ae6547842134435bf67c26565df3f96c40ffc74948ff07eebb5b79ba8ea/UN_brand_identity_quick_guide_2020.png" data-mid="213701533" border="0" alt="UN Brand Identity" data-caption="UN Brand Identity" src="https://freight.cargo.site/w/1000/i/751c5ae6547842134435bf67c26565df3f96c40ffc74948ff07eebb5b79ba8ea/UN_brand_identity_quick_guide_2020.png" /> <img width="1546" height="966" width_o="1546" height_o="966" data-src="https://freight.cargo.site/t/original/i/f1277da408866c2e6e987b00d111fe2456597b6e582cf9ad86956c286837d452/UN_SDGs.png" data-mid="213701740" border="0" alt="UN Sustainable Development Goals (SDGs)" data-caption="UN Sustainable Development Goals (SDGs)" src="https://freight.cargo.site/w/1000/i/f1277da408866c2e6e987b00d111fe2456597b6e582cf9ad86956c286837d452/UN_SDGs.png" /> Used the classic UN blue and colors for UN Sustainable Development Goals (SDGs) as the color palette. The blue color is effective in highlightting information,&nbsp;while the SDG color palette makes the visuals more vibrant. <img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/1adbf5e4b2abf27b678542bd0dd4eee4b7f45db14e2a2503996d461e666c49db/color_palette0.png" data-mid="213701207" border="0" alt="UN Colors Used in Design" data-caption="UN Colors Used in Design" src="https://freight.cargo.site/w/1000/i/1adbf5e4b2abf27b678542bd0dd4eee4b7f45db14e2a2503996d461e666c49db/color_palette0.png" /> c. Navigation In order to enhance the navigation flow, I implemented dropdown menus and carousels. These features facilitate seamless navigation between content on the same level and across different levels. l <img width="844" height="1200" width_o="844" height_o="1200" data-src="https://freight.cargo.site/t/original/i/d101a87922e6e029f8454a079ce7628b563bd6e8f76676ba7de81b40638a8c94/dropdown1.gif" data-mid="213702113" border="0" alt="Dropdown for Global Issues" data-caption="Dropdown for Global Issues" src="https://freight.cargo.site/w/844/i/d101a87922e6e029f8454a079ce7628b563bd6e8f76676ba7de81b40638a8c94/dropdown1.gif" /> <img width="844" height="1200" width_o="844" height_o="1200" data-src="https://freight.cargo.site/t/original/i/17e38bb9d4c0e17f6e8444c5645b9eed7518e1f8bc9fe9f88dd15bc9e000f1b3/dropdown2.gif" data-mid="213702112" border="0" alt="Dropdown for Organizations" data-caption="Dropdown for Organizations" src="https://freight.cargo.site/w/844/i/17e38bb9d4c0e17f6e8444c5645b9eed7518e1f8bc9fe9f88dd15bc9e000f1b3/dropdown2.gif" /> <img width="3014" height="1692" width_o="3014" height_o="1692" data-src="https://freight.cargo.site/t/original/i/9cdbf68c6d862fe056a7a2094111ba3de9642de83ab9713ed25998810b0d5522/carousel.gif" data-mid="213702111" border="0" alt="Carousel for Individual Initiatives" data-caption="Carousel for Individual Initiatives" src="https://freight.cargo.site/w/1000/i/9cdbf68c6d862fe056a7a2094111ba3de9642de83ab9713ed25998810b0d5522/carousel.gif" /> d. Zooming Effect When a user clicks on a pin, the camera will zoom in, providing a focused viewing experience, ensuring a clear and clutter-free display of information. <img width="1919" height="1080" width_o="1919" height_o="1080" data-src="https://freight.cargo.site/t/original/i/dc99fe723a896961808bced01eca2692c9a359cf4c973bea315e9a1ca7cee936/zooming_effect.gif" data-mid="213702196" border="0" src="https://freight.cargo.site/w/1000/i/dc99fe723a896961808bced01eca2692c9a359cf4c973bea315e9a1ca7cee936/zooming_effect.gif" /> e. Prompts for Interactions To guide users in interacting with various elements, I developed animated prompts. <img width="1360" height="1350" width_o="1360" height_o="1350" data-src="https://freight.cargo.site/t/original/i/2f9b5359703a9eb118daa55b0271b625d9e8f9aaa4335a5b621a5b9c701e9e2e/prompt1.gif" data-mid="213702271" border="0" alt="Rotating the Globe" data-caption="Rotating the Globe" src="https://freight.cargo.site/w/1000/i/2f9b5359703a9eb118daa55b0271b625d9e8f9aaa4335a5b621a5b9c701e9e2e/prompt1.gif" /> <img width="1146" height="886" width_o="1146" height_o="886" data-src="https://freight.cargo.site/t/original/i/30d8dd21599822643fe9c188bdc13f204f5ebfe9318714a9b27fe4105f3109cd/prompt2.gif" data-mid="213702272" border="0" alt="Interacting with SDG Icons" data-caption="Interacting with SDG Icons" src="https://freight.cargo.site/w/1000/i/30d8dd21599822643fe9c188bdc13f204f5ebfe9318714a9b27fe4105f3109cd/prompt2.gif" /> 06. Reflections Project AchievementsThe integration of the 3D globe provided an engaging and intuitive way for users to explore UN organizations, receiving praise from the client and the audience for its visual appeal and interactive capabilities. “This is exactly what we’ve been wanting to do!”, quoting one of the UN Staff upon interacting with the project.Challenges Initially, the project's scope was broad, aiming to develop a system encompassing the entire UN. Through extensive research and careful evaluation, we refined the scope to a manageable size, aligning it with the available timeline. Areas for Growth Our process could have been improved by conducting more frequent user testing sessions earlier in the development phase. This would have helped to identify usability issues sooner and enabled more significant enhancements to the design within a shorter time frame. Acknowlegements Thanks to my team members Mashi, Queenie, and JD for the great collaboration. Thanks to Matt Parker from NYU Game Center, Vincenzo Pugliese and Aurelie Jochimek from the United Nations for their guidance and support. https://lilyyu.me/Doomsday-Glacier Mon, 27 Nov 2023 18:23:08 +0000 Lily Peixuan Yu https://lilyyu.me/Doomsday-Glacier The Doomsday Glacier #Interactive Storytelling&nbsp; &nbsp; #Visual Journalism &nbsp; #Exhibition Design&nbsp; &nbsp; #Web App&nbsp; &nbsp; #Playful Communications for Serious Research <img width="1065" height="694" width_o="1065" height_o="694" data-src="https://freight.cargo.site/t/original/i/ef617cc2b711be5a09b1977548af3d71459b6ceda9f215c7f7220a1063d027b2/mockup.png" data-mid="226133652" border="0" src="https://freight.cargo.site/w/1000/i/ef617cc2b711be5a09b1977548af3d71459b6ceda9f215c7f7220a1063d027b2/mockup.png" /> The Doomsday Glacier is a web-based interactive visual journalism piece that delves into the story of the Thwaites Glacier in Antarctica. It combines a historical timeline of the glacier's fracturing with an in-depth exploration of its anatomy and the global consequences of its melting. Designed to educate and inspire action, the experience translates complex scientific data into an accessible and compelling narrative. Through dynamic interactive storytelling, The Doomsday Glacier bridges the gap between climate science and public understanding. By transforming abstract concepts into engaging visuals and narratives, it fosters a deeper connection to the urgent realities of climate change, empowering audiences to grasp the impact of glacier melting on our planet.The piece was selected by the *This Is Not A Drill* program and was exhibited at the NYU Elmer Holmes Bobst Library from September to December in 2023. Timeline1st Iteration: June - August 20232nd Iteration: October 2024 - January 2025Link to Projectdoomsday-glacier.lilyyu.me ToolsFrontend Development: React, GSAP, react-scrollamaData Visualization: D3.js3D Animation: Blender Media Coverage Exhibition Opening Exhibit Catalog Project Partner Briana Jones (Initial Reseach in 2023)Yi-Chun Lan (3D Modeling) My Role:Ideation &amp; Research: Initiated the project concept and conducted thorough research on the Thwaites Glacier's significanceData Collection &amp; Visualization: Gathered data on glacier dynamics and developed visualizations to present information on glacier fracturing timeline and its consequences&nbsp;Web Development: Built the interactive web application, integrating storytelling elements to guide users through the glacier’s historical timeline ✶ Project Highlight a. Visual Storytelling 3D Animation: Fracturing of The Thwaites Glacier <img width="800" height="459" width_o="800" height_o="459" data-src="https://freight.cargo.site/t/original/i/c60d696117a96ec767116e4d48c3b3168d3d071ccc7d9e2d12f796f04ab19859/glacier-docu-opening-optimize.gif" data-mid="225875704" border="0" data-scale="100" src="https://freight.cargo.site/w/800/i/c60d696117a96ec767116e4d48c3b3168d3d071ccc7d9e2d12f796f04ab19859/glacier-docu-opening-optimize.gif" /> Visual Explainer:Structural Anatomy of The Glacier <img width="800" height="459" width_o="800" height_o="459" data-src="https://freight.cargo.site/t/original/i/d44d7d7b51c3309f463f916f5d3371a24068591c6dd3fc41939a46449f75b81c/glacier-docu-visual-explainer.gif" data-mid="226121060" border="0" src="https://freight.cargo.site/w/800/i/d44d7d7b51c3309f463f916f5d3371a24068591c6dd3fc41939a46449f75b81c/glacier-docu-visual-explainer.gif" /> Scrollytelling:Underwater Research for Melting Rate Measurement <img width="800" height="459" width_o="800" height_o="459" data-src="https://freight.cargo.site/t/original/i/c2f0764b497fa3976980ccbf6757f7be258a665e198ebe0a41c38fcb5988684a/glacier-docu-scrollytelling.gif" data-mid="226121059" border="0" src="https://freight.cargo.site/w/800/i/c2f0764b497fa3976980ccbf6757f7be258a665e198ebe0a41c38fcb5988684a/glacier-docu-scrollytelling.gif" /> b. Interactive Components Comparison Slider: Thwaites Glacier’s Ice Tongue, 2001 vs. 2019 (Slide to interact) Data Visualization: Regional Hazards and Impacts by Ocean and Cryospheric Changes (Hover to interact) <img width="12456" height="3600" width_o="12456" height_o="3600" data-src="https://freight.cargo.site/t/original/i/56e19f816743c135d65047b38314c47b26128dbd49e87c0197b5b774c0ce0d54/legend.png" data-mid="215454781" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/56e19f816743c135d65047b38314c47b26128dbd49e87c0197b5b774c0ce0d54/legend.png" /> 00. *This Is Not A Drill* Open Call <img width="1600" height="1066" width_o="1600" height_o="1066" data-src="https://freight.cargo.site/t/original/i/37d262cb2c392597246fb72f1d8450c762965677566b034b12b3e5b98dcc433a/TINAD.png" data-mid="213842096" border="0" alt="*This Is Not A Drill* at NYU Bobst Library" data-caption="*This Is Not A Drill* at NYU Bobst Library" src="https://freight.cargo.site/w/1000/i/37d262cb2c392597246fb72f1d8450c762965677566b034b12b3e5b98dcc433a/TINAD.png" /> “The *This Is Not A Drill* program on technology, the climate emergency, equity, and creative practice collaboratively develops such a public pedagogy. It is led by Director and inaugural FIC Fellow Mona Sloane and explores what Arturo Escobar has called “designs for the pluriverse”: designs that account for the pluralities of being, that dismantle the harmful hierarchies that were created between human/non-human and culture/nature, and that reorient us towards sustainment, maintenance and care for each other and for the planet.” 01. Ideation &amp; Research a. Inspirations MMotivated by the open call, Briana and I aimed to leverage creative technology for climate emergency awareness. Our exploration led us to&nbsp;this article detailing recent findings on the melting beneath the Thwaites Glacier. Delving into the published research, we were struck by the glacier's critical role in global sea level rise. This prompted us to center our project on Thwaites Glacier, recognizing its profound implications for coastal communities and ecosystems worldwide. <img width="17088" height="11245" width_o="17088" height_o="11245" data-src="https://freight.cargo.site/t/original/i/acca673e354f442653df63fb8742755af1bcf6c03c7a309bb016a350e2121fbe/paper.png" data-mid="214031021" border="0" alt="Research on the melting of the Thwaites Glacier" data-caption="Research on the melting of the Thwaites Glacier" src="https://freight.cargo.site/w/1000/i/acca673e354f442653df63fb8742755af1bcf6c03c7a309bb016a350e2121fbe/paper.png" /> b.&nbsp;Significance of The Thwaites Glacier TThe Thwaites Glacier, often referred to as the “Doomsday Glacier,” is among the largest and most rapidly melting glaciers in Antarctica. Its accelerated melting poses a significant threat, with the potential to drastically raise sea levels, thereby endangering coastal communities and ecosystems worldwide. Understanding the changes occurring in this glacier is crucial for assessing global sea level rise and preparing for its impacts. . <img width="620" height="465" width_o="620" height_o="465" data-src="https://freight.cargo.site/t/original/i/66e2c724cca4bd7076f3c647bed5398e84b86ac19c834f77c0f8b2c834b22afe/glacier.jpg" data-mid="214032027" border="0" alt="Cracks in Thwaites Glacier, 2020" data-caption="Cracks in Thwaites Glacier, 2020" src="https://freight.cargo.site/w/620/i/66e2c724cca4bd7076f3c647bed5398e84b86ac19c834f77c0f8b2c834b22afe/glacier.jpg" /> c. Research and ConceptualizationTTo enrich our understanding, we reached out to Dr. Peter Davis from the British Antarctic Survey. Dr. Davis, involved in ocean measurements for calculating the glacier's melting rate, provided invaluable insights into the glacier's structure and the research methodology. Through a series of emails and virtual meetings, he directed us to relevant reports by the Intergovernmental Panel on Climate Change (IPCC), enhancing our comprehension of the broader consequences of the glacier's melting. 02. Project Goals a. Educational Focus WWith comprehensive research, our focus crystallized on educating the audience about: <img width="9796" height="1180" width_o="9796" height_o="1180" data-src="https://freight.cargo.site/t/original/i/2b0e8549f28741c00fd162dff97489ae3249be06c8f1cdedc79cd81d834a185a/edu_goals01.png" data-mid="214033578" border="0" data-scale="37" src="https://freight.cargo.site/w/1000/i/2b0e8549f28741c00fd162dff97489ae3249be06c8f1cdedc79cd81d834a185a/edu_goals01.png" />Detailing the chronological events leading to the fracturing of Thwaites Glacier. <img width="9216" height="1180" width_o="9216" height_o="1180" data-src="https://freight.cargo.site/t/original/i/17f4d8ebd0c097c2e6ba66e79882198980e723df649687897274be6008603cd2/edu_goals04.png" data-mid="214033528" border="0" data-scale="36" src="https://freight.cargo.site/w/1000/i/17f4d8ebd0c097c2e6ba66e79882198980e723df649687897274be6008603cd2/edu_goals04.png" /> Illustrating the wide-ranging impacts of the glacier’s melting on global sea levels and the resulting threats to coastal regions. <img width="6280" height="1180" width_o="6280" height_o="1180" data-src="https://freight.cargo.site/t/original/i/709d302f02b88b6133babb4dbafa718704a9553a436a155b9e1199f90e2d6541/edu_goals03.png" data-mid="214033579" border="0" data-scale="24" src="https://freight.cargo.site/w/1000/i/709d302f02b88b6133babb4dbafa718704a9553a436a155b9e1199f90e2d6541/edu_goals03.png" />Providing an in-depth look at the anatomy of Thwaites Glacier. <img width="9796" height="1180" width_o="9796" height_o="1180" data-src="https://freight.cargo.site/t/original/i/3dc3b1b8da40e7478f8372e2a71e55d87c760fd55b7a7ad024f0a5c6630c4205/edu_goals02.png" data-mid="214033526" border="0" data-scale="38" src="https://freight.cargo.site/w/1000/i/3dc3b1b8da40e7478f8372e2a71e55d87c760fd55b7a7ad024f0a5c6630c4205/edu_goals02.png" /> Exploring the primary factors contributing to the glacier’s rapid decline. b. Project ScopeInteractive Storytelling ExperienceWe developed a web-based interactive storytelling platform that guides users through the timeline of the Thwaites Glacier's fracturing. This experience visually portrays the significant consequences of its melting, offering an immersive educational journey. 3D Interactive ApplicationComplementing the storytelling experience, we created an interactive application featuring 3D models of the glacier. This application employs animations to illustrate the glacier’s anatomy and explains the key factors driving its melting, providing a comprehensive understanding of the underlying dynamics. <img width="3084" height="1212" width_o="3084" height_o="1212" data-src="https://freight.cargo.site/t/original/i/2da62ce30449b0133b7fffe7e7509739d20ebafa18588bc89bb23c5a45e1b463/Slide-16_9---92.png" data-mid="198154531" border="0" alt="System Diagram" data-caption="System Diagram" src="https://freight.cargo.site/w/1000/i/2da62ce30449b0133b7fffe7e7509739d20ebafa18588bc89bb23c5a45e1b463/Slide-16_9---92.png" /> 03. Design &amp; Development In the following section, I will focus on the screen-based experience development process, which was my primary responsibility within the project. a. Research IntegrationData Collection <img width="3456" height="1986" width_o="3456" height_o="1986" data-src="https://freight.cargo.site/t/original/i/4d47732582a754a3be8d19b4e84015347f3ecd884168f49cf1334927986acc3b/report.png" data-mid="214235316" border="0" alt="IPCC Report on Climate Change" data-caption="IPCC Report on Climate Change" src="https://freight.cargo.site/w/1000/i/4d47732582a754a3be8d19b4e84015347f3ecd884168f49cf1334927986acc3b/report.png" /> I gathered and synthesized data from expert consultations, scientific reports, and scholarly articles related to the Thwaites Glacier's melting patterns, fracturing timeline, and implications for sea level rise. Based on the data from the scientific reports, I created a customized json data file for the data visualization part of the screen experience. <img width="9408" height="8864" width_o="9408" height_o="8864" data-src="https://freight.cargo.site/t/original/i/3f4f8a9f2fe015d3e0b16e54fec4ec459cc0706e888fff154eb001a557655b36/data.png" data-mid="214235467" border="0" alt="Original Data Sheet from Report" data-caption="Original Data Sheet from Report" src="https://freight.cargo.site/w/1000/i/3f4f8a9f2fe015d3e0b16e54fec4ec459cc0706e888fff154eb001a557655b36/data.png" /> <img width="1856" height="1922" width_o="1856" height_o="1922" data-src="https://freight.cargo.site/t/original/i/63bdab176952b1f8a0372c742e746f7e59f35a70148ac826045de078be61da0d/data_json.png" data-mid="214235315" border="0" alt="Extracted and Organized Data in json Format" data-caption="Extracted and Organized Data in json Format" src="https://freight.cargo.site/w/1000/i/63bdab176952b1f8a0372c742e746f7e59f35a70148ac826045de078be61da0d/data_json.png" /> Content StructuringI organized the collected data into an educational narrative for the web application. This included:Timeline of Fracturing&nbsp; &nbsp; &nbsp; &nbsp; Chronologically arranged events detailing the fracturing of the Thwaites Glacier. Consequences Visualization&nbsp; &nbsp; &nbsp; &nbsp; Structured the content to visualize the regional impacts of sea level rise due to the glacier's melting. 04. Final Work Link to live sitedoomsday-glacier.lilyyu.me . Visuals<img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/e2a672c85d497aeb64e13eb3e0959aca274b02716bdbcca215833b5ffc86f9d6/2.0-Visual-Documentation.jpg" data-mid="226134001" border="0" src="https://freight.cargo.site/w/1000/i/e2a672c85d497aeb64e13eb3e0959aca274b02716bdbcca215833b5ffc86f9d6/2.0-Visual-Documentation.jpg" /> <img width="3200" height="2400" width_o="3200" height_o="2400" data-src="https://freight.cargo.site/t/original/i/dda648985eaf192c6cddc21d9b8bead2f753f179003583389447ab2974d2c647/glacier-02.png" data-mid="226134004" border="0" src="https://freight.cargo.site/w/1000/i/dda648985eaf192c6cddc21d9b8bead2f753f179003583389447ab2974d2c647/glacier-02.png" /> <img width="3200" height="2400" width_o="3200" height_o="2400" data-src="https://freight.cargo.site/t/original/i/656b823e78ab34b1de61e871dfd6eab39fcadaf4fb036df0e39c7ef6aec0aafb/glacier-03.png" data-mid="226134003" border="0" src="https://freight.cargo.site/w/1000/i/656b823e78ab34b1de61e871dfd6eab39fcadaf4fb036df0e39c7ef6aec0aafb/glacier-03.png" /> <img width="3200" height="2400" width_o="3200" height_o="2400" data-src="https://freight.cargo.site/t/original/i/271b479860cf8e2a7c90b3ba9b4ae05382820ae04134c51c92ba9b1e908b3c2c/glacier-04.png" data-mid="226134002" border="0" src="https://freight.cargo.site/w/1000/i/271b479860cf8e2a7c90b3ba9b4ae05382820ae04134c51c92ba9b1e908b3c2c/glacier-04.png" /> 05. Exhibition @NYU Library <img width="8065" height="5377" width_o="8065" height_o="5377" data-src="https://freight.cargo.site/t/original/i/2414e27c04d94db9a5f601dd5a72a002e8a2aa584192cb0d3b935fd54332039b/glacier.jpg" data-mid="198105359" border="0" src="https://freight.cargo.site/w/1000/i/2414e27c04d94db9a5f601dd5a72a002e8a2aa584192cb0d3b935fd54332039b/glacier.jpg" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/210b85adee7fa0ccb7be615ab327e688b07d798f200866fae3edbd354d1d9765/DSC03438.JPG" data-mid="198105386" border="0" src="https://freight.cargo.site/w/1000/i/210b85adee7fa0ccb7be615ab327e688b07d798f200866fae3edbd354d1d9765/DSC03438.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/4ebd181d3119561268900cb45adb7913b1ee3aef76c81f1fa8b01bad8b0aabd4/DSC03258.JPG" data-mid="198105360" border="0" src="https://freight.cargo.site/w/1000/i/4ebd181d3119561268900cb45adb7913b1ee3aef76c81f1fa8b01bad8b0aabd4/DSC03258.JPG" /> <img width="5184" height="3456" width_o="5184" height_o="3456" data-src="https://freight.cargo.site/t/original/i/3e3d8fe20af6d7d10dd716689bd186e4c30514519655cdcd50a344b7f9f5d216/IMG_4844.JPG" data-mid="198105874" border="0" src="https://freight.cargo.site/w/1000/i/3e3d8fe20af6d7d10dd716689bd186e4c30514519655cdcd50a344b7f9f5d216/IMG_4844.JPG" /> https://lilyyu.me/The-Interplace Fri, 17 Feb 2023 01:51:13 +0000 Lily Peixuan Yu https://lilyyu.me/The-Interplace The Interplace#Interactive Projection&nbsp; &nbsp; #Installation Art&nbsp; &nbsp; #Motion Capture&nbsp; &nbsp; #Three.js <img width="5987" height="4231" width_o="5987" height_o="4231" data-src="https://freight.cargo.site/t/original/i/67fb79342410f0929e64a5332954e9457a5b1cea3170eae802752049a7797a8e/01_the_interplace_01.png" data-mid="168789920" border="0" src="https://freight.cargo.site/w/1000/i/67fb79342410f0929e64a5332954e9457a5b1cea3170eae802752049a7797a8e/01_the_interplace_01.png" /> <img width="5987" height="4231" width_o="5987" height_o="4231" data-src="https://freight.cargo.site/t/original/i/38be8c3eae1c93e38d9bc0a23f86b73585d8c010c05edf4c6f73f0be6d565407/01_the_interplace_02.png" data-mid="168790484" border="0" src="https://freight.cargo.site/w/1000/i/38be8c3eae1c93e38d9bc0a23f86b73585d8c010c05edf4c6f73f0be6d565407/01_the_interplace_02.png" /> <img width="5987" height="4231" width_o="5987" height_o="4231" data-src="https://freight.cargo.site/t/original/i/381ea9236f5b86835d8da4ff251d8f8e0acdee2b89c614d86e465c701d25f8e8/01_the_interplace_03.png" data-mid="168790328" border="0" src="https://freight.cargo.site/w/1000/i/381ea9236f5b86835d8da4ff251d8f8e0acdee2b89c614d86e465c701d25f8e8/01_the_interplace_03.png" /> <img width="5987" height="4231" width_o="5987" height_o="4231" data-src="https://freight.cargo.site/t/original/i/e72660cd48c6ccb9a3fce47a27b6f408571c135a55ea3aa8306f8369f7ff8f41/01_the_interplace_05.png" data-mid="168790329" border="0" src="https://freight.cargo.site/w/1000/i/e72660cd48c6ccb9a3fce47a27b6f408571c135a55ea3aa8306f8369f7ff8f41/01_the_interplace_05.png" /> <img width="5987" height="4231" width_o="5987" height_o="4231" data-src="https://freight.cargo.site/t/original/i/ce635d5f23c2627816642ae7c62e6f92d3d045fd374f99186da31e5980b4a22e/01_the_interplace_06.png" data-mid="168790330" border="0" src="https://freight.cargo.site/w/1000/i/ce635d5f23c2627816642ae7c62e6f92d3d045fd374f99186da31e5980b4a22e/01_the_interplace_06.png" /> <img width="3991" height="2821" width_o="3991" height_o="2821" data-src="https://freight.cargo.site/t/original/i/111d882749d529d9ab956fe1fa4b5d5f99e0cc5a65261487cdaf0efd93f01a27/01_the_interplace_07.png" data-mid="168790485" border="0" src="https://freight.cargo.site/w/1000/i/111d882749d529d9ab956fe1fa4b5d5f99e0cc5a65261487cdaf0efd93f01a27/01_the_interplace_07.png" /> Link to GitHub Repo:https://github.com/LilYuuu/The_Interplace