I am an XR designer with architecture background, working from SF.
A magical way to step back into the moment.
Be it a 360° photo, a VR video or a 3D model - with the power of virtual reality, Immersive Mementos can:
Immersive Mementos seeks to fill an anticipated need to harness the growing popularity in capturing and sharing immersive content. The current apps available are inadequate and unintuitive for reviewing, personalizing, and sharing immersive content. A common problem is that previously effective 2D UI on flat screen often becomes a “fourth wall” which breaks the user’s immersion. A native and immersive tool is needed to fully utilize the benefits of the immersive workspace.
Immersive Mementos is set up to optimize the process:
To better explore the design process for XR, I employed the 5-step Design Thinking process as the framework, enhanced with 3D and interactive design tools to efficiently iterate and prototype ideas.
The project is aimed at a scenario where everyone has easy access to capture and share 360 photos and videos. To facilitate the ideating process, I use the persona of a college student who wants to create a visual journal of her trip to San Francisco. With this visual journal she can revisit the immersive moments she captured and share the trip with her friends. From there, I branched out to several analyses and ideations including scenarios, UI components, and space design.
When the user initially enters the app, she sees a 3-panel layout which offers an overview as well as a quick look at the content with descriptions. From here she can preview and organize multiple immersive mementos.
When the user is immersed in the memento, she will want to enrich the image with personal notes and thoughts. She can choose to share the comments with friends or create a portal to another related memento for them.
When the user wants to curate individual mementos into a visual journey, she will gather her friends into her virtual living room. They will work together to create a 3D map with their favorite mementos and add their comments.
In Library scenario, the 3-panel preview interface takes center stage to organize content and provide the full functions of the app, which include:
In Immerse scenario, users immerse themselves in the selected memento from the Collection.
In Collaborate scenario, users work together to create a visual journey of mementos.
To create intuitive and fun interactions from the beginning, the main interface harnesses the benefits of both 2D informative UI and 3D Diegetic UI.
To ensure the user’s full immersion, the main interface is simplified to some essential features. The memento serves as a 360° canvas for personalization.
Friends gather around a tabletop 3D map to view and collaborate on their mementos. User flows are optimized to promote social interactions.
As the primary input points, controllers are designed with simplicity in mind. Buttons and tooltips are contextualized to the user's task at hand.
In Library scenario, the preview interface is composed of two main parts:
In Collaborate & Immerse scenarios, the user wants to interact with the virtual space and other users. The interface adapts and minimizes to the essential Collection tray, which is in sight but out of the way.
When the user creates a new Collection tray, a simple and effective animation is triggered that I implemented using Unity’s C# scripting plugin DOTween.
Once the user triggers the plus button:
Affordance of the current interaction state is achieved by animation. During testing, I realized that users were sensitive to animated UI in a VR setting, so simple and subtle animations were implemented to gently guide the user:
The UI animation is elegantly achieved by one line of DoTween script:
To organize prefabs in a design system, animated reticles are managed as variants:
These fine-tuned interactions include:
Turning static 3D storyboards into interactive prototypes added multiple layers of complexities. The user flow is dissected and guided in a series of interactions listed below:
Much thought was put into reducing the friction of interactions. Take the action of duplicating a memento as an example. To provide the frictionless hold-and-drag interaction, I implemented a pair of C# scripts - utilizing Unity XR Interaction Toolkit - to pass the memento’s data from the original (A) to the spawned replica (B) during runtime. The user only needs to use one button to complete the task.
To promote social interaction and visual connection with others, the user’s 3-panel Preview is toggled off, removing a visual obstacle.
When the Collection tray is open, the user needs to focus on the content in the preview UI. I implemented 3 cues to guide the user’s attention when the Collection tray is in use:
The input to Duplicate (grab button) is only activated when the controller’s raycast hovers over a duplicable memento. It works in tandem with the interactive cues of mementos.
The tooltips are helpful for new users and in the onboarding process. To stop them from being distractions, experienced users have the option to toggle the tooltips on and off using the green button.
As the prototype was being developed in Unity, the project grew in complexity. Various essential parts were dissected and managed with refactored scripts for expandability. Some examples:
