Portfolio Menu

Modernizing a nonprofit website for accessibility and clarity

FRIENDS & ADVOCATES • ACCESSIBLE WEB DESIGN

Accessible Web Design for a Non-Profit

Key Results

0 H

Time to Complete

0 +

Pages Built

Revisions Made

Problems Solved

0 +

Files Delivered

0 %

Fully AODA-compliant website delivered

Enhanced accessibility & user engagement

Improved content clarity for all audiences
View the live site here

0 %

Fully AODA-compliant website delivered

Enhanced accessibility & user engagement

Improved content clarity for all audiences

Need a new website?

Let’s Build an Accessible Experience together!

Project Overview

Friends & Advocates needed a website redesign that met AODA accessibility standards while improving user engagement and clarity. The organization, which provides community support for individuals with mental health challenges, required a platform that was easy to navigate for all users, including those with disabilities.

My Role

Lead UX/UI Designer & WordPress Builder
Information architecture restructuring, accessibility alignment, visual redesign, content hierarchy refinement, multi-page implementation, stakeholder collaboration, and post-launch training support.

Challenges

The existing site was outdated, built using static HTML without responsiveness, making it difficult for members to access information on different devices. Additionally, its lack of proper structure meant that important information was often missed, causing members to rely on mailed forms rather than the website.

Friends & Advocates Peel & Surrounding Areas Services webpage layout

Friends & Advocates Peel & Surrounding Areas Contact Webpage Layout

Friends & Advocates Peel & Surrounding Areas How to Get Involved webpage layout

Solution

I developed a modern, fully accessible website that adhered to AODA compliance while maintaining an intuitive and clean design. This involved optimizing content for screen readers, keyboard navigation, and high-contrast visibility to support a diverse user base.

Process

User & Accessibility Research: Identified key accessibility barriers in the old site and outlined solutions.
Content Reorganization: Structured the site into clear sections, making information easy to find.
AODA Compliance Implementation: Ensured WCAG guidelines were met, including keyboard navigation, alt text for images, and screen reader-friendly formatting.
User Testing & Iteration: Conducted feedback sessions with members, incorporating requested improvements.

UX/UI Enhancements

Creating a seamless and accessible user experience was at the heart of this project. To ensure ease of navigation and engagement, I focused on key UX/UI improvements:

AODA-Compliant Design – Implemented accessibility best practices, including proper contrast ratios, clear typography, and intuitive navigation.
Improved Site Structure – Streamlined the layout for better content hierarchy, making resources easier to find.
Mobile Optimization – Designed a fully responsive experience, ensuring accessibility across devices.
Enhanced Readability & Engagement – Updated fonts, spacing, and colours for a modern, user-friendly experience.
Optimized Donation Flow – Made it easier for visitors to contribute, improving visibility and call-to-action placement.

These enhancements resulted in a more intuitive, inclusive, and visually engaging website that better serves the community.

Original

WIP

Final Design

Previous slide

Next slide

Results

Delivered a fully accessible website that aligned with AODA compliance.
Increased member engagement, reducing reliance on mailed forms.
Simplified site navigation and improved information clarity.

Client Feedback

The new website has made such a difference for our members. Navigation is clearer, and accessibility features have helped so many people. We couldn’t be happier!

Dive Deeper into the Process

The original Friends & Advocates website lacked responsiveness, accessibility features, and a clear structure. This made it difficult for members, who often opted for mailed forms instead of using the site.

Key improvements included:
✅ Improved navigation & screen reader compatibility
✅ Keyboard-friendly interaction
✅ High-contrast UI & readable fonts

To ensure accessibility, I structured content so that related information was grouped under logical menu categories, allowing users to find what they needed with fewer clicks. The static design approach helped reduce cognitive overload for neurodivergent users while maintaining a clean, professional layout. It also aided the visually impaired and those with neurological conditions to browse safely.

User testing was conducted with Friends & Advocates members, and feedback was implemented before launch. Adjustments primarily focused on element placement, menu clarity, and colour contrast improvements to optimize readability and ease of use.

Need a new website?

Let’s Build an Accessible Experience together!