Terrain
A Virtual Reality Experience Of Stories in a Melancholy Environment
At a Glance
My Roles: UX Design, Interaction Design, A-frame Developer
Timeline: 2 1/2 weeks
Team: 4 Designers
Methods: Personas, Wireframing, Storyboarding
Tools: Photoshop, Paper Prototypes, Sketch, A-Frame
Problem
Designing for an emerging technology where many design standards are undefined presents a unique challenge and a large area to explore. We created an experience that was accessible for all VR headsets, and non VR, forcing us to keep interactions to a minimum, making us think about the proper use of gaze and focused interactions. Additionally, VR let me explore and experiment with other senses such as sound not often found in traditional interfaces.
What I Did
I owned and led the end-to-end strategy and design of each iteration of the onboarding experience. I conducted research, defined visual direction, created user journey maps, user flows, and prototypes, and designed integrations between Azure Build Health and other parts of Azure DevOps.
Concept
Designing for an emerging technology where many design standards are undefined presents a unique challenge and a large area to explore. We created an experience that was accessible for all VR headsets, and non VR, forcing us to keep interactions to a minimum, making us think about the proper use of gaze and focused interactions. Additionally, VR let me explore and experiment with other senses such as sound not often found in traditional interfaces.
Ideation
Our project brief challenged us to create an application that exposed the invisible, underlying layers of data in a given place. We wanted to present the deeper, more personal, and peculiar stories that reflect the people living there. To do this, we needed authentic stories from the people who lived there, so we decided to use Craigslist "Missed Connections" section as the source for our story's material. We aimed to create a virtual city viewers would explore while finding poems.
Interaction Techniques
We designed for low fidelity VR headsets to create an experience that could be viewed by anyone. Specifically, we designed with google cardboard in mind. This greatly limited our interaction styles as google cardboard only has a few interaction techniques:
Looking
Tapping
Tap & Holding
Double Tap
These limited interactions defined how we controlled user movement. Navigation was a key challenge due to lack of traditional movement options like keyboards, input pads, or joysticks.
Prototyping Topographic Views
During Low Fidelity testing, we created an experience with two different types of views: a topographic that had the viewer looking down at the city from the sky and a street view where the viewer was standing in front of the person in front of a "speaking" avatar.
To create this environment we developed using a VR framework called A-Frame. We used the topographic view as a navigation method and allowed users to see where the most posts had been located. As the avatar "spoke'", the poem scrolled vertically infinitely toward the sky, creating a sense of ephemerality of the stories being told.
The topdown view featured spheres that were larger the more stories were in that area.
Testing and Feedback
After testing and collecting feedback, we decided to move away from the topographic view. While the view allowed for a more novel approach to how the user could observe and navigate the data, it detracted from the immersion and cohesion of the experience.
We increased a lot of legibility issues and decided to place a box on the speaker's head to increase the feeling of anonymity of the speaker as well as reducing the viewer's urge to try to identify the person speaking rather than reading the story.
A simple look and tap interface worked best to allow the viewer to easily change between stories. The viewer's gaze moved the cursor and tapping the button selected the option.
Final Design Changes
Environment Design
In order to get a dystopian feeling, we wanted to create a cityscape environment to portray the existence of civilization. However, this existence in the cityscape was coupled with stories that helped create a feeling of isolation.
Audio Design
While designing the audio experience, I used sounds that reflect the somber nature of the stories as well: slow piano music, rain, horns honking, and the sounds of people murmuring. By combining natural and city sounds, the viewer never feels like they are "alone" in the environment, but they cannot connect with the other people around them.
Navigation Design
We felt that a simple look and tap interface worked best to allow the viewer to easily change between stories. We used the viewer's gaze to move the cursor and tapping the button on the headset selected the navigation options when hovered over. This approach also helped keep the viewer immersed in the environment and did not create emotional distance between the stories and the viewer.
Retrospective
Overall this project went well. Looking back on this project, I would focus on scoping down our project. We tried to do many things that never made it into the final experience due to time and technical constraints. Some things we wanted to try included overlaying city textures from satellite imagery over the 3D models, animating the speaker’s limbs, and having paper and flowers blowing in the wind. Working with a new framework made implementation slower. We also learned to consider technical constraints of less powerful devices as these extra assets led to performance issues.