Overview
Eclipse Soundscape is a digital platform dedicated to making the wonders of astronomical events accessible and engaging for a diverse audience. The current focus is on transforming the Eclipse Soundscape website into a universally accessible and engaging hub for astronomical learning.
However, the existing website faces significant challenges with its map design, which presents an overwhelming amount of information coupled with confusing navigation guidance. This complexity particularly impacts users with visual impairments, as the current design and limited screen reader accessibility options exclude a substantial user demographic, thereby restricting the overall user experience. The project aims to address these concerns and reinvent the Eclipse Soundscape website into a more inclusive and user-friendly platform.
Role & Responsibilities
As the leader in accessibility design, my role is to ensure our products are universally accessible. I oversee the integration of accessibility standards like WCAG and ADA, conduct audits, and guide improvements. I was responsible for overseeing both low-fidelity and high-fidelity mockups, ensure accessibility is a core aspect from the start while maintaining the core branding guidelines.
Tools & Methods
Methods: User Interviews, Competitive Analysis, Accessibility Research, Code Optimization, Task Analysis, Prototyping
Tools: Figma, Sketching, Survey Tools
Project Goals:
- Enhanced Accessibility: Prioritize improvements in screen reader accessibility and navigational simplicity to cater to users with visual impairments.
- User Centric Design: Adopt a user-centered design approach, ensuring that changes are informed by and responsive to the actual needs and preferences of a diverse user base.
- Simplified Information Presentation: Streamline the presentation of information on the map to reduce cognitive overload and make data more digestible for all users.
- Engaging User Interface: Redesign the user interface to be more engaging and intuitive, enhancing the overall user experience
Problem Statement
How can we redesign the Eclipse Soundscape website to provide an intuitive, accessible user experience for a diverse audience, including those with visual impairments, while effectively presenting astronomical information in a way that is engaging and aligned with the site’s educational mission?
Research Process
Our research process for the Eclipse Soundscape website redesign was a meticulously planned, multi-faceted approach, carried out over three weeks.
Task Analysis
During the user research phase, task analysis played a crucial role in understanding the specific challenges users faced while navigating the site. This analysis helped us pinpoint critical pain points in the user journey:
- Home Page:
- Grayscale and Font Issues:Users found the grayscale color scheme and obscure fonts difficult to read, leading to eye strain and disengagement.
- Lack of Alternative Text Descriptions: Images and interactive elements without alt text were inaccessible to screen reader users, resulting in a lack of context and understanding. - Interactive Map Page:
- Insufficient Color Contrast: Low contrast between elements made it difficult for users, especially those with visual impairments, to distinguish different sections of the map.
- Limited Mode Options: The absence of a dark mode option caused discomfort for users in low-light environments or with light sensitivity. - Settings/Preferences:
Inflexible Screen Reader Speed: Users expressed frustration over not being able to adjust the screen reader's speed, impacting their ability to comprehend information efficiently. - Overall Website Navigation:
- Inconsistent Accessibility Features: Users faced challenges navigating through different pages due to inconsistent accessibility features, like varying font sizes and color contrasts.
- Navigation and Orientation Issues: Lack of clear headings and landmarks made it difficult for screen reader users to orient themselves and navigate effectively through the site.
Competitive Analysis
Our competitive analysis for the Eclipse Soundscape project revealed significant insights by evaluating prominent astronomical and educational websites:
- Time and Date: While this site uses attractive color schemes, it falls short in meeting accessibility guidelines, particularly in terms of contrast, making the text hard to read for users with visual impairments.
- Xavier Jubier: This site offers a simpler user interface, but it poses challenges for viewers with color vision deficiencies. Additionally, the amount of information provided is quite limited, impacting the overall educational value.
- NASA: Renowned for its comprehensive content, NASA's website provides an abundance of information. However, this leads to cluttered screen space, which can be overwhelming and detract from user experience, especially for users with cognitive impairments or those who prefer a more streamlined presentation.
These findings highlighted the need for a balanced approach in our redesign – one that combines aesthetic appeal with strong adherence to accessibility standards, clear and concise information presentation, and an uncluttered user interface to enhance usability and engagement.
Color Consideration & Code Optimization
Our Prioritization:
- Brand Identity and Accessibility: We maintained the brand’s distinctive colors - purple, orange, black, and white - ensuring they are adjusted to meet accessibility standards for users with visual impairments.
- Color Simulation and Contrast Adjustment: Utilized color simulation tools to test visibility for different types of visual impairments, adjusting shades and contrasts for optimal legibility and clarity.
- Code optimization: Implementing semantic HTML to improve screen reader effectiveness and ensure that all elements are easily navigable. ARIA (Accessible Rich Internet Applications) labels were used extensively to provide additional context to users with assistive technologies. Additionally, we optimized JavaScript interactions to be more responsive and accessible, ensuring that dynamic content updates are announced by screen readers.
