UX Research
Competitive Analysis
Through competitive analysis crucial gaps in existing eclipse maps were identified highlighting a few common accessibility problems
Through competitive analysis and user reviews, my team and I identified crucial gaps in existing eclipse maps. Our findings show a few common problems among others - low contrast colors, small font size, missing alt text.
User Reviews Study
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.
Hence, there's a need for an accessible map with the following features:
Participants should be able to determine if they're on the 2023 annular eclipse or the 2024 total solar eclipse path (specific requirements from Eclipse Soundscapes).
The map should show what % of the eclipse the user can view from their location.
The time at which the maximum eclipse phase would occur in a particular location should also be visible.
Defining Accessibility Standards
Ensuring visibility with high color contrast - Adhering to strict WCAG AA/AAA standards.
Introducing light and dark modes - For people with certain visual impairments, light mode can be hard to look at while for others light mode is a more well-suited option.
Providing keyboard accessibility - Allowing users to steer through the map without a mouse.
Embedding descriptive alt text - 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
Design
User Flow Diagrams & Information Architecture
Proposed Features & Low-fi Prototype
Based on our research and subsequent brainstorming sessions, my team and I have proposed the following features to ARISA Labs
WCAG 2.1 level for accessibility.
Eclipse location/time lookup feature.
Instructions to help guide users on using the map.
Full screen view, zoom-in and zoom-out features
Light Mode and Dark Mode
UI Kit
Leveraging the established visual language of the existing UI kit and WCAG accessibility guidelines, we redesigned the UI Kit.
It was very important to consider colors from the existing NASA's UI kit for this map, while ensuring that accessibility color contrast guidelines are met in both light and dark modes, readability is ensured with the font size and style, button design, etc.
Final Prototype
I refined the sketches into high-fidelity prototypes. Below are the different features that we designed for the map.
Search for location
Keyboard Accessibility
Adjust map, Zoom, Full Screen, Light & Dark Mode
Help - Instructions
My learnings and Next Steps
This project really deepened my understanding of accessibility, especially when it comes to designing for low-vision communities. I learned how to weave these considerations into the design process, and now, accessibility has become a core part of how I approach design. I'm excited to carry these insights forward into future projects.
Next steps for this product includes:
Conduct a round of usability testing with the latest prototype on Luv Michael's iPad to understand pain points, and effective approaches of learning or using the application that can inform our decisions for future iterations.
Take 3D scans of the equipment in the kitchen and use them in the app to increase the relatibility factor for employees.
Extend our app to other chapters of the book.