Access Unlocked
Accessibility-Focused Website Redesign
A redesigned nonprofit website that boosts accessibility by 33.5%, increasing inclusivity and community interaction.
Client
A Spacious Place
Timeline
10 Weeks
Season
Fall 2023
Focus Areas
non-profit
multilingual-support
project-management
user-research
accessiblity
agile-methodology
Tools Used
Figma
Miro
Wordpress
Basecamp
HTML & CSS
project overview
project summary
Over a 10-week period, our interdisciplinary team redesigned A Spacious Place’s website as part of the Accessibility Internet Rally (AIR). We focused on building a universally accessible, responsive, and multilingual platform, leading to significant improvements in user engagement and operational efficiency for the organization.
role summary
As the primary UX Designer and the Design and Research Lead, I guided the project’s design and development efforts, managed project timelines, and facilitated client communication. Our team collaborated effectively to exceed client objectives and deliver substantial website enhancements.
project summary
Over a 10-week period, our interdisciplinary team redesigned A Spacious Place’s website as part of the Accessibility Internet Rally (AIR). We focused on building a universally accessible, responsive, and multilingual platform, leading to significant improvements in user engagement and operational efficiency for the organization.
role summary
As the primary UX Designer and the Design and Research Lead, I guided the project’s design and development efforts, managed project timelines, and facilitated client communication. Our team collaborated effectively to exceed client objectives and deliver substantial website enhancements.
challenges
Identifying Gaps: A Spacious Place’s website faced significant accessibility issues, poor mobile responsiveness, and the absence of multilingual support, limiting usability and engagement for its diverse audience.
goals
Accessibility, Responsiveness, and Engagement: Our main objectives were to enhance accessibility compliance, improve mobile responsiveness, introduce bilingual support, and simplify navigation to boost user engagement and community involvement.
outcomes
Enhanced Usability & Community Involvement: By increasing accessibility compliance by 33.5%, improving SEO, and adding dynamic engagement features, we delivered a fully responsive, accessible 7-page website. Bilingual support was also integrated, allowing users to toggle between English and Spanish, and streamlined pathways for donations and volunteer opportunities were added to foster stronger community engagement.
challenges
Identifying Gaps: A Spacious Place’s website faced significant accessibility issues, poor mobile responsiveness, and the absence of multilingual support, limiting usability and engagement for its diverse audience.
goals
Accessibility, Responsiveness, and Engagement: Our main objectives were to enhance accessibility compliance, improve mobile responsiveness, introduce bilingual support, and simplify navigation to boost user engagement and community involvement.
outcomes
Enhanced Usability & Community Involvement: By increasing accessibility compliance by 33.5%, improving SEO, and adding dynamic engagement features, we delivered a fully responsive, accessible 7-page website. Bilingual support was also integrated, allowing users to toggle between English and Spanish, and streamlined pathways for donations and volunteer opportunities were added to foster stronger community engagement.
defining stakeholders
Our audience and stakeholders for this website include A Spacious Place, the organization's students, the student's caretakers, organization volunteers
defining stakeholders
Our audience and stakeholders for this website include A Spacious Place, the organization's students, the student's caretakers, organization volunteers
Student Caretaker
As a caretaker, I need clear and comprehensive information about programs so I can support the students in my care effectively.
challenges
Challenges: Difficulty finding relevant information and navigating English-only content limits engagement.
goals
Goals: Needs accessible, well-organized program details and responsive navigation.
Student Caretaker
As a caretaker, I need clear and comprehensive information about programs so I can support the students in my care effectively.
challenges
Challenges: Difficulty finding relevant information and navigating English-only content limits engagement.
goals
Goals: Needs accessible, well-organized program details and responsive navigation.
Donors & Volunteers
As a supporter of the organization, I need a clear pathway to donate or volunteer so I can contribute to the community and understand the impact of my support.
challenges
Challenges: Limited information on how donations and volunteer work support the organization’s goals.
goals
Goals: Needs streamlined processes for donations and volunteering, along with impact transparency.
Donors & Volunteers
As a supporter of the organization, I need a clear pathway to donate or volunteer so I can contribute to the community and understand the impact of my support.
challenges
Challenges: Limited information on how donations and volunteer work support the organization’s goals.
goals
Goals: Needs streamlined processes for donations and volunteering, along with impact transparency.
Creative Student
As a student interested in creative activities, I need an accessible way to find relevant programs so I can fully engage with activities suited to my abilities.
challenges
Challenges: Finds program information difficult to access, especially on mobile devices.
goals
Goals: Needs clear information about programs and activities that promote creative growth.
Creative Student
As a student interested in creative activities, I need an accessible way to find relevant programs so I can fully engage with activities suited to my abilities.
challenges
Challenges: Finds program information difficult to access, especially on mobile devices.
goals
Goals: Needs clear information about programs and activities that promote creative growth.
A Spacious Place Organization
As a nonprofit dedicated to community and creativity, I need an accessible website to engage and inform students, caretakers, donors, and volunteers effectively.
challenges
Challenges: Digital accessibility limitations reduce outreach effectiveness and engagement.
goals
Goals: Provide a digital platform that supports and grows engagement across various audiences.
A Spacious Place Organization
As a nonprofit dedicated to community and creativity, I need an accessible website to engage and inform students, caretakers, donors, and volunteers effectively.
challenges
Challenges: Digital accessibility limitations reduce outreach effectiveness and engagement.
goals
Goals: Provide a digital platform that supports and grows engagement across various audiences.
Discovery Process
Our discovery journey began with a client brief at the kickoff event we then conducted analysis and audits to build context and understanding and then mapped our project pathway through agile project planning.
Discovery Process
Our discovery journey began with a client brief at the kickoff event we then conducted analysis and audits to build context and understanding and then mapped our project pathway through agile project planning.
Client Brief
We started by gathering key information during the client brief at the kickoff event, where we learned about A Spacious Place’s mission and the specific challenges they faced with their existing website. The organization’s primary goals were to enhance accessibility for individuals with diverse abilities and make the site more responsive, particularly for mobile users. We also discussed the importance of multilingual support and creating pathways for donations and volunteer engagement, aligning our efforts with their strategic goals for community impact.
Client Brief
We started by gathering key information during the client brief at the kickoff event, where we learned about A Spacious Place’s mission and the specific challenges they faced with their existing website. The organization’s primary goals were to enhance accessibility for individuals with diverse abilities and make the site more responsive, particularly for mobile users. We also discussed the importance of multilingual support and creating pathways for donations and volunteer engagement, aligning our efforts with their strategic goals for community impact.
Analysis
Following the client brief, we conducted an in-depth analysis of the existing website. Our team examined the site’s current structure, navigation, and content to identify usability issues that hindered user engagement. We also looked into how well the site met accessibility standards and where it fell short, particularly for users with disabilities. The analysis revealed several barriers to effective navigation and interaction, including inconsistent design elements and a lack of responsive features, which made it difficult for users on mobile devices.
Analysis
Following the client brief, we conducted an in-depth analysis of the existing website. Our team examined the site’s current structure, navigation, and content to identify usability issues that hindered user engagement. We also looked into how well the site met accessibility standards and where it fell short, particularly for users with disabilities. The analysis revealed several barriers to effective navigation and interaction, including inconsistent design elements and a lack of responsive features, which made it difficult for users on mobile devices.
Audit
Next, we conducted a detailed accessibility audit of the website using both manual and automated tools. This audit was crucial in identifying specific violations of WCAG 2.1 guidelines, such as missing alt text for images, poor color contrast, and non-descriptive link text. We also tested the site’s mobile performance, noting that the layout didn’t adapt well to smaller screens, which contributed to a poor user experience for mobile visitors. The audit gave us a clear roadmap for what needed to be fixed to make the website compliant with accessibility standards and more user-friendly for the target audience.
Audit
Next, we conducted a detailed accessibility audit of the website using both manual and automated tools. This audit was crucial in identifying specific violations of WCAG 2.1 guidelines, such as missing alt text for images, poor color contrast, and non-descriptive link text. We also tested the site’s mobile performance, noting that the layout didn’t adapt well to smaller screens, which contributed to a poor user experience for mobile visitors. The audit gave us a clear roadmap for what needed to be fixed to make the website compliant with accessibility standards and more user-friendly for the target audience.
Planning
With the findings from the analysis and audit in hand, we moved into the planning phase using agile project planning methodologies. We broke down the project into sprints, focusing first on critical accessibility updates, followed by improvements to mobile responsiveness and content reorganization. This iterative approach allowed us to stay flexible and continuously refine the design based on feedback from both the client and user testing. Each sprint had clear goals and deliverables, ensuring that we could meet the client’s expectations while also adhering to accessibility standards.
Planning
With the findings from the analysis and audit in hand, we moved into the planning phase using agile project planning methodologies. We broke down the project into sprints, focusing first on critical accessibility updates, followed by improvements to mobile responsiveness and content reorganization. This iterative approach allowed us to stay flexible and continuously refine the design based on feedback from both the client and user testing. Each sprint had clear goals and deliverables, ensuring that we could meet the client’s expectations while also adhering to accessibility standards.
Challenges Identified
Throughout the redesign of A Spacious Place’s website, several core challenges were identified that impacted the site's accessibility, usability, and engagement. These included difficulties with connecting event calendars, creating clear donation pathways, improving information accessibility for caregivers, and ensuring visual accessibility for users with diverse needs. Addressing these challenges was critical to making the site more inclusive and functional for a wide range of users.
Challenges Identified
Throughout the redesign of A Spacious Place’s website, several core challenges were identified that impacted the site's accessibility, usability, and engagement. These included difficulties with connecting event calendars, creating clear donation pathways, improving information accessibility for caregivers, and ensuring visual accessibility for users with diverse needs. Addressing these challenges was critical to making the site more inclusive and functional for a wide range of users.
Connecting Calendars
One of the primary challenges was integrating a calendar feature that would allow users to easily view and sync upcoming events and classes. The existing site lacked a cohesive calendar system, making it difficult for students and caregivers to keep track of activities. This feature was especially important to caregivers managing schedules for individuals with specific needs who rely on timely, clear scheduling information.
Connecting Calendars
One of the primary challenges was integrating a calendar feature that would allow users to easily view and sync upcoming events and classes. The existing site lacked a cohesive calendar system, making it difficult for students and caregivers to keep track of activities. This feature was especially important to caregivers managing schedules for individuals with specific needs who rely on timely, clear scheduling information.
Donation Pathways
Creating an intuitive donation pathway was another challenge, as the existing site’s donation process was unclear and lacked calls-to-action that encouraged contributions. The redesign aimed to simplify this process, making it easy for supporters to donate or sign up as volunteers with clear, prominent buttons and a streamlined donation page that highlighted the impact of contributions.
Donation Pathways
Creating an intuitive donation pathway was another challenge, as the existing site’s donation process was unclear and lacked calls-to-action that encouraged contributions. The redesign aimed to simplify this process, making it easy for supporters to donate or sign up as volunteers with clear, prominent buttons and a streamlined donation page that highlighted the impact of contributions.
Information Accessibility
Caregivers and family members expressed difficulty in finding essential information about programs and services. Information on the site was scattered, and the navigation did not support quick access to details needed by caregivers for planning purposes. To address this, we focused on reorganizing the site’s structure, creating dedicated sections for key information, and using clear language to improve information accessibility.
Information Accessibility
Caregivers and family members expressed difficulty in finding essential information about programs and services. Information on the site was scattered, and the navigation did not support quick access to details needed by caregivers for planning purposes. To address this, we focused on reorganizing the site’s structure, creating dedicated sections for key information, and using clear language to improve information accessibility.
Visual Accessibility
Visual accessibility was a significant concern, as the existing site’s color contrast and font sizes did not meet accessibility standards, creating barriers for users with visual impairments. Our solution involved redesigning the site with improved contrast ratios, larger font sizes, and accessible iconography to ensure the site was usable for all visitors, regardless of visual ability.
Visual Accessibility
Visual accessibility was a significant concern, as the existing site’s color contrast and font sizes did not meet accessibility standards, creating barriers for users with visual impairments. Our solution involved redesigning the site with improved contrast ratios, larger font sizes, and accessible iconography to ensure the site was usable for all visitors, regardless of visual ability.
Insights for Iterations
During the redesign of A Spacious Place, our team gathered valuable insights that informed key iterations to improve the user experience, accessibility, and brand cohesion. These insights led to the creation of an integrated event calendar, clear donation pathways, an organized and diversified information structure, and a visually cohesive brand identity that aligns with the organization’s mission.
Insights for Iterations
During the redesign of A Spacious Place, our team gathered valuable insights that informed key iterations to improve the user experience, accessibility, and brand cohesion. These insights led to the creation of an integrated event calendar, clear donation pathways, an organized and diversified information structure, and a visually cohesive brand identity that aligns with the organization’s mission.
Calendars Connected
The previous site lacked a functional calendar for events, causing confusion among caregivers and families who needed to track weekly and monthly events. While our initial plan involved an interactive calendar, technical limitations and accessibility challenges led us to develop a structured event list instead. This new calendar setup allows caregivers to view upcoming events with clear details and easily add them to their personal Google Calendars, streamlining scheduling and ensuring they stay informed.
Calendars Connected
The previous site lacked a functional calendar for events, causing confusion among caregivers and families who needed to track weekly and monthly events. While our initial plan involved an interactive calendar, technical limitations and accessibility challenges led us to develop a structured event list instead. This new calendar setup allows caregivers to view upcoming events with clear details and easily add them to their personal Google Calendars, streamlining scheduling and ensuring they stay informed.
Pathways Created
The donation process on the original site was unclear, which limited community engagement. To address this, we designed intuitive donation pathways with clear call-to-action buttons and a simplified donation page that highlighted the impact of each contribution. This approach provided a more accessible, streamlined process for donations and volunteer sign-ups, making it easy for supporters to contribute and stay connected.
Pathways Created
The donation process on the original site was unclear, which limited community engagement. To address this, we designed intuitive donation pathways with clear call-to-action buttons and a simplified donation page that highlighted the impact of each contribution. This approach provided a more accessible, streamlined process for donations and volunteer sign-ups, making it easy for supporters to contribute and stay connected.
Information Organized and Diversified
Caregivers and families needed quick access to clear program information, but the scattered structure on the previous site made navigation challenging. To address this, we reorganized the site to include dedicated sections for program information, contact details, and a streamlined, bilingual navigation system. This organized structure ensured that users could easily find essential information in both English and Spanish, saving time and significantly enhancing the overall user experience.
Information Organized and Diversified
Caregivers and families needed quick access to clear program information, but the scattered structure on the previous site made navigation challenging. To address this, we reorganized the site to include dedicated sections for program information, contact details, and a streamlined, bilingual navigation system. This organized structure ensured that users could easily find essential information in both English and Spanish, saving time and significantly enhancing the overall user experience.
Voice Visualized
Reflecting A Spacious Place’s supportive, creative spirit was essential in our redesign. We expanded the original color palette, introduced softer elements like rounded corners, and used wave patterns inspired by students’ artwork to create a warm and friendly look. Custom illustrations and accessible color contrasts aligned with the brand voice, providing a cohesive and engaging visual identity that resonates with the organization’s mission.
Voice Visualized
Reflecting A Spacious Place’s supportive, creative spirit was essential in our redesign. We expanded the original color palette, introduced softer elements like rounded corners, and used wave patterns inspired by students’ artwork to create a warm and friendly look. Custom illustrations and accessible color contrasts aligned with the brand voice, providing a cohesive and engaging visual identity that resonates with the organization’s mission.
Product Features
The redesigned A Spacious Place website focuses on accessibility, engagement, and multilingual support, making it easier for users to connect with the organization and engage with its programs. These key features ensure compliance with accessibility standards, streamline user engagement pathways, and make the site more inclusive for a diverse audience.
Product Features
The redesigned A Spacious Place website focuses on accessibility, engagement, and multilingual support, making it easier for users to connect with the organization and engage with its programs. These key features ensure compliance with accessibility standards, streamline user engagement pathways, and make the site more inclusive for a diverse audience.
Clear Engagement Pathways
We implemented direct, easy-to-navigate pathways for user engagement, which included options for volunteering, donating, and participating in events. This involved integrating links for volunteering through platforms like VolunteerMatch, providing streamlined donation options (e.g., PayPal, Venmo), and enabling users to add events to their personal Google Calendars. These clear pathways reduced cognitive load and simplified interactions with the organization.
Clear Engagement Pathways
We implemented direct, easy-to-navigate pathways for user engagement, which included options for volunteering, donating, and participating in events. This involved integrating links for volunteering through platforms like VolunteerMatch, providing streamlined donation options (e.g., PayPal, Venmo), and enabling users to add events to their personal Google Calendars. These clear pathways reduced cognitive load and simplified interactions with the organization.
Multilingual Support
To make the site accessible to a broader audience, we integrated multilingual support, allowing users to toggle between English and Spanish. This feature helped reduce barriers for non-English-speaking users, ensuring that all community members could access important information about programs and events with ease.
Multilingual Support
To make the site accessible to a broader audience, we integrated multilingual support, allowing users to toggle between English and Spanish. This feature helped reduce barriers for non-English-speaking users, ensuring that all community members could access important information about programs and events with ease.
Accessibility Compliance
The redesign prioritized strict adherence to WCAG standards, achieving 100% accessibility scores across all redesigned pages. This included updating media accessibility, such as adding descriptive alt text and accessible descriptions for images and videos, and expanding the color palette to meet AA standards. Responsive typography was also introduced, improving readability across devices.
Accessibility Compliance
The redesign prioritized strict adherence to WCAG standards, achieving 100% accessibility scores across all redesigned pages. This included updating media accessibility, such as adding descriptive alt text and accessible descriptions for images and videos, and expanding the color palette to meet AA standards. Responsive typography was also introduced, improving readability across devices.
Outcomes and Expectations
The redesigned website for A Spacious Place achieved significant improvements in accessibility, engagement, and search visibility. These outcomes are based on measurable metrics that demonstrate the positive impact of our design efforts, fostering a more connected community, increasing user engagement, and enhancing accessibility for all users.
Outcomes and Expectations
The redesigned website for A Spacious Place achieved significant improvements in accessibility, engagement, and search visibility. These outcomes are based on measurable metrics that demonstrate the positive impact of our design efforts, fostering a more connected community, increasing user engagement, and enhancing accessibility for all users.
Connected Community
Through streamlined engagement pathways and bilingual support, the redesigned website fostered a stronger connection within the community. Clear options for donations, volunteer sign-ups, and event participation allowed users to engage with the organization more effectively. This approach helped build a more unified community around the organization’s mission, improving user interaction and connection to its services.
Increased Engagement
We anticipate the introduction of simplified donation and volunteer pathways and the addition of a structured, accessible event calendar will lead to increased user engagement. By organizing key actions and information in an intuitive way, the website reduced cognitive load, enabling users to easily find and participate in opportunities. These enhancements contributed to a 32% increase in SEO performance on mobile and 18% on desktop, boosting visibility and attracting more users.
Increased Accessibility and SEO Performance
Accessibility improvements were a cornerstone of the redesign, achieving 100% accessibility scores on all pages and increasing accessibility compliance by 33.5%. This was achieved through adherence to WCAG standards, improved media accessibility, and responsive typography. These changes not only enhanced the user experience for individuals with disabilities but also significantly improved SEO rankings and search visibility, making the website more discoverable. Additionally, implementing best practices led to an increase of 10.5% on mobile and 15% on desktop, contributing to the website’s overall technical quality.
Connected Community
Through streamlined engagement pathways and bilingual support, the redesigned website fostered a stronger connection within the community. Clear options for donations, volunteer sign-ups, and event participation allowed users to engage with the organization more effectively. This approach helped build a more unified community around the organization’s mission, improving user interaction and connection to its services.
Increased Engagement
We anticipate the introduction of simplified donation and volunteer pathways and the addition of a structured, accessible event calendar will lead to increased user engagement. By organizing key actions and information in an intuitive way, the website reduced cognitive load, enabling users to easily find and participate in opportunities. These enhancements contributed to a 32% increase in SEO performance on mobile and 18% on desktop, boosting visibility and attracting more users.
Increased Accessibility and SEO Performance
Accessibility improvements were a cornerstone of the redesign, achieving 100% accessibility scores on all pages and increasing accessibility compliance by 33.5%. This was achieved through adherence to WCAG standards, improved media accessibility, and responsive typography. These changes not only enhanced the user experience for individuals with disabilities but also significantly improved SEO rankings and search visibility, making the website more discoverable. Additionally, implementing best practices led to an increase of 10.5% on mobile and 15% on desktop, contributing to the website’s overall technical quality.
Project Status + Priorities
Project concluded after the competition, with the redesigned website handed over to the client for ongoing maintenance and updates. Recognizing that digital projects are always evolving and that continuous research is critical, if this project were ongoing, the following next steps would be prioritized, balancing effort with anticipated impact.
Project Status + Priorities
Project concluded after the competition, with the redesigned website handed over to the client for ongoing maintenance and updates. Recognizing that digital projects are always evolving and that continuous research is critical, if this project were ongoing, the following next steps would be prioritized, balancing effort with anticipated impact.
high priority
Website Performance and Sustainability: Continuously monitor website maintenance, sustainability, and performance. Ensure ongoing compliance with accessibility standards and maintain optimal functionality across all devices.
User Engagement and Experience: Track and analyze user engagement metrics, including average time on site, ease of navigation, session duration, pages per session, and bounce rates. Utilize this data to identify areas for improvement in user experience.
medium priority
Mobile and Multilingual Metrics: Track and evaluate mobile user engagement metrics, focusing on usage patterns and engagement levels. Assess the performance and user interaction with the Spanish version.
Engagement and Participation: Monitor and compare engagement metrics like donations, volunteer sign-ups, and event attendance before and after implementation. Evaluate the effectiveness of specific actions to improve conversion rates.
low priority
User Engagement and Experience: Conduct comprehensive cross-device usability testing to ensure consistent user experience across all platforms.
Mobile and Multilingual Metrics: Collect and analyze feedback from Spanish-speaking users to assess content quality and cultural relevance.
high priority
Website Performance and Sustainability: Continuously monitor website maintenance, sustainability, and performance. Ensure ongoing compliance with accessibility standards and maintain optimal functionality across all devices.
User Engagement and Experience: Track and analyze user engagement metrics, including average time on site, ease of navigation, session duration, pages per session, and bounce rates. Utilize this data to identify areas for improvement in user experience.
medium priority
Mobile and Multilingual Metrics: Track and evaluate mobile user engagement metrics, focusing on usage patterns and engagement levels. Assess the performance and user interaction with the Spanish version.
Engagement and Participation: Monitor and compare engagement metrics like donations, volunteer sign-ups, and event attendance before and after implementation. Evaluate the effectiveness of specific actions to improve conversion rates.
low priority
User Engagement and Experience: Conduct comprehensive cross-device usability testing to ensure consistent user experience across all platforms.
Mobile and Multilingual Metrics: Collect and analyze feedback from Spanish-speaking users to assess content quality and cultural relevance.
Reflection + Takeaways
reflect
Completing the A Spacious Place website redesign within ten weeks was a journey of significant personal and professional growth. Leading the project sharpened my project management skills, deepened my understanding and hands-on experience with accessibility design, and improved my ability to articulate ideas and negotiate solutions with stakeholders.
learn
Developed skills and knowledge regarding accessibility compliance, design, and development. Honed experience in balancing team bandwidth, technical feasibility, and stakeholder needs and feedback.
reflect
Completing the A Spacious Place website redesign within ten weeks was a journey of significant personal and professional growth. Leading the project sharpened my project management skills, deepened my understanding and hands-on experience with accessibility design, and improved my ability to articulate ideas and negotiate solutions with stakeholders.
learn
Developed skills and knowledge regarding accessibility compliance, design, and development. Honed experience in balancing team bandwidth, technical feasibility, and stakeholder needs and feedback.