Folio
Spatial interface of app library.
Team
- 1 developer
- 2 designers (including me)
My Role
- Interaction design
- Creation of model textures
- Prototyping
- Testing
Tools
- ShapesXR
- Blender
- Unity
Timeline
1 week
Inspiration
The current 2D UI systems for app libraries and app stores feel outdated, uninspiring, and disconnected from the immersive nature of XR environments. These interfaces fail to align with the spatial context of real-world rooms, breaking immersion and diminishing usability. Folio seeks to address this gap by offering an innovative, spatial 3D UI design.
What it does
Folio reimagines the app library as an interactive 3D shelf filled with dynamic, book-like representations of apps. Each app is visualized as a unique 3D book, complete with customizable covers and immersive animations. Users can intuitively interact with these books to access app details, view media, and launch or manage apps seamlessly, creating a natural and engaging XR experience.
How we built it
We started by brainstorming a concept that aligned with both our vision and the hackathon theme. Once the idea was clear, we identified the essential components needed to bring it to life. Drawing inspiration from existing XR interfaces, we researched references and best practices to guide our development. The team designed and sourced 3D models, textures, animations, and sounds to create a cohesive visual and auditory experience. A prototype was first crafted in ShapesXR to test spatial interaction design before moving to Unity for full functionality. Finally, we polished the experience by recording a trailer that highlights Folio’s immersive features.
Challenges we ran into
Developing Folio presented a range of challenges, including implementing intuitive hand-tracking input and ensuring the spatial UI felt natural and easy to use. Designing smooth and visually appealing UI animations, as well as minimalistic yet expressive book textures, required significant iteration. Scene understanding posed another hurdle, as we needed accurate spatial mapping for the seamless placement of the 3D shelf. Moreover, enabling smooth transitions when opening external apps from Folio proved technically complex. Importing animated model states into ShapesXR for prototyping also demanded creative problem-solving. Despite these challenges, our team’s resilience and adaptability ensured steady progress.
Accomplishments that we're proud of
We successfully built functional prototypes in ShapesXR and Unity, bringing our vision to life in both visual and interactive forms. Integrating the Meta SDK package was a key milestone that allowed Folio to operate seamlessly within the XR environment. We’re particularly proud of the intuitive and dynamic 3D book interactions we created, which showcase an engaging new way to interact with app libraries. Above all, our team’s strong collaboration and communication played a vital role in achieving these milestones within the tight hackathon timeline.
What we learned
This project reinforced the value of focusing on the core idea and avoiding feature overload. We learned the importance of testing builds early and iterating based on feedback to ensure stability and usability. Additionally, we developed new skills in creating grab interactions, designing custom textures for 3D models, and animating them to enhance interactivity. These lessons not only improved Folio but also strengthened our overall understanding of XR design principles.
What's next
Our future plans for Folio include refining the interaction mechanics and animations for the 3D UI books to make them even more lifelike and responsive. We also aim to evolve the 3D shelf into a versatile spatial menu bar, enabling seamless navigation and customization. Finally, adding features like app categories will personalize the experience further, making Folio adaptable to users’ unique needs and preferences. These updates will solidify Folio as a groundbreaking solution for XR app libraries