top of page
Safari Template.jpg

Project Overview

The Eclipse Soundscapes Citizen Science Project (ES:CSP) is a NASA-supported initiative that enables people with visual impairments to listen to, interact with, and analyze audio recordings of the 2023 eclipse through a mobile app.

In addition, the website is designed to raise awareness of the project through a social media campaign, recruitment strategy, and suggestions for organizational cooperation. The primary objective is to recruit more Citizen Scientists to participate in the project.




  • ​3 Designers


  • User research 

  • User experience design

  • UI/ AR/ Visual design

  • Usability testing


  • 3 months


Redesign the website

  • To provide accessible interfaces.

  • To attract more volunteers through social media, recruitment strategies, and suggestions for organizational cooperation.

"Individuals interested in citizen science, especially those with visual impairments, are unable to access the necessary information and resources to understand Eclipse Soundscapes."

"We would like to explore the possibility of targeting the younger demographic as our potential users. Understanding the potential of the younger demographic as our target users is important to us."

The Challenge

  1. How can we effectively promote awareness of the Eclipsesoundscape project among users?

  2. How can we encourage user participation in the Eclipsesoundscape project?

  3. What strategies can be employed to boost website traffic and enhance user engagement within the target audience?

Resarch Findings


Who Is The Target User

  • Sighted and BLV (blind and low-vision) users

  • The primary target age group for this project includes school students with an interest in Science, ranging in age from 10 to 23 years old.

The Current Experiences - Website

  • The website lacks sufficient information content

The website, being the primary recruitment channel, fails to provide users with relevant information, resulting in a lack of understanding about the Citizen Science Project. This diminishes the project's discoverability and reduces user engagement.

  • Limited Accessibility

The current website design does not prioritize user-friendliness for visually impaired individuals, which greatly hampers accessibility. As a result, these users face significant challenges in navigating and engaging with the website's content.


  • Lack of Visual Appeal

The visual design of the website fails to captivate and engage the younger demographic effectively. Consequently, potential users from this demographic show a lack of interest in the website, resulting in reduced engagement.



  • Improve the website's design

    1. Adding relevant pages about the Citizen Science Project

    2. Prioritizing A11y design to enhance website readability.

  • Promotion:

​Implement relevant promotional strategies to increase users' interest in the project and enhance their long-term engagement with the website.


By redesigning the website and implementing effective promotional strategies, we aim to attract a larger number of young users to learn about and actively participate in the Citizen Science Project.

  • Revamp website design to appeal to a younger demographic.

  • Identify and address accessibility barriers and usability issues.

  • Conduct promotional and advertising campaigns for the Citizen Science Project.

User Flow & Initial Sketch

How to promoting?

Requirement from Client

Promoting/Recruiting Citizen Scientists (CS) Planning Request, and they  also  wanted to figure out:

  • People's recognition of citizen science

  • How to find citizen scientists


  • How might we let users know about the eclipse soundscape project?

  • How might we get users involved in the eclipse soundscape project?


 Following our research findings, we have developed a targeted "Scientists From Home" campaign, divided into three parts to reach our intended users effectively.

Social Media Campaign

Offline(Museum) Campaign

Website Registration

Persona 1

Jem finds the post on her explore page (or through a friend’s stories).

Goes to the website through Instagram page bio to register.
(Sees instant reward for action - 
“Get a personal nasa eclipse soundscape sticker upon registration”)

Group 1637.jpg

Eclipse Soundscapes Page posts giveaways in a video format post along with Hashtag optimization and Geotag

She reposts the giveaway
story to participate

Highlights1:(Promote through social media)

Instagram post


We are so excited for the #ScientistsFromHome registration launch today!

To celebrate, 2 lucky participants get a one-on-one with ARISA scientist / get a starter kit.

All you have to do is:
- Follow @eclipsesoundscapes
- Register at (link in bio)
- Tag 2 friends below who would be interested in becoming a scientist from home (Upto 5 entries per participant)
- Extra points: Repost our stories (make sure your account is public)

You have until Sunday to participate! The lucky winner(s) will be announced on May 11th!
Good Luck, scientists!

Be a proton, be positive!

#ScientistsFromHome #EclipseSoundScapes #NASA #SolarEclipse #CitizenScientist

Group 1625.jpg

AR Filters

  • Users AR Filters upon discovering it on the project posts and stories.

  • Increases engagement with the brand and excites the users.

  • AR Filters are audio-guided.


EG: Smile or make noise to activate the filter. It displays an orbit of colorful space-related objects around your face, featuring an astronaut, planets, stars, and the text "Citizen Scientist" in the center.


  • Upon registration, users receive a personalized digital sticker link as positive reinforcement. They are encouraged to share it, along with a selfie, in a story on social media.

Group 1511.jpg
Group 1522.jpg
Group 18.jpg
Group 1508.jpg
Group 1510.jpg
Group 1527.png
Group 1503.jpg
Group 1512.jpg
Group 19.jpg
Group 25.jpg

Highlights2:(Get relevant information from the website)

Made accessibility adjustments to the website in accordance with WCAG guidelines

Readability and visibility


Pain Points


  • Poor readability

        Full-width paragraphs

  • Limitations of dark mode

      As the default and only option, especially for individuals with dyslexia

and astigmatism.



  • Improve readability through optimal line length, simplified language, and redesigned layout.​​

Leveraging Diverse Interface Modes to Enhance Accessibility:

  • Delivering options for both light and dark modes.

  • Facilitating a multitude of language selections.

  • Employing color differentiation to distinguish between mouse-selected and unselected states.


Persona 2

He went into the activity room of Astronomy lab, discussing about their new findings.


One day, Zack was on the way to student center, he had an after-school activity in Astronomy lab.

Suddeny he found some cool posters on the wall.

frame 1.jpg

There are some posters about an incoming eclipse scientific research, which shows that’s scientific research that you can do at home.

Group 1623.jpg
Group 1640.jpg

He scanned the QR code on the poster, trying to see more about the activity. He then entered the website of the EclipseSoundscape website.

He viewed the information more on the website, and decided to fill the apply form on the homepage to join this project. He was excited that if he participant in the event, he would get some unique stickers and maybe certificate later.


Component Consistency 


Pain Points


Inconsistent Visual Layout:

  • Lack of uniform visual formatting

  • Irregular arrangement of elements



  • Enhance visual and typographical consistency across the webpage, resulting in a more youthful and unified overall website appearance.

Webiste-News & Events

  • Two modes

  • Get audio

Added new functionality pages for News &events and online applications
Enhanced page accessibility by offering textual descriptions, images, and audio introductions aligned with the page's content.

Flow- How to apply 

  • Clear button

  • Multiple apply methods



  • User-Centered Design:

     Meeting user needs and addressing pain points is crucial. I deeply understood the needs of young users, used

     user-friendly interfaces to attract them, and stayed focused on their preferences throughout the design process.

  • Accessibility Priority:

       Prioritizing inclusive design, I extensively studied WCAG guidelines to ensure easy access for visually impaired                  users. Accessibility is a top concern for every UX designer, given its impact on a broader user base.

  • Innovative Exploration:

       The first-time attempt to combine AR filters with social media for promotion boosted the website's appeal. This                experience encourages me to embrace innovation in projects to attract more users.

  • Communication and Collaboration:

       The project required effective communication and collaboration with clients and audiences, enhancing my                        communication and teamwork skills. Each team member's expertise and thoughts positively influenced various                 project aspects.

Looking Forward

  • Enhanced Accessibility: Adding assistive tech, accessibility buttons, and voice control to the webpage, with user customization.

  • Feedback-Driven Optimization: Improving the design based on user feedback for an enhanced experience.

  • AR Interaction: Using AR filters for immersive learning and engagement with virtual elements.



bottom of page