See full case study below
The Virtual Basilica Project is a cross-institutional project that brings together Stanford, Dartmouth, and University of Oregon faculty and researchers to bring to life the 1,500 year old St. Paul’s Basilica in Rome, Italy. The Virtual Basilica reconstructs St. Paul’s as a teaching environment that allows users to explore the basilica through space and time with the ability to stop multiple times between the 5th century and today. Acting as a pedagogical tool, its interactive viewings of primary source materials, narrated virtual tours, and exploration capabilities allow users to engage with this historical marvel in a new medium.
Project support from:
Because of the Basilica's long history, there are areas of our model that are uncertain –– creative liberties had to be taken with the design as there are reigning academic theories about what certain areas (e.g., certain mosaic floor pieces) looked like, but no definitive answer.
To ensure the accurate communication of ideas, we had to communicate to the user the 2 types of uncertainty that may exist in our model:
These two types of uncertainty are distinct, so we needed a distinct way of visually representing these uncertainties to our users in a way that made sense in virtual reality.
How might we model two distinct types of historical uncertainty in Virtual Reality?
I designed two novel types of uncertainty mode to be showcased throughout the virtual basilica, and led the redesign of the VR UI for intuitive usage. Above, you can see what the uncertainty looks like in the space, and below you can see my UI in action as users navigate through time to "time travel" through historical eras of the basilica.
For the sake of brevity in this case study, I will predominantly discuss the design, test, and iterate sections of my work, focusing on the 2 key challenges that I worked through.
My first challenge was to tackle representations of historical uncertainty in the model. Because location uncertainty and material uncertainty were fundamentally different (but non-exclusive), it was important to find a way to make their visual representations distinct enough for the viewer to both learn the difference between the two, and also observe where an object may be both locationally/materially uncertain.
To get started on this challenge, I began by ideating different ways we could highlight objects in one’s field of vision:
At this stage, it became clear that accessible design would be a key KPI. Despite brainstorming in an extremely bright color (hot pink), in VR spaces and with movement it was not accessible to our color-blind teammates.
We settled on two movement-based ways of highlighting objects: Overlaying the surface of an object with a moving texture, and moving each subsection of an object's model.
Overlaying the surface with a moving texture would allow fully color-sighted individuals to see the difference via color or shade, and allow color-blind users to see the difference in texture.
We decided to use this for material uncertainty, as it highlighted that the surface of the object may not have been as it seems in our rendering.
Moving object subsections used for locational uncertainty means that users can tell when the precise placement of any given object is up for debate.
For large objects like the mosaic floor, entire-element movements would be uncomfortable or even motion-sickness causing for the VR user. To solve for this, we decided to move each individual geometric piece the model was made out of. Here, you can see it as the individual mosiac tiles or pieces of stone that make up our build.
The second challenge I went through was doing a UI overhaul on the platform. When I first joined the team, the experience felt disjointed because of a lack of cohesion in visual elements across areas/points in time. To start off, I did a UX deep-dive to identify the inconsistencies in design details (font size, kerning, etc.) that drove the feeling of unpolishedness we heard from users.
Because inconsistency was such a dominant concern throughout, I decided to tackle it in two ways:
1 - Create a Universal UI theme that makes the entire experience feel consistent and thematic.
2 - Document changes and implement it onto every element across the experience so everything follows the same logic and hierarcy.
After diving into similar VR builds, I noticed that there were 2 main strategies for how to best design UI for the virtual reality interface of a historical building. One tactic was to use the architecture of the building as inspiration, and create designs with lifted elements that had a historical feel:
The other was to lean into the digital nature of the experience and create floating 2D translucent panels that would minimally obscure the background minimize distraction away from the build:
After discussing with key stakeholders, we decided on the V2 modern overlay designs. Though historical inspiration was exciting, because there were so many popups and interactions in one's view at all times, we decided it was best to go this route so that users could focus on the basilica itself. Here, the UI is not the star of the show, the building is, and we wanted to make sure that we were able to use our UI choices to highlight instead of distract from it.
Below are some additional icons, popups, and flows we designed after settling on our overall UI scheme.
In all, this UI facilitated 7 time periods for all users of the Virtual Basilica to navigate through. It created a more dynamic map, guide, and navigation system, and allowed for users to understand what the historical certainty was of all objects within the spaces with one unified visual language.
Working on a problem without established industry standards or best practices was an exciting challenge—it pushed me to lean more heavily on creativity during the ideation phase. As someone new to VR, I was especially proud of how I was able to adapt and translate my prior design experience into this unfamiliar medium.