I am an XR designer with architecture background, working from SF.
Immerse in your building to tell the story.
Storytelling is one of the powerful communication tools used by architects to present their design. I am experimenting a new way of storytelling that combines the advantages of both the informative diagrams and the convincing immersive experience.
Architectural presentation in 2D media provides abundant information, but can hugely benefit from a deeper emotional connection with the audience. This project establishes a new framework to quickly create spatial narratives in VR. It harnesses the immersive affect to facilitate a powerful way of storytelling.
I turn our architectural design into the VR storytelling to enhance two crucial aspects of architectural presentation:
To convey the design concepts, architects often turn to diagrams that explain the building at various scales and methods of abstraction (such as views: plans, sections, isometric views etc.). I selected 3 diagrams at different scales from the whole building to the lobby. They also address different views.
The red spaces in the exploded diagram (left) are the Heart Spaces where faculty and students mingle and collaborate. Floor to ceiling windows on both sides of the building are designed to connect the users to the outside world.
On the ground level, the Heart Space offers the grandest welcome to all students on campus to see through the glass wall and experience science in the making. To invite everyone into the science hub, multiple floor-to-ceiling glass walls open up the lobby, blending the activities inside and outside the space.
Next to the full height exterior windows, the wood beams puts on the warmth of the changing sunshine filtered through redwoods on campus. The tables welcome students to grab coffee and collaborate under the “intertwined tree branches”.
I designed the main UI is to present common types of 2D architectural diagrams. Visual comfort is paramount for user experience in VR environment. I tried to achieve a clean layout to balance the rich visual elements in the building. An organized design system makes it a breeze to update and style all content on the boards.
Following common VR human interface guideline, I created a UI template that fits in 60° FOV. All design elements translate at 1:1 ratio, via a fixed frame size between Figma and Unity. The design will be fine-tuned during VR testing with Unity.
Iterations in Figma: Option 1 - The hovered tooltip. It creates the cleanest layout and would be great for eye-gaze interactors. But for the first time users interacting with hands or controllers, It adds too much friction.
Option 2 - CTA is singled out at the bottom right corner.
Option 3 - All buttons are consolidated in the navigation bar at the top. It works for the current use case with the limited number of buttons.
Once the design option is selected, I was able to quickly translated it in Unity with MRTK3. During the testing in VR using Unity, the layout is further simplified.
In order to smoothly handle the complicated architecture model and test the prototype frequently, I chose to jump in Unity rather early. After model optimization and light baking, it became a lightweight VR experience to run and test with.
The navigation system the backbone of the storytelling. It provides the diegetic hotspots that are easy to discover and nudge the users forward with simple animations. The users also have the liberty to deviate from the curated path but is only one teleportation away from returning. (The presentation boards are temporarily shown for explanation purpose only here.)
In VR, it is much easier to explain the building than via 2D media. The users are able to initiate the reading of the diagram then discover the correspondent building part from their own perspective.
To read the diagram and highlighted building simultaneously from different angles, the user can walk around. 2D board will automatically follow user's position to ensure legibility.