a little bit about air and a spacious place
what is Air?
The Accessibility Internet Rally (AIR) is a competition that boosts global web accessibility awareness. Originating in 1998 in Austin, Texas as a local hackathon, it has since become an esteemed event advocating accessibility and digital inclusion. In this event, web professionals have eight weeks to enhance or create new websites for artists, nonprofits, and community groups, guided by experts and compliant with leading accessibility standards.
who is a spacious place?
A Spacious Place is a non-profit that uses creative activities to enrich lives, particularly of those with special needs. It cultivates a space that nurtures self-esteem and awareness. Led by Executive Director Kaye McKee and Board Chair David McKee, with support from the board and donors, the organization conducts various classes and workshops, dedicated to empowering its community.
identifying goals, audience, and opportunities
project goals
Support A Spacious Place's mission by enhancing website accessibility for visitors. This includes aiding understanding, perception, and interaction with content, and overcoming barriers such as device access, language limitations, and navigating with assistive technologies.
defined audience
In our initial client meeting, it was conveyed that A Spacious Place caters to a diverse audience ranging from 4 to 70 years old with various abilities. They provided insights into user challenges, noting many rely on phones or tablets due to limited computer access, and for some, English is a second language, which complicates content perception.
opportunities
Early in the project, we prioritized opportunities such as bilingual content and responsive design, aiming to improve overall site accessibility and the information architecture.
project outcomes
quantitative outcomes
Comparing average lighthouse assessment scores from the initial client site to the new site we created there is a significant increase in regards to accessibility, best practices and SEO scores. On both mobile and desktop lighthouse scores we increased the average accessibility ranking 33.5% from 66.5 to 100. On mobile we increased the SEO score by 32% from an average of 54 to 86, while on desktop still improving the score by 18% from 65 to 83. On mobile we also saw an increase by 10.5% in the implementation of best practice score and 15% on desktop.
qualitative outcomes
In anticipation of the launch, we're projecting significant qualitative improvements from the newly bilingual and responsive design features. These enhancements align with our commitment to inclusivity and accessibility, providing a welcoming experience for both English and Spanish speakers. The site's responsiveness across various devices ensures that all users, regardless of the technology they use, will have equal access to the platform. This proactive approach to user experience is expected to foster a broader community engagement and ensure that the new website is as versatile and user-friendly as possible.
growth outcomes
Through this project, I have expanded my skill set in multiple dimensions. I navigated the complexities of WordPress, transitioning from a novice to a proficient user. Conducting usability tests with a screen reader user not only improved my empathy but also my technical acumen in creating accessible content. My role in communication was pivotal, as I honed my ability to articulate ideas and negotiate solutions with stakeholders. Leading the design and development phases, I also sharpened my project management skills, ensuring that each step aligned with our overarching goal of making the digital space inclusive for all.
project strategy to align with goals
inclusive mindset
Our product strategy is deeply rooted in an accessibility-first approach, ensuring that the website is usable and inclusive for all audiences. From the outset, we've prioritized compliance with WCAG guidelines and have integrated design elements that cater to various disabilities. We've adopted flexible design principles that accommodate a range of assistive technologies, ensuring that our site is navigable via keyboard-only commands, screen readers, and other aids. Our commitment to a multilingual experience addresses not just linguistic diversity but also cultural inclusivity, making sure that the content resonates with a global audience. This strategic choice not only meets our goal of creating a universally accessible platform but also aligns with our broader mission to foster a diverse and inclusive community.
information architecture
The original site architecture presented a fragmented user experience with a scattered navigation system that included sections like Why Creativity, Images, Videos, and Share Your Story. These categories, while engaging, may have led to a confusing hierarchy and a challenging navigation experience, especially for users relying on assistive technologies. The new site architecture has been streamlined for clarity and ease of access, aligning with best practices for web accessibility. The revised navigation is intuitive and straightforward, with main categories such as Home, About, Programs, Tutorials, Gallery, Get Involved, Contact Us, and Donate. This reorganization simplifies the user journey, allowing users of all abilities to find information efficiently. Each section is self-explanatory, reducing cognitive load and ensuring that essential functions like volunteering or donating are now prominently featured and more accessible. This change not only optimizes the site for accessibility compliance but also reflects an inclusive design approach that considers the diverse needs of all visitors.
themes and epics
Leveraging the themes and epics, we harnessed Agile Scrum methodology to create user stories and use cases that are user-centric and iterative. Each user story embodied specific user needs and their interaction scenarios, aligning with a theme that guided the development focus. For Responsiveness, we crafted stories emphasizing adaptive layouts and navigational ease across devices, ensuring content accessibility and meaningful engagement regardless of the user's device. Under Alternate Navigation, user stories were designed with accessibility in mind, creating a barrier-free experience via keyboard, voice, and pointer navigation, accommodating diverse user capabilities. In Content Exploration and Interaction, we translated the need for engaging with content into actionable tasks for the team, focusing on streamlining the processes for class discovery and registration and integrating testimonials to foster trust and connection. The Community Building and Engagement epic resulted in stories that facilitated community forums and feedback mechanisms, catering to users' desires to connect and contribute to the community. Technical Performance, Design Consistency & Optimization called for user stories demanding high performance, a coherent visual design, and robust security to assure users of a seamless and secure experience. Lastly, Cultural and Language Inclusivity was addressed by creating user stories for multi-language support, ensuring inclusivity and ease of access for non-English speakers. Through regular sprint reviews and retrospectives, these stories and use cases were continually refined, tested, and implemented, with frequent releases to meet and adapt to real-time user feedback, ensuring an ongoing alignment with user needs and project goals.
design decisions guided by function and goals
Event Scheduling Made Easy
Our clients indicated that their community members faced difficulties remembering class and workshop schedules. Initially, we considered integrating a calendar on the homepage. However, after experimenting with various WordPress plugins and consulting with our mentor, we realized that achieving full accessibility would necessitate either a premium plugin or substantial custom coding—resources beyond our scope and expertise. Moreover, user testing revealed that calendar interfaces were not user-friendly for screen reader users and required frequent website visits to stay updated.Ultimately, we implemented a solution that lists regular classes and enables users to easily add events to their personal Google Calendars. This approach simplifies navigation for screen reader users, who often rely on headings, and it integrates seamlessly with their daily digital routine. By directly syncing with personal calendars, we reduced the cognitive effort required to engage with the community, enhancing overall accessibility and user experience.
Expanding the Color Palette
The original brand colors our clients provided were a vivid purple, a soft lemon yellow, a pale cream, and a deep violet. While these shades were lively, they did not provide sufficient contrast for accessibility compliance. In collaboration with the clients, we introduced complementary greens and blues to the palette. The greens brought a refreshing, natural feel, while the blues added a serene yet dynamic touch, balancing out the vibrant purples and yellows. This addition also introduced an element of playfulness that resonated with the brand's identity and its audience. By creating a spectrum for each color, ranging from lighter tints to darker shades, we ensured that our design met accessibility standards for color contrast, providing a functional and inclusive user experience.
Enhancing User Engagement
In our client consultations, it emerged that their processes for recruiting volunteers and gathering supply donations were ineffective. They relied on word-of-mouth for volunteer outreach, with no website details, and they communicated supply needs only in email newsletters, lacking direct purchase options or delivery instructions. To improve this, we devised a multi-faceted approach: we delineated volunteer classification tiers, detailing necessary training and qualifications on the website; incorporated a volunteer inquiry option in the contact form; and established a link to their VolunteerMatch profile for visibility on open positions and applications. For supply donations, we linked an Amazon wishlist, simplifying the donation process for users. We also featured these initiatives prominently on a dedicated "Get Involved" page, ensuring straightforward access and engagement for site visitors.
reflection
reflection
This project has been a journey of significant personal and professional development. Delving into the intricacies of accessibility, I gained hands-on experience with keyboard testing and screen readers, which deepened my understanding of the challenges faced by users with disabilities. The usability testing sessions, particularly with a screen reader user, were enlightening, highlighting the importance of intuitive design. Communicating with stakeholders was an exercise in clarity and precision, as I learned to effectively convey project progress and rationale behind design decisions.