Fostering education and engagement with the Hubble Space Telescope through virtual reality…
The Colors of Orion is a 3-minute VR experience that takes users on a journey through the Orion nebula. Through a series of interactive touchpoints, they can learn more about Hubble’s imaging process and the meaning behind each color. Designed for the Oculus Quest.
Client: The Hubble Space Telescope / NASA Goddard Space Flight Center
Role: Project lead with a team of six. Responsible for concept development, user research & testing, end-to-end design (experience, interaction, visual), Unity development (C#). Collaborated with a cross-functional team of engineers, researchers, and writers.
Tools used: Unity (C#), Premiere Pro, Photoshop, Illustrator
Timeline: 12 weeks from ideation to premiere
The Challenge
Hubble's outreach team frequently travels to conferences, festivals, and other events around the country to promote the telescope’s work. But, with Hubble approaching its 30th anniversary, the team expressed concern about the brand being viewed as antiquated. I was brought in to design and create an immersive media product to add to their outreach kit.
The client wanted this product to…
1) Attract more visitors to their booth
2) Promote Hubble's work and research
3) Provide educational value to young students
4) Be easy to setup and travel with
Research & Ideation
We evaluated Hubble’s Instagram analytics and found that posts of Hubble’s images received on average 1.8 times more likes than posts about the spacecraft and/or its history. So, it was decided that this product would revolve around Hubble’s images rather than the spacecraft.
We then interviewed 15 students, ages 11-14, to understand how this segment engaged with and related to Hubble’s images.
We identified a few actionable insights from these interviews:
Students didn’t know how Hubble captures images
They had difficulty interpreting Hubble’s images
Many expressed a common “wish” to visit outer space
“How might we utilize immersive media to educate students about Hubble’s imaging processes?”
“How might we leverage wish fulfillment to attract more visitors to Hubble’s booth?”
The Solution:
Our solution was a VR experience that revolved around Hubble’s image of the Orion nebula.
An opening scene introduces users to Hubble’s imaging process. Then, they fly through a 3D visualization of the nebula and select different colors to learn about what they represent (e.g. Red indicates Hydrogen). It would also be developed for the Oculus Quest to allow for easy setup and travel.
Experience Flowchart
Design Constraints:
Hardware Limitations: The Oculus Quest has limited performance capabilities, and the Hubble team planned to run the experience for hours at a time. So, the game architecture had to be designed to reduce workload.
HQ Guidelines: NASA HQ had very strict guidelines on style and content. So, all written materials were developed alongside Hubble’s science writers to meet these standards.
Spatial Constraints: Hubble is given a limited amount of space for each event, with little room for physical movement. So, this had to be a stationary experience.
Simple UX: Many users wouldn't be familiar with VR, and the team couldn’t give each user a tutorial. So interactions had to be simple— only one button is used throughout.
Interaction Design
The final concept we chose was the Color Targets interface. Other early concepts can be seen below it.
Color Targets: Select a “color target” with raycast to open an info panel, which can be toggled on/off
Why We Chose This:
Heavily favored by client
Allows for the most stationary experience
Light workload, simplest game architecture
The lack of obvious tools reduces complications re: HQ style guidelines
Magnifying Glass: Hold a magnifying glass over a color “magnification point” to learn more about it
Why We Didn’t Choose This:
Invites more movement, may be difficult to accommodate spatial constraints
Would need to give user flight control
Eyedropper Tool: Select a “color drop” with an eyedropper and place it on palette to learn more
Why We Didn’t Choose This:
Creates more room for user confusion and increases workload
The eyedropper is not conceptually intuitive for many
Constant presence of palette may obstruct view
Interface Design
The design of the info panel was heavily guided by research on text parameters for reading in VR. Key findings I incorporated:
Sans-serif fonts are preferred over serif fonts
White text on black is preferred over black text on white
The preferred height of a text box is 7.3 ± 1.7 lines and the preferred width is 40 ± 6.5 characters
Read-ability and text comprehension significantly improves with larger font sizes
To take advantage of the 3D space, each info panel is made of multiple layers offset for parallax.
Left Controller
Info Panel Sketch
Right Controller
Results & Reflection
This experience premiered at the Apollo 50 Festival in conjunction with the National Air & Space Museum. It exceeded initial expectations.
The team was initially prepared to accommodate 10 guests/hour with one headset. Due to popular demand, a second headset was added, and the experience ended up attracting about 30 guests/hour.
Was also taken to EAA AirVenture OshKosh, where the Hubble booth attracted approx. 8500 more visitors than the year before.
Now a permanent fixture in Hubble’s outreach kit.
Looking back, I would like to have spent more time on usability testing. I was very focused on shipping the product in time, and was only able to hold play tests at the NASA campus (where the play testers are more tech-savvy than the average person). So, at the premiere, I noticed some usability issues that weren’t accounted for.
Ex. First-time VR players often kept the controllers close to their chests. So, when the info panel popped up, it blocked their view.
