Eclipse Soundscapes project header
Restructuring an accessible onboarding flow for citizen scientists Clarifying training webpage and implementing WCAG accessibility standards
NASA Citizen Science ARISA Lab's Eclipse Soundscapes Project
UX/UI Designer & Researcher,
2 Co-Designers
Figma, UX/UI Design, User Research, Accessibility (WCAG), Client Relations
5 Weeks
(Nov-Dec 2024)

NASA's Eclipse Soundscapes' Data Analyst page relies on volunteers to analyze eclipse audio data, with a mission to make that experience accessible to visually impaired participants. However, the training page buries that role behind six confusing, text-heavy sections — undermining the accessibility the project is built around.

I restructured the Data Analyst page's information architecture to create a clear user journey and prioritize accessibility. My team and I conducted preliminary research through competitive analysis and site mapping. We then prioritized changes through user research with activities such as card sorting and usability testing.

Eclipse Soundscapes is a NASA funded citizen science project that invites the public to explore how solar eclipses impact life on Earth. Their mission is to allow visually impaired individuals to experience the eclipse through sound and touch. This project was a semester-long client engagement with NASA's Eclipse Soundscapes team through ARISA Lab, scoped specifically to the Data Analyst training page.

Eclipse Soundscapes project imagery

How might we improve upon the information architecture of the current Data Analyst Role page in order to ensure clarity and accessibility for users to better accomplish the task of analyzing audio data?

We had 6 users, who are young adults that have no experience with citizen science projects, navigate through the original website. In these usability testing interviews, we tracked both quantitative and qualitative data in order to find out: How is the site currently working?

"I would like you to explore this web page with the goal of analyzing some audio data and input your analysis into a form. Go through the web page and try to achieve this."

This task took an average of 6 clicks with a 1:43 completion time.

The following are screens of the original site.

Original Screens

Afterwards, we conducted qualitative interviews and synthesized the following:

Too much text, not enough visuals. "I liked the audio being on the website itself... [but] it feels a little text-heavy with no visuals to break it up." "A few more and better visuals to understand what the project is about rather than just scrolling through walls of text." "Definitely more visuals, maybe arrows or some other visual indications on how to do things." Information layout is confusing. "The unnecessary information shouldn't be the first thing I'm seeing... if it is important, why is it on the side?" "It's an alright website, but a little confusing in terms of what it wants me to do or look at right off the bat." Navigation prevents smooth interaction. "There is no sense of direction to access the forms." "It's hard to navigate in the sense that you have to scroll to a specific section to access the tabs relevant to the page."

We analyzed three other role-training platforms built for the shared goal of helping new users understand and retain unfamiliar material, asking the question: How do other companies do it?

Eclipse Soundscapes logoEclipse Soundscapes AWS logoAWS Certified Cloud Practitioner Microsoft Azure logoMicrosoft Azure Training Google Cloud logoGoogle Cloud Training
Steps are laid out clearly Clear growth pathways, resources centralized Tabs cut down on scrolling Visually clean, clear tabs
Too much text; certification hard to find Training buried several pages deep Too many pages; learning paths aren't visual Certification tab easy to miss
Separate training content from role info; cut scrolling Use one page as a launch point, not a maze Use tabs/bookmarks to reduce scrolling Balance visuals and text without adding pages

We conducted a card sorting activity with 3 users in order to gain a better understanding of users' mental models.

From this, we learned that reorganizing the site meant prioritizing users' goals of understanding, training, and completing data analysis — and cutting down on the number of tabs.

Card Sorting

Map of original information architecture.

Original site map

Prospected map after informed research.

New proposed site map
Diagram of section changes from six to four sections Section Changes

Based on our research, we translated user frustrations into redesign goals that emphasize the user journey.

  • To have a better balance between text and visuals
  • To navigate more intuitively and easily
  • To spend little to no time finding links and information for task completion
Priority matrix of redesign goals
  • Site is built on WordPress — no custom framework, limited to what the CMS and available plugins support.
  • Site must remain in light mode only — no dark mode toggle.
  • Survey platform is Google Forms, embedded directly into pages.
  • Scope limited to the Data Analyst role page — not a full-site redesign.

In our redesign, we were required to use the following branding colors and accessibility guidelines from NASA Eclipse Soundscapes.

NASA Eclipse Soundscapes branding and accessibility guide

Our team each created a low fidelity wireframe of our potential redesign. We referenced these when collaborating on our final prototype.

Introduce Infinite Scroll Allows for better compatibility with Apple VoiceOver for accessibility.
Simplify Tab Sections Reduce sections from 6 to 4 in order to optimize path to resources. Simplified tab sections screen
Revise Buttons and Visual Design Implement effective use of font sizing and color contrast so text and buttons are legible. Revised buttons and visual design screen

Every core design decision traces back to a specific research finding. Collapsing 6 sections into 4 targeted the 6-click / 1:43 average it took users to find the analysis form. The visual design addressed the biggest complaint directly: too much text, not enough visuals. Infinite scroll answered two problems at once — sighted users losing their place while scrolling, and NASA's own brief for VoiceOver compatibility.

  • Task completion time and click count on the analyze audio data flow, benchmarked against the 6-click / 1:43 baseline
  • Drop-off rate by section — to confirm four sections actually reduce abandonment rather than just relocating it
  • Accessibility (WCAG) conformance score via WAVE tool, plus a manual VoiceOver walkthrough
  • Volunteer return rate — whether people who complete one audio analysis come back for a second
Working with engineering... I would confirm which changes — infinite scroll, section consolidation — are achievable within WordPress's existing plugins before finalizing the information architecture, rather than handing off a spec that assumes custom development. Working with product... I would phase the rollout of new features and treat accessibility testing with visually impaired volunteers as a fast-follow once recruiting is realistic.

Testing what we could actually test. NASA's brief named blind and low-vision volunteers directly, but recruiting people who use screen readers daily wasn't realistic on a five-week class timeline. Every accessibility decision — VoiceOver compatibility, contrast, font sizing — came from WCAG guidelines and best practice, not from watching someone actually navigate the page with a screen reader.

If I had more time… I'd close that gap directly — recruiting blind or low-vision volunteers and re-testing specifically for screen-reader compatibility, instead of assuming best practices translate cleanly to lived experience.