ARISA Labs: Eclipse Soundscapes (2021)

UX Design
Project Overview
This project was done for Regine Gilbert's UX class at NYU's Tandon School of Engineering in collaboration with ARISA Labs and NASA. The Eclipse Soundscapes project aims to create accessible opportunities for citizen scientists to participate in eclipse research, particularly in analyzing soundscapes on Earth. Our team's solution is a web (desktop and mobile friendly) interface that allows people of all visual abilities to participate in citizen science research.
My Role:
User researcher, designer
Team:
Lilly Lin, Carmen Vargas, Kendra Barber
Tools:
Figma
Timeline:
8 weeks
Constraints:
timeline, personnel

Problem Statement

In the past, solar eclipse viewing has been inaccessible to those who have vision impairments. By focusing on the sounds of eclipses, or eclipse soundscapes, we’ll create a new way for users to contribute to a Citizen Science research project. We aim to create a platform where people can easily upload, search for, and analyze sound data regardless of visual ability.

Process Overview

REsearch

first concepts & Design

user testing

iterating

RESEARCH

Secondary Research
Persona
Interviews

1ST CONCEPT & DESIGN

Because we envisioned this as a separate website accessible from the existing ARISA Labs site, and to more effectively divide up the design work amongst the team, we started with creating a site map (shown below).

Goals

Our goal with the Eclipse Soundscapes site as a whole is to make participating in citizen science research (uploading, analyzing, and sorting through audio clips in this case) an easy to learn and easy to participate in activity. This would look like:

Success would look like a high number of users completing tasks at a high success rate (clicking through the pages all the way), and a high percentage of users returning to the site after initially visiting and completing a few tasks.

Due to time constraints of the project, we had to prioritize which pages were going to be prototyped first and thus have a chance to be user tested and iterated on. We decided that of the various subpages after the Home page, the Analysis page, where the user would be actually analyzing sound clips and contributing to research, was the place to start.

We started with a low fidelity wireframe of the home page, we wanted to make sure first and foremost that the buttons were large and clearly labeled, thus making the site easily navigable.

Next we made low and high fidelity wireframes of the analysis page. We wanted to have a high fidelity prototype for user testing since color contrast is incredibly important for users experiencing low vision.

USER TESTING

Who:
‍3 user testers, all considered legally blind
1 viewed the black and white prototype, 2 viewed the hi fi color prototype
What:
All 3 tested out our prototype as well as the existing Eclipse Soundscapes site
How:
Conducted one-on-one over Zoom screen share, about 10 minutes per testing session
Results:
For the existing Eclipse Soundscapes site, our users pointed out that they liked the color contrast and overall color scheme as it was easy to read. However, they found navigation through the site difficult due to the uneven placement of headings on the navigation bar, and noted that larger and more obvious headings were preferred.

For our prototype as shown above, our users mentioned that appreciated that the button functions were easily understandable, and that they liked the simple layout. However, they also mentioned issues with navigation and wayfinding. It was confusing to have both a navigation bar as well as the large buttons, and it was difficult to tell what each page was for just by their titles. They also commented that the text on the navigation bar was small and the logo was hard to see.

Another general note to make was to make sure our style guide accommodates both light and dark mode, as our users have different preferences and it is easier to adjust within the site rather than having to adjust device settings.
‍

ITERATING

After receiving user feedback, we removed the navigation bar from the home page, but kept it on the secondary pages. We also used larger text on the navigation bar, and a larger logo image. The home page buttons also have a short description added in order to provide more context for the user.

FINAL PROTOTYPE

For our final prototype, we included wireframes for the Updates and Badges pages.

The following clip shows a brief demo of the file navigation in the Analyze page

The next video is a demo of how a user would analyze an individual sound clip using our interface.

This final clip is a demo of how a user would browse the existing soundscapes database for clips to analyze.

We also included a few mobile mockups:

REFLECTION

What's Next?

We were under severe time constraints for this project, so if we were to do this again we'd definitely do more rounds of user testing and iterating for not just the Analysis page but for the other secondary pages as well. The user testing phase of this project was crucial to helping us make adjustments to our first round of wireframes, and I feel that we probably missed out on similar opportunities for the other pages simply because we didn't have the time to prototype and test an entire site in the time frame of the class.

If given more time, I'd also love to begin developing some of these pages and interactions into a more high fidelity prototype using something like React.js in order to start linking some back end features (like the database search feature). Our current prototype is done in Figma with the primary goal of having something lower fidelity to test the design in its initial stages.

Takeaway

Overall, I feel like this project gave me great insight and practice in the research and design process. I really enjoyed speaking with our user testers and our user interviewees in this process - it almost felt like a collaborative experience with them. Hearing about their experiences with navigating the web was incredibly insightful and helped inform our design decisions - like I mentioned above, I wish we had more time to consult with them further and really develop all aspects of the site.

This project was also special to me because I am personally passionate about accessibility within education, and this was my first opportunity to participate in a project like this as a designer. It taught me how to work in a group to ideate and split up research and design tasks, and it challenged me to frame the task in a way that puts the user first. I'm really excited to see what ARISA Lab continues to do with the project, and I only wish that our time on the project was longer so we could further develop it.

Powered by Webflow