Interactive Accessible Map Design
Interactive Accessible Map Design
Nasa Eclipse Soundscapes
Nasa Eclipse Soundscapes
Nasa Eclipse Soundscapes
Designed an interactive accessible map for the Eclipse Soundscapes website, allowing NASA citizen scientists to access the map and view eclipse information. This project particularly focuses on enhancing the experience for low-vision populations.
Designed an interactive accessible map for the Eclipse Soundscapes website, allowing NASA citizen scientists to access the map and view eclipse information. This project particularly focuses on enhancing the experience for low-vision populations.
Designed an interactive accessible map for the Eclipse Soundscapes website, allowing NASA citizen scientists to access the map and view eclipse information. This project particularly focuses on enhancing the experience for low-vision populations.
CLIENT
CLIENT
CLIENT
NASA, ARISA Labs
(NYU School Project)
NASA, ARISA Labs
(NYU School Project)
MY ROLE & TOOLS
MY ROLE & TOOLS
MY ROLE & TOOLS
User Researcher & UI Developer
Figma, WAVE Accessibility checker
User Researcher & UI Developer
Figma, WAVE Accessibility checker
User Researcher & UI Developer
Figma, WAVE Accessibility checker
TEAM & DURATION
TEAM & DURATION
TEAM & DURATION
3 designers under the guidance of Prof. Regine Gilbert
4 Weeks
3 designers under the guidance of Prof. Regine Gilbert
4 Weeks
3 designers under the guidance of Prof. Regine Gilbert
4 Weeks
Design an accessible map on the Eclipse Soundscape website (desktop version) for participants to view eclipse information.
Design an accessible map on the Eclipse Soundscape website (desktop version) for participants to view eclipse information.
Design an accessible map on the Eclipse Soundscape website (desktop version) for participants to view eclipse information.
The Challenge
The Challenge
The Challenge
Need an Accessible map for NASA Citizen Scientists to use to track eclipse paths and related details. The map needed to be more than just a tool, giving access to eclipse information to everyone, especially the Blind and Low-Vision community.
Need an Accessible map for NASA Citizen Scientists to use to track eclipse paths and related details. The map needed to be more than just a tool, giving access to eclipse information to everyone, especially the Blind and Low-Vision community.
The Result
The Result
The Result
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
NASA citizen scientists struggle to:
NASA citizen scientists struggle to:
NASA citizen scientists struggle to:
Identify whether their location is on the eclipse path.
Obtain essential eclipse information, affecting their ability to submit observations.
Engage fully with the map, especially for users with disabilities requiring more time to participate.
Identify whether their location is on the eclipse path.
Obtain essential eclipse information, affecting their ability to submit observations.
Engage fully with the map, especially for users with disabilities requiring more time to participate.
So, what is needed? An accessible map for participants to use
So, what is needed? An accessible map for participants to use
So, what is needed? An accessible map for participants to use
Participants should be able to determine if they're on the 2023 annular eclipse or the 2024 total solar eclipse path.
The map should show what % of the eclipse they can view from their location.
It should also show at what time the maximum phase would occur in a particular location.
Participants should be able to determine if they're on the 2023 annular eclipse or the 2024 total solar eclipse path.
The map should show what % of the eclipse they can view from their location.
It should also show at what time the maximum phase would occur in a particular location.
Unearthing Insights - UX Research
Unearthing Insights - UX Research
Unearthing Insights - UX Research
Through competitive analysis and user reviews, my team and I identified crucial gaps in existing eclipse maps. Our findings showed a few common problems among others:- low contrast colors- small text size- missing alt text.
Through competitive analysis and user reviews, my team and I identified crucial gaps in existing eclipse maps. Our findings showed a few common problems among others:- low contrast colors- small text size- missing alt text.
Through competitive analysis and user reviews, my team and I identified crucial gaps in existing eclipse maps. Our findings showed a few common problems among others:- low contrast colors- small text size- missing alt text.
ARISA/Eclipse Soundscapes:
ARISA/Eclipse Soundscapes:
ARISA/Eclipse Soundscapes:
Only available on app.
The user needs eclipse knowledge to use.
Only available on app.
The user needs eclipse knowledge to use.
Timeanddate
Timeanddate
Timeanddate
Poor color contrast.
Lack of tutorial/help.
Poor color contrast.
Lack of tutorial/help.
Eclipse2024 / Google
Eclipse2024 / Google
Eclipse2024 / Google
Search feature - by location name only.
Directed to a new page for information.
Need to exit the current map to use other maps.
Search feature - by location name only.
Directed to a new page for information.
Need to exit the current map to use other maps.
Stellarium
Stellarium
Stellarium
Lack of information about the eclipses, locations, durations, etc.
Lack of information about the eclipses, locations, durations, etc.
Elevating Accessibility
Elevating Accessibility
Elevating Accessibility
After delving into the cosmos of competitive analysis, our objectives crystallized into a set of goals aiming to make eclipse map navigation seamless for every citizen scientist.
After delving into the cosmos of competitive analysis, our objectives crystallized into a set of goals aiming to make eclipse map navigation seamless for every citizen scientist.
After delving into the cosmos of competitive analysis, our objectives crystallized into a set of goals aiming to make eclipse map navigation seamless for every citizen scientist.
Ensuring visibility with high color contrast, adhering to the stringent WCAG AA/AAA standards.
Ensuring visibility with high color contrast, adhering to the stringent WCAG AA/AAA standards.
Introducing light and dark modes. Providing keyboard navigability, allowing users to steer through the map without a mouse.
Introducing light and dark modes. Providing keyboard navigability, allowing users to steer through the map without a mouse.
Embedding descriptive alt text in every path, image, etc. making the map accessible to screen readers.
Embedding descriptive alt text in every path, image, etc. making the map accessible to screen readers.
Crafting a guide: a tutorial to assist users in using the map.
Crafting a guide: a tutorial to assist users in using the map.
Charting the Journey: User Flow Diagrams and Information Architecture
Charting the Journey: User Flow Diagrams and Information Architecture
Charting the Journey: User Flow Diagrams and Information Architecture
Our User Flow Diagrams and Information Architecture worked together as a clear guide. These were designed to provide users with a simple, clear path from start to finish, ensuring easy navigation.
Our User Flow Diagrams and Information Architecture worked together as a clear guide. These were designed to provide users with a simple, clear path from start to finish, ensuring easy navigation.
Our User Flow Diagrams and Information Architecture worked together as a clear guide. These were designed to provide users with a simple, clear path from start to finish, ensuring easy navigation.
Low-fidelity Prototype
Low-fidelity Prototype
Low-fidelity Prototype
Proposed features
Proposed features
Proposed features
Based on our research and subsequent brainstorming sessions, my team and I have proposed the following features:
Based on our research and subsequent brainstorming sessions, my team and I have proposed the following features:
Based on our research and subsequent brainstorming sessions, my team and I have proposed the following features:
WCAG 2.1 level for accessibility.
WCAG 2.1 level for accessibility.
WCAG 2.1 level for accessibility.
Eclipse location/time lookup feature.
Eclipse location/time lookup feature.
Eclipse location/time lookup feature.
Eclipse location/time lookup feature.
Eclipse location/time lookup feature.
Eclipse location/time lookup feature.
Full screen view, and zoom-in and out feature.
Full screen view, and zoom-in and out feature.
Full screen view, and zoom-in and out feature.
Full screen view, and zoom-in and out feature.
Full screen view, and zoom-in and out feature.
Full screen view, and zoom-in and out feature.
Crafting the UI Kit
Crafting the UI Kit
Crafting the UI Kit
Our design system was essential for two things.
Our design system was essential for two things.
Our design system was essential for two things.
1. We used the design guides from ARISA/NASA to start with, leveraging their established visual language.
1. We used the design guides from ARISA/NASA to start with, leveraging their established visual language.
1. We used the design guides from ARISA/NASA to start with, leveraging their established visual language.
2. We made sure everything on the map could be used by everyone. We employed tools like the Web Accessibility Evaluation Tool (WAVE) to test and align our design elements to make the map accessible and easy to use, especially for people with low vision and blindness.
2. We made sure everything on the map could be used by everyone. We employed tools like the Web Accessibility Evaluation Tool (WAVE) to test and align our design elements to make the map accessible and easy to use, especially for people with low vision and blindness.
2. We made sure everything on the map could be used by everyone. We employed tools like the Web Accessibility Evaluation Tool (WAVE) to test and align our design elements to make the map accessible and easy to use, especially for people with low vision and blindness.
Final Design
Final Design
Final Design
We refined our sketches into high-fidelity prototypes. Below are the different features that we designed for the map.
We refined our sketches into high-fidelity prototypes. Below are the different features that we designed for the map.
We refined our sketches into high-fidelity prototypes. Below are the different features that we designed for the map.
Help - instructions
Help - instructions
Full Screen
Full Screen
Zoom-in, out, pan
Zoom-in, out, pan
Search location
Search location
Search Location within path
Search Location within path
Search location outside path
Search location outside path
Dark and Light mode
Dark and Light mode
Keyboard Accessibility
Keyboard Accessibility
Upcoming Eclipse map
Upcoming Eclipse map
Next Steps
Next Steps
Next Steps
Going forward, we would like to:
1. Conduct usability testing, especially with screen readers.
2. Have a better integration of keyboard accessibility instructions.
3. Provide a multilingual option.
Going forward, we would like to:
1. Conduct usability testing, especially with screen readers.
2. Have a better integration of keyboard accessibility instructions.
3. Provide a multilingual option.
Going forward, we would like to:
1. Conduct usability testing, especially with screen readers.
2. Have a better integration of keyboard accessibility instructions.
3. Provide a multilingual option.