NASA: Eclipse Soundscape Citizen Science Project
Arisa Labs x NASA x New York University
Researched solutions for making the Eclipse Soundscape website more accessible to blind and low-vision communities and suggested new pages for improving the user experience.
Category: Accessible Design
Team: Jayden Kim, Rithika Repakula, Yiting Zeng
My Role: UX Research, Visual Design, UX design
Tools:Adobe CC, Figma, Miro
The Eclipse Soundscapes Project aims to deliver an accessible multi-sensory mobile and website digital experience of total solar eclipse that allowed everyone, including people who are visually impaired, and others who were unable to see the eclipse with their own eyes, to experience the event.
This website redesign project is supported by NASA’s Space Science Education Consortium (NSSEC), the goal is to create an accessible web experience following the WCAG requirements, so it can better serve low vision and blind citizen scientist communities, and at the same time benefit general users.
Eclipse Soundscapes
Enhancing the celestial event for people who are blind and visually impaired
The Challenge:
How do we design pages to support the Eclipse Soundscapes: Citizen Science Project (CSP) to meet accessibility standards and also be incorporated into their existing website?
The Problem:
Visual understanding is difficult on the website, thus we think about how we might improve the accessible experience for visually impaired users and screen reader users and at the same time benefit the general user.
Process
The process started with conducting the Heuristic Evaluation as a group so that we could find as many usability problems across the whole existing website as possible, and then we sorted all the problems into broader actionable categories.
Research
After we identified the potential pain points from Heuristic Evaluation, we prepared a list of questions for our client ARISA Lab, so we can confirm previous design decisions from a business perspective. With a broader picture of why things are designed the way before, we had a clearer path moving forward on examining the current information architecture and user flow.
Information Architecture
Ideation
“Color contrast of the background and text spacing is not important to visually impaired users. Because they will use voice-over to interact with the web”
Designing with Accessibility is the KEY
Themes and Insights
Designing for the visually impaired
High contrast between background and text
Accessible color palettes
Accessible font, font size, and text spacing
Designing for blind users
Video contents with audio transcript
Create navigation without all Caps
Following the HTML header format
How Might We
How might we redesign the website web pages to create more opportunities for everyone to access the website easily?
Unsupported screen reader users
The use of incorrect heading tags can make it difficult for users to navigate the website
All-caps text can cause problems for users because those words can be mistaken for the abbreviations
How might we provide an experience that allows low-vision users to perceive the information on screen?
Indistinguishable
The information displayed over the background on the screen does not contrast well with the background
People with low vision have to magnify the screen to recognize and read the information displayed on the screen
How might we create a website more accessible to users with visual impairments who use screen readers?
Design
Other than color contrast, the weirdly spaced components plus inaccessible text spacing also played important roles in affecting the readability of the whole website. According to WCAG, Level AAA requires Line Height to be at least 1.5 times the font size, and Lettering Spacing to be at least 0.12 times the font size.
For visually impaired users, the most urgent issue with the current website is the color usage. Without an accessible colour contrast, a high percentage of Bounce Rate (the percentage of visitors to a particular website who navigate away from the site after viewing only one page) can be easily predicted.
Before
After
Before
After
Before
After
Before
After
Before
After
Suggested content with suitable heading tags for the below pages along with video transcripts for making it accessible for the users. Making sure the information was crisp and not redundant.
Conclusion and Future Iterations:
Some of the suggestions that our team presented to Arisa Labs and NASA for helping out to improve the website so that it would suit blind and low vision communities. All the suggestions and research results that were presented by the team were accepted by the labs and taken into consideration for future improvements to the application.