Background
The Space for Art Foundation's BEYOND Spacesuit is one of seven in their Spacesuit Art Project. The artwork used for the BEYOND was collected during the 2 years of the COVID pandemic and features over 800 pieces from children all over the world.
The client's goals for the digital experience were to: 1) Inspire a sense of unity and connection across borders 2) Celebrate the work of the contributors to the BEYOND suit 3) Inspire kids to see the connection between space exploration and ecological stewardship
Concept Development
Each of the client's goals can be seen within the key design concepts in the app.
1. Inspire a sense of unity and connection across borders
We felt that the opportunity of this website was to show the scope of the project, and show connections across borders. To do this, our initial concepts began with using a globe as an atlas, to visualize where the artworks were being contributed from.
Prototyping different layouts and interaction models:
Final Designs:
- Artwork from the current continent is highlighted on the spacesuit.
- Preview of children’s artwork from the selected continent, giving prominence to the artwork in the application.
- Globe automatically rotates in idle state, hinting at the interactive features in the app.
2. Celebrate the work of the contributors to the BEYOND suit.
Highlighting the children's artwork in all three key views of the app (home, spacesuit focused, earth focused)
Giving the app a more hand-drawn look and feel, to reflect the style of children's artwork
Accessibility was important from the start, making sure that our website could be accessed by all the contributors. This meant:
- having a low bandwith fallback for those that can't load an entire 3D scene
- mobile design
- high contrast, adustable text size, reduce motion
- minimize the amount of text, using iconography as much as possible
- include as many translations of text as possible
3. Inspire kids to see the connection between space exploration and ecological stewardship
A key concept for the client was "Spaceship Earth": understanding earth as a spaceship that we all have to work together to take care of. To communicate this, we created a "vital signs" data visualization feature to connect both the spacesuit and earth as similar life-supporting systems.
For the earth vital signs mode, we incorporated NASA's GIBS climate datasets into the website. Specifically bringing in precipitation, vegetation, and temperature heat maps into the application.
This vital signs mode introduced a new browsing mechanic - instead of seeing countries highlighted by continent, kids could use the slider to highlight countries with similar average "vital signs."
Final Designs:
- Use the earth vital signs icons to see three different NASA climate datasets as a heatmaps on the globe.
- The data slider in the sidebar filters countries by their average climate “vital signs,” highlighting similarities between countries beyond their geographic borders.
- Buttons to toggle between three different spacesuit vital signs that help communicate how a spacesuit helps keep an astronaut alive.
- Readout of the vital sign, along with a simple description and resources to learn more.
- Highlighting the relationship between spacesuit vital signs and earth vital signs, illustrating the metaphor of “Spaceship Earth”
Usability Study
We ran a small usability study with kids ages 6-12 to test our navigation pathways on both mobile and desktop. (This effort was led by a different member of the team, but I conducted two of the interviews)
The results from this usability study gave us confidence to continue with our navigation pattern, but showed us areas where we could improve, for example clarifying how our back and home buttons would work.
Final Clickthrough Prototype
Building Tools to Prepare Data
As we moved into the development phase of the project, my role was to use my understanding of the design intent to prepare various datasets for use within the design
Identifying Artwork in 3D Space
Working with the 3D developer, I developed a simple react app to tag artworks from our CMS with 3D positions and additional metadata from the 3D model.
Generating SVG country outlines
The design of the app called for stylized vector artwork of every country. To assist in the creation of these assets, I created a Figma plugin that converted world bank country border data into the stylized assets we needed.
