1:"$Sreact.fragment"
2:I[73323,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Column"]
3:I[79520,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],""]
4:I[24379,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"SmartLink"]
5:I[78454,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Row"]
6:I[71045,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"AvatarGroup"]
7:I[11052,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"HeadingLink"]
8:I[36122,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"List"]
9:I[26935,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ListItem"]
19:I[11451,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Line"]
1a:I[74855,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ProjectCard"]
1b:I[88654,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ScrollToHash"]
1c:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"OutletBoundary"]
1d:"$Sreact.suspense"
0:{"buildId":"dGIaEKVv4DE4pH8d0YJHt","rsc":["$","$1","c",{"children":[["$","$L2",null,{"as":"section","maxWidth":"m","horizontal":"center","gap":"l","children":[["$","$L3",null,{"id":"schema-blogPosting-/work/building-once-ui-a-customizable-design-system","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"url\":\"https://portoboril.com/work/building-once-ui-a-customizable-design-system\",\"sameAs\":[],\"headline\":\"KATAVEN — Immersive AR Heritage Experience\",\"description\":\"Development of an Augmented Reality–based heritage exploration and navigation application.\",\"image\":\"https://portoboril.com/api/og/generate?title=KATAVEN%20%E2%80%94%20Immersive%20AR%20Heritage%20Experience\",\"datePublished\":\"2024-04-08\",\"dateModified\":\"2024-04-08\",\"author\":{\"@type\":\"Person\",\"name\":\"Boril\",\"url\":\"https://portoboril.com/about\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https://portoboril.com/images/avatar.webp\"}}}"}}],["$","$L2",null,{"maxWidth":"s","gap":"16","horizontal":"center","align":"center","children":[["$","$L4",null,{"href":"/work","children":["$","span",null,{"className":"font-label font-strong font-m","style":{},"children":"Projects"}]}],["$","span",null,{"className":"font-body font-default font-xs neutral-on-background-weak mb-12","style":{},"children":"April 8, 2024"}],["$","h1",null,{"className":"font-display font-strong font-m neutral-on-background-strong","style":{"textWrap":"balance"},"children":"KATAVEN — Immersive AR Heritage Experience"}]]}],["$","$L5",null,{"marginBottom":"32","horizontal":"center","children":["$","$L5",null,{"gap":"16","vertical":"center","children":[["$","$L6",null,{"reverse":true,"avatars":[{"src":""},{"src":""},{"src":""},{"src":"/images/avatar.webp"}],"size":"s"}],["$","span",null,{"className":"font-label font-default font-m brand-on-background-weak","style":{},"children":[["$","span","0",{"children":[false,["$","$L4",null,{"href":"","children":"Nadia Camilla Darmawan"}]]}],["$","span","1",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{},"children":[","," "]}],["$","$L4",null,{"href":"https://www.linkedin.com/in/bimoajinugroho/","children":"Bimo Aji"}]]}],["$","span","2",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{},"children":[","," "]}],["$","$L4",null,{"href":"","children":"Nefa Wahyuning"}]]}],["$","span","3",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{},"children":[","," "]}],["$","$L4",null,{"href":"https://www.linkedin.com/in/sahril/","children":"Boril(Me)"}]]}]]}]]}]}],["$","$L2",null,{"style":{"margin":"auto"},"as":"article","maxWidth":"xs","children":[["$","$L7",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"overview","children":"Overview"}],"\n",["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"lineHeight":"175%"},"children":"KATAVEN is an Augmented Reality (AR)–based heritage exploration application developed to enhance visitor engagement at Kampoeng Heritage Kajoetangan, Malang.\r\nThe application combines AR navigation, marker-based gamification, interactive storytelling, and digital memory collection to create an immersive cultural learning experience.\r\nKATAVEN transforms traditional heritage tourism into a spatial, interactive, and gamified digital journey."}],"\n",["$","$L7",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"key-features","children":"Key Features"}],"\n",["$","$L8",null,{"as":"ul","children":["\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"AR Navigation System"}],"\r\nReal-time AR-based directional guidance using visual path indicators and spatial markers, helping users easily locate heritage spots within the area."]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Marker-Based Treasure Hunt (Gamification)"}],"\r\nUsers scan hidden markers placed across heritage locations to unlock digital treasures, historical stories, and collectible memories."]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":["$La","\r\nDigital artifacts and historical images are unlocked and stored inside a virtual “memory chest,” encouraging exploration and repeat engagement."]}],"\n","$Lb","\n","$Lc","\n"]}],"\n","$Ld","\n","$Le","\n","$Lf","\n","$L10","\n","$L11","\n","$L12","\n","$L13","\n","$L14"]}],"$L15","$L16"]}],["$L17"],"$L18"]}],"loading":null,"isPartial":false}
a:["$","strong",null,{"children":"Interactive Memory Collection"}]
b:["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Educational Storytelling Layer"}],"\r\nCultural and architectural explanations are presented contextually within AR scenes, making learning intuitive and location-based."]}]
c:["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"User-Friendly Mobile Interface"}],"\r\nDesigned with a clean, immersive, and accessible UI to ensure ease of use for tourists, students, and local communities."]}]
d:["$","$L7",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"technologies-used","children":"Technologies Used"}]
e:["$","$L8",null,{"as":"ul","children":["\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Unity"}]," – Core application development and AR integration"]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"AR Foundation / Vuforia"}]," – Marker-based and spatial AR tracking"]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"C#"}]," – Application logic and interaction system"]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"UI/UX Design System"}]," – Custom mobile UI optimized for immersive experience"]}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Android Deployment"}]," – Mobile distribution and field testing"]}],"\n"]}]
f:["$","$L7",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"challenges-and-learnings","children":"Challenges and Learnings"}]
10:["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"lineHeight":"175%"},"children":"One major challenge was ensuring stable AR tracking in outdoor heritage environments with varying lighting conditions and spatial constraints.\r\nThe team addressed this by optimizing marker placement, improving detection thresholds, and refining UI clarity to guide users intuitively.\r\nAnother challenge involved balancing gamification elements with educational depth. The solution was integrating concise, contextual storytelling directly within AR interactions to avoid cognitive overload while maintaining engagement.\r\nCollaboration between researcher, supervisors, and developer strengthened the alignment between research objectives and technical implementation."}]
11:["$","$L7",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"outcome","children":"Outcome"}]
12:["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"lineHeight":"175%"},"children":"KATAVEN successfully demonstrates how AR technology can:"}]
13:["$","$L8",null,{"as":"ul","children":["\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Enhance heritage tourism experiences"}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Increase visitor engagement through gamification"}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Support cultural preservation through digital storytelling"}],"\n",["$","$L9",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Provide an interactive educational tool for students and tourists"}],"\n"]}]
14:["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"lineHeight":"175%"},"children":"The project establishes a scalable foundation for future AR-based cultural exploration systems and immersive learning applications."}]
15:["$","$L2",null,{"fillWidth":true,"gap":"40","horizontal":"center","marginTop":"40","children":[["$","$L19",null,{"maxWidth":"40"}],["$","h2",null,{"className":"font-heading font-strong font-xl neutral-on-background-strong mb-24","style":{"textWrap":"balance"},"children":"Related projects"}],["$","$L2",null,{"fillWidth":true,"gap":"xl","marginBottom":"40","paddingX":"l","children":[["$","$L1a","hand-tracking",{"priority":true,"href":"/work/hand-tracking","images":["/images/projects/project-01/cv-hand.jpg"],"videoFilters":[],"title":"Real-time Hand Tracking Interaction","description":"Interactive real-time hand tracking system.","content":"\r\nimport HandTrackingScene from \"@/components/HandTrackingScene\"\r\n\r\n## Overview\r\nInteractive real-time hand tracking demo.\r\n\r\n<HandTrackingScene />\r\n\r\n---\r\n","avatars":[],"link":""}]]}]]}]
16:["$","$L1b",null,{}]
17:["$","script","script-0",{"src":"/_next/static/chunks/2f40deff58da8be3.js","async":true}]
18:["$","$L1c",null,{"children":["$","$1d",null,{"name":"Next.MetadataOutlet","children":"$@1e"}]}]
1e:null