Accessibility & UX Design
NASA Eclipse Soundscapes
An interactive, user-friendly web map designed for eclipse viewers with visual impairments.
Project Type
School Project
Project Duration
4 weeks
Team Member
Siri P. & Kaiqing S.
Software Stack
Figma & Adobe Creative Suite
My Roles
UX Researcher and Designer, Accessibility Advocate
Deliverables
✅ A comprehensive research to identify the specific needs and challenges of web-based map users for solar and total eclipse viewing.
✅ An interactive, web-based map for Eclipse Soundscapes that adheres to WCAG standards. Ensure the map is fully accessible and easy to navigate for all users, including individuals with disabilities.
Design Impacts
🔹 Directed the R&D of a WCAG-compliant, user-focused web map application in Figma for viewing the 2023 and 2024 solar eclipses, funded by NASA; collaborated closely with a team of designers, web developers, and clients to ensure a seamless and inclusive user experience.
🔹Led multiple iterations of user testing, incorporating feedback from over four rounds to refine and improve the digital experience and accessibility.
🔹Shortly after the completion of this UX research and design project, Eclipse Soundscapes embedded a web-based interactive map for eclipse path finding and viewing. As of April 16, 2024, over 3K Eclipse Soundscapes Apprentices participated, and 3K+ ES Observers submitted their observations from April 8-15.
01 Background
In my UX Design class at NYU, my team and I had the exciting opportunity to collaborate with NASA on the Eclipse Soundscapes project. We quickly realized that many users struggled to determine if their location fell within the eclipse path or when the maximum phase would occur, especially in accessible ways. While other websites offered interactive maps, they often fell short of meeting accessibility standards.
Motivated by this challenge, we set out to create a user-friendly, WCAG-compliant web map that would provide eclipse information in a way that everyone, including those with disabilities, could easily access and understand.
02 Research
02.1 Accessibility Testing
Our team conducted an accessibility assessment on three web-based interactive map applications: Eclipse2024, TimeandDate, and Stellarium, utilizing the Web Content Accessibility Guidelines (WCAG) standards and the Web Accessibility Evaluation Tool (WAVE). We observed that all maps exhibit certain errors and alerts, which could pose challenges for individuals with disabilities in fully accessing the map. These issues include missing alternative text and the absence of descriptions for visual images.
02.2 Competitive Analysis
After conducting a competitive analysis on three existing eclipse maps, we found that all of them offer basic interface editing functions such as location search (to determine if it lies within the eclipse path), zooming in and out, and full-screen display. Two of the maps employ color-coded eclipse path indicators, allowing users to pinpoint their locations within or outside the path. However, the use of color-coding with varying opacities to indicate different levels of visibility may pose challenges for visually impaired individuals. Furthermore, the interactive elements within the maps are not compatible with screen readers, potentially excluding many individuals from accessing these valuable resources.
02.3 Pain Points Analysis
We identified three common pain points users encounter with web-based interactive maps for eclipse observation, after a thorough collection and analysis of reviews and online forums related to the three existing map applications.
03 Solution Design
03.1 User Flow
(click to expand)
03.2 Information Architecture
During our investigation of user flows, we identified some issues with the current website's architecture. To address these concerns, we restructured the website and incorporated the interactive map under a new, dedicated tab.
03.3 Wireframing
03.4 Design System
Light Mode Color Guide
Dark Mode Color Guide
04 Final Design
Feature 1: Location Search
Scenerio 1 - when location is within eclipse path
Scenerio 2 - when location is NOT within eclipse path