Citizen Science Project
UX Design | AR Experience | Accessibility
Client: ARISA Lab X NASA
Project Overview
The Eclipse Soundscapes Citizen Science Project (ES:CSP) empowers people with visual impairments to experience eclipses through sound. Using our mobile app, participants can listen to, interact with, and analyze audio recordings of the 2023 eclipse. This site is dedicated to raising awareness, sharing research insights, and inviting you to join our community of citizen scientists.
Client
-
ARISA Lab X NASA
Team
-
3 Designers
Role
-
User research
-
User experience design
-
UI/ AR/ Visual design
-
Usability testing
Time
-
3 months
The Challenge
The Eclipse Soundscapes Project (ES:CSP) invites the public to study eclipses through sound. However, the project faced a unique "Dual Audience" paradox:
01. The Engagement Gap The target researchers are young students (Gen Z), but the original content was too academic and lacked the visual appeal needed for social sharing.
02. The Accessibility Barrier The core user base includes Blind and Low-Vision (BLV) individuals. The platform required strict WCAG compliance, which often limits "flashy" visual design.
Mission: How might we create a scientifically rigorous platform that is accessible to the blind yet exciting for the sighted?
Solution
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
Strategy 01: Driving Engagement through Gamification
To solve the recruitment problem, I moved the entry point from the "Website" to "Social Media," meeting Gen Z users where they are.
-
AR "Soundscapes" (Spark AR): Designed audio-guided AR filters. Users trigger visual planetary orbits through sound, visualizing the project's core concept: "Listening to the Universe."
-
Viral Loop Design: Created a "Sticker Collection" reward system. Participants earn digital badges for completing tasks, leveraging the psychological drive for collection and sharing.
Result
Transformed passive readers into active "Micro-Influencers" for the project.
User Scenario:
How Jem discovers the project
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”)
Eclipse Soundscapes Page posts giveaways in a video format post along with Hashtag optimization and Geotag
She reposts the giveaway
story to participate
Instagram post
EclipseSoundscapes
GIVEAWAY:
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 www.eclipsesoundscapes.org (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
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.
Stickers
-
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.
Strategy 02: Enhancing Usability & WCAG Compliance
For our Blind and Low-Vision (BLV) community, visual flair could not compromise usability. I led a comprehensive redesign focused on clarity and structure.
-
Default Dark Mode: Implemented a high-contrast Dark Mode interface to reduce eye strain for users with astigmatism and improve readability for low-vision users.
-
WCAG 2.1 Compliance:
-
Color Contrast: Increased ratios from 3:1 to 7:1 (AAA standard).
-
Screen Reader Optimization: Restructured HTML headings and added Alt Text for all visual assets.
-
Audio Intros: Integrated audio summaries for articles, ensuring a seamless experience for non-visual users.
-
Simplified Onboarding: Broke down the complex, multi-page application form into a step-by-step "Wizard," reducing cognitive load and drop-off rates.
Made accessibility adjustments to the website in accordance with WCAG guidelines
Readability and visibility
Pain Points
Before
-
Poor readability
Full-width paragraphs
-
Limitations of dark mode
As the default and only option, especially for individuals with dyslexia
and astigmatism.
Improvements
After
-
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.
Component Consistency
Pain Points
Before
Inconsistent Visual Layout:
-
Lack of uniform visual formatting
-
Irregular arrangement of elements
Improvements
After
-
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
WHAT I LEARN
-
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.
He went into the activity room of Astronomy lab, discussing about their new findings.
Continue....
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.
There are some posters about an incoming eclipse scientific research, which shows that’s scientific research that you can do at home.
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.
Research Highlight
"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."
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.
