Context:
Role:
Duration:
Produced for the Space for Art Foundation at Moving Labs
UX/UI designer
Five months (part-time)
At Moving Labs, we partnered with the Space for Art Foundation to create a website celebrating their BEYOND spacesuit project. The suit is printed with over 600 pieces of artwork collected from children in hospitals, refugee centers, orphanages, & schools around the world.
I led UI design and UX research and collaborated on the UX design.
The Space for Art Foundation approached Moving Labs to create a website where kids could see a 3d model of the suit and browse the artwork that appeared on it. We had the suit scanned and produced a 3d model for the website. Their three design goals were:
We designed an interactive atlas of artwork, pictured above. I lead UX research, UI design, and was one of three UX designers. The site was not launched while I worked at Moving Labs.
We felt that a website offered a unique opportunity to help kids (and adults) make sense of the global scope of this project, helping them see not just the final suit, but all the artwork from which it was created. From the beginning, we saw an interactable 3d model on the site as an ideal way to accomplish this.
Initial designs (pictured below) laid out a simpler browsing setup, but as I joined the project, we realized that this design would have trouble scaling to mobile (where 3d interaction would be more awkward) and be somewhat unfriendly to screen readers.
To better think about actions we supported and the needs of people using our site, I created the user stories below. In particular, these helped us think about educators' needs, who would potentially be champions (and users) of the experience as much as children. These were based off of a few interviews we conducted and secondary research on educational technology. I also designed a larger survey and interview series that was never able to be conducted.
To better serve the above stories, I collaborated with fellow Moving Labs UX designer Adit Dhanushkodi to evolve the existing design to accommodate a side bar with navigation features and country name indexing in the frames shown below.
While I worked on sidebar design and overall navigation, Adit focused more on the "vital signs" features and viewing modes. We tested a clickable prototype of the design shown below at mid fidelity with many more screens.
Inspired by Google Maps and other common apps, we used a bottom drawer UI pattern to translate our design to mobile. We weren't sure, however, that it would be discoverable, as secondary research showed that kids under 13 were often not heavy mobile users.
Doing a round of remote and in-person usability testing helped us test out or designs for usability and comprehension before moving to high-fidelity. I lead in-person and remote usability testing, including writing session scripts and analyzing our data.
The bottom drawer was relatively well-received:
Testing also helped us see that the overall usability was fair without a facilitator and likely much better in a classroom setting, where teachers could help kids stay on track when they lost focus, lost confidence, or forgot task details.
Out of 27 total tasks (9 kids each completed the same 3 tasks), we used a metric of task confidence rather than mis-clicks or similar to gauge success:
We were surprised to see some artworks that weren't visible because of the scan fidelity and the placement of artworks on the sewing pattern. A spotlight effect that I designed to reveal artwork helped us get around this issue. Instead of revealing the actual suit in color, we could instead reveal an image of the underlying sewing pattern for artworks that were not legible.
I created this and smaller animatics throughout the process to help communicate within our design team and with client and developers. These were especially important for the intro sequence.
As lead UI designer, I created these high-fidelity wireframes for our design-development handoff alongside screen flows and annotations.
In their art workshops, the Space for Art Foundation uses space exploration as a metaphor for not only our conections across borders, but also to our shared responsibility to take care of the earth itself.
In the final design, site visitors can see a visual display of precipitation, vegetation, or temperature on the globe. When in this viewing mode, countries are also organized according to these parameters, making connections based on ecology rather than continent.
To compare the earth and a spacesuit, which both sustain the lives of their inhabitants, we created a similar view showing analogous vital signs that modern spacesuits regulate, shown below.
I created three different directions for the look and feel and UI design direction. I looked to tone as an important differentiator between different art styles incorporating hand-made elements. We needed to balance a welcoming and playful atmosphere with acknowledging the significance of the BEYOND suit undertaking. Not only did the potential audience span kid and teenage groups, but many of these workshops were also an event punctuating hospitalization for serious illness.
Ultimately, we settled on a look inspired by DIY printing and illustration, celebrating accessible creativity in a way that felt exciting but still appropriate for the entire range of ages within the Space for Art Foundation audience. For the sake of usability and to make development easier, we also needed to make cleaner, more modern UI elements blend in naturally. After setting our art direction, I was responsible for our UI design, creating the final wireframes pictured above, as well as textures for 3d models and a UI kit for front-end development.
I joined the project after the initial design direction had been determined, so there was no initial phase of exploratory research to inform the concept. However, we did conduct some of this research as the process went on, focusing on doing user research to understand the perspectives of children and educators.
With children, we hoped to find problems and successes with classroom activities, as well as get a sense of the place of technology in their lives. With educators, we hoped to understand their needs and frustrations with digital learning materials to make the site more helpful for them.
We saw that kids valued classroom activities as a break from routine, often mentioning creativity or tactile elements as something they liked. The project concluded before we could reach out to enough educators to draw much insight, but from a few conversations we saw that educators often needed new learning materials and valued digital resources as aids for inquiry-based learning.
These infographics illustrate two insights we gained from our user research. While conducting usability testing, we also ran 15-20 minute interviews to collect the data that is quoted here. I coded the interviews and also did the synthesis.
We obtained informed consent from parents and assent from children who participated, informing them explicitly of our data handling practices and what steps we would take to anonymize interview records.
While working on the suit, we created tools and processes to streamline working with and adding additional data layers to 3d scans.
Due to its uniqueness and bulk, the BEYOND suit could not travel to LA. We were, however, able to contract with a local photogrammetry expert in Florida to turn the suit into a 3d model. He helped with some initial mesh optimization and rigging, which we tuned slightly at later stages. One unexpected need in particular was to make the UVs human readable so that we could find all the student artworks in the database. I re-cut the UV seams and reprojected the UVs, yielding a model we could more easily map our 400+ artwork locations onto. Our graphics developer wrote a custom application to greatly speed up the process of logging artwork locations, pictured on the right.
The longer graphic below illustrates a sequence of changes to the 3d asset to prepare it for 3d interaction.
