top of page
ESCSP Mockup.png

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.

map_final.png

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.

WAVE_results.png

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.

competitive_analysis.png

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.

paintpoints.png

03 Solution Design

03.1 User Flow

(click to expand)

User Flows 1.png
User Flows 2.png

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.

IA.png

03.3 Wireframing

wireframe.png

03.4 Design System

font.png
buttons.png
Light Mode Color Guide
Dark Mode Color Guide
Color Guide.png
Dark Mode Color Guide.png

04 Final Design

final_prototype.png

Feature 1:  Location Search

Scenerio 1 - when location is within eclipse path

search_pass.gif

Scenerio 2 - when location is NOT within eclipse path

search_fail.gif

Feature 2: Zoom In & Out

Feature 3: Dark Mode

Feature 4: Navigate with Keyboard

key.png
move.gif

Feature 5: Internal Help Manual with Step-by-Step Instructions

Feature 6: Transition to Another Map

Takeaways

🔹Designing for accessibility necessitates extensive research and collaboration with the target community.
🔹A map may not always be the most suitable solution for individuals with visual impairments, as they might prefer alternative methods to access eclipse information.
🔹Offering diverse information retrieval options, such as downloadable CSV files, is essential to accommodate various user needs and preferences.

Next Steps

🔹Carry out comprehensive user testing to gather data on the map's feature effectiveness, with a focus on its usability in conjunction with screen readers.

🔹Collaborate with accessibility experts or engage with communities requiring such accommodations to evaluate the necessity of an interactive map.
 
🔹Enhance inclusivity by incorporating additional features, such as multilingual support.

Other projects

bottom of page