Folio

1. Concept & Research

As the Product Designer, I set out to create a spatial interface that feels natural in 3D and uses metaphors rooted in human experience.

FOLIO was born as a spatial interface where every app is a uniquely designed 3D book living on a shelf — transforming browsing into a physical experience.

Books became the perfect answer.

A book is:
• physical
• familiar
• interactive
• tells a story
• stores information
• evokes curiosity

The idea of a bookshelf as an App Library also solved a major problem of current XR systems: they overload users with floating rectangles, instead of offering tangible, memorable UI.

2. Design Strategy

I built the entire product vision, UX architecture, and visual direction. This included choosing the book metaphor, defining how apps “live” in the space, and shaping how users touch, move, and explore them.

Everything had a physical logic behind it. Every interaction followed a natural gesture:
• pick up a book to preview the app
• rotate it to explore content on its cover and back
• open it to launch the app
• close it to minimize
• place it on the shelf to organize

I also created all UI compositions, custom book-cover textures, the spatial shelf layout, and the visual hierarchy of the information within each book.

3. Prototype Development

We built an interactive prototype using Unity, Blender, ShapesXR and Figma.
I created the 3D book textures, UI elements, motion concepts, and the spatial interactions that defined how books respond to the user.

The prototype included:
• realistic books
• page-opening animations
• presence-aware highlighting when grabbed
• support for both DistanceGrab and DirectGrab
• subtle hover cues
• smooth return-to-shelf animation
• media previews on the inner pages
• app launch flow via book opening

In VR, the shelf could be freely positioned. In Mixed Reality, we explored dynamic placement issues, eventually deciding on spawning the shelf centered in the room at eye height for universal accessibility.

I also prepared the full pitch presentation and cinematic trailer, which helped convey the idea beyond raw technical execution.