Excel Society Website Redesign Enhancing Accessibility and Community Engagement

Screenshot preview of Excel Society Website Redesign, Enhancing Accessibility and Community Engagement

Introduction

In collaboration with Excel Society and the work-integrated learning platform Ripen, we built a responsive website in Webflow that enables staff to manage content easily and helps users find services, events, and other essential information through accessible and well-organized design.

Role

As a web developer, I collaborated with three other designer on UX research, wireframing and design. I also played a major role in Webflow development, including implementing CMS structures, building responsive layouts, and implementing JavaScript and third-party tools.

Figma ProjectWebflow Demo
Course Name:
DESN 440: Web Design & Development II
Timeline:
Jan 2025 – Apr 2025
Collaborators:

  • Andre Arabejo

  • Amaka Kwushue

  • Anika Molino

Skills:

  • UX Research & Testing

  • Visual Design

  • Prototyping

  • Web Development

  • CMS Implementation

Tools:

  • Figma

  • Webflow

  • Finsweet

The Problem Space

A website often serves as the first point of contact for organizations that rely on public support and community engagement. It's not just a source of information, as it's where people decide whether to get involved, seek services, or offer support. The website's various needs mean accommodating a wide range of users; however, each group brings different goals and digital expectations. The challenge lies in designing an experience that communicates and adapts to varied needs.

Challenges

  1. Dense, Unscannable Content Layout

    The large blocks of text can potentially overwhelm the user and a lack of clear pathways to donate, volunteer, or participate results in low interaction rates and missed opportunities.

  2. Unclear Communication of Mission and Services

    The website does not clearly explain who Excel Society is or what they do. This lack of clarity limits user engagement and reduces understanding of their services.

  3. Outdated System with Limited Update Flexibility

    The site is built on a system that requires a developer to update content. This prevents staff from easily posting new information about events or services.

Problem Areas

Excel Society’s initial Services page, showing a hero section, followed by an introduction about community care and a two-column overview of services in Edmonton and Calgary.
Excel Society’s initial About page, featuring a semi-transparent overlay of a red-brick church behind text titled ‘Enriching Lives Since 1923,’ followed by a multi-paragraph history.

The Solution

Working with my team together, we completely redesigned the website using a modern platform to address usability and maintenance challenges. Essential improvements included:

  1. Intuitive Information Architecture

    Navigation was restructured, using user-centred categories and moving pages into their respective sections.

  2. Modern Visual Design and Layout

    The new design emphasized accessibility and clarity, with streamlined content, strong visual hierarchy, and high-visibility calls to action.

  3. Client-Side Content Management

    Webflow's content management system was implemented to allow staff to update events, news, and program details directly through a user-friendly dashboard, reducing reliance on developers.

  4. Improved Engagement and Conversion Paths

    A dedicated events page with filtering options and clearly placed volunteer and contact links were introduced to make participation and support more visible.

Demo

Research Process

Through the initial process of research, we learned that the original Excel Society website presented major usability for its primary audiences, including supporters, clients, and volunteers and maintenance issues for their staff. We conducted a client interview, a card-sorting exercise, and a comprehensive content audit to uncover these issues.

Client Interview

  • "The current website is pretty outdated, so we're totally open to new ideas and changes."
  • "We want to grow our events page and make it super easy to update"
  • "We’re hoping more people get involved, like by working with us, volunteering, or donating."
  • "We’re open to changing the wording to make it feel more inclusive and welcoming to everyone."

Content Audit

My content-audit board for the Excel Society site, annotated by arrows and sticky notes.
Anika’s content-audit board for the Excel Society site, annotated by arrows and sticky notes.
Andre’s content-audit board for the Excel Society site, annotated by arrows and sticky notes.
Amaka’s content-audit board for the Excel Society site, annotated by arrows and sticky notes.

Card Sorting

Final group card sort results with color-coded categories into About, Services, Engagement, Our People, Support Us, Careers.
Final sitemap diagram for the redesign showing the top-level nav categories with nested child pages in colored blocks and ‘Contact’/‘Donate’ highlighted as CTA buttons.

User Statement

"As a volunteer, I want to quickly find relevant information about services and events so that I can stay engaged and support the organization."

Ideation & Design

During this phase, I worked with my team to reimagine Excel Society's web experience, structure and design based on our findings and strategic insights. I contributed to the following with the help of my team:

  1. Reorganized Content for Clarity and Navigation

    We restructured the sitemap to reduce redundancy and grouped related content to help users find essential information more quickly.

  2. Created a Cohesive, User-Friendly Interface

    Drawing from our prototyping and feedback, we developed a clean and approachable design system aligned with Excel Society's mission and audience.

  3. Improve the Accessibility and Ease of Maintenance

    We designed the site to be responsive, accessible, and easy for staff to update, ensuring long-term usability without requiring technical expertise.

Sitemap

Final sitemap diagram for the redesign showing the top-level nav categories with nested child pages in colored blocks and ‘Contact’ and ‘Donate’ highlighted as CTA buttons.

Wireframing

Mid-fidelity wireframe for the Excel Society homepage layout featuring top navigation, large hero section, and several other important sections.
Wireframe for the Designated Supportive Living page with structured content blocks for Balwin Villa and Grand Manor.
Wireframe of the Careers page with an introductory section, employment philosophy, and a job listings module that includes filters and multiple job listings.
Wireframe of the Excel Advantage page with sections on the organization’s history, mission, vision, and values.

Branding Adjustments

Excel Society’s typography system showing heading levels and body text styles using the Montserrat font family, with labeled sizes and formatting styles.
Brand color system for Excel Society with primary and secondary blue tones, accent and functional colors including orange and red, and associated HEX codes and usage guidelines.

Feedback & Changes

After completing our initial design before implementation, we presented to the client for feedback to gauge usability as well to see if it aligned with our client's goal. While we did not conduct formal user testing sessions, we shared our design with peers in our class to gather informal impressions and suggestions.

Feedback

  • "In the information-dense pages, it is still overwhelming to read."
  • "Some pages could benefit from more visual breaks or icons to guide the eye."
  • "The visual design is a vast improvement as it's much more modern and easier to navigate than the original site."

Handling large block of text

Design variation introducing a toggle button to expand or collapse dense content sections, aimed at improving user readability and reducing text overload.

1. Toggling to show or hide content

Some of the feedback highlighted that dense sections of text felt overwhelming and did not encourage users to read beyond the first paragraph. To improve this, we initially introduced a toggle button that allowed users to choose how much content they wanted to view by showing or hiding sections.

Updated content layout using boxed sections with added icons, whitespace, and visual hierarchy to improve readability and information scannability.

2. Sectioning content into boxes

However, we noticed that this approach sometimes left pages looking empty, and there was also a concern that users might miss the toggle button entirely, leading to important content being overlooked. To address the issue, we reorganized the content into boxes and add more icons, white space, and visual hierarchies, effectively breaking up large text blocks into sections that are easier to scan and comprehend.

Implementation

To bring our redesigned concept to life, we followed a structured development process using the MAST framework to simplify building grids and encourage creating and using reusable classes. While the entire team collaborated on structuring and styling pages, I primarily handled advanced interactions, JavaScript functionality, and managing structured content systems.

Development Process

  1. Content Architecture Optimization

    We redefined how content was organized and connected across the site, using CMS collections for easy updates and ensuring scalability, consistency, and logical relationships between services, events, and news.

  2. Component-Based Page Templates

    We created reusable components to maintain visual consistency and streamline future updates across the site.

  3. Responsive Design System

    Every page was developed to be fully responsive across desktop, tablet, and mobile, ensuring accessibility and usability for a broad audience of guardians, donors, and clients.

CMS Utilization

Screenshot of Webflow CMS editor showing a job post entry with several fields and description for ease of use and maintainability.

Challenges & Solutions

  1. Webflow Limitations for Custom Logic

    Webflow lacked built-in support for complex user interactions like dynamic content filtering with their databases. Solution: I helped implement conditional logic through structured CMS collections and integrated third-party tools like Finsweet to enable advanced filtering and interactivity.

  2. Maintaining Accessibility Compliance

    Webflow's visual editor required extra care to uphold accessibility standards, such as semantic HTML and alt text on images. Solution: We performed manual audits during development and used tools like Webflow's audit panel to meet WCAG compliance.

  3. Content Migration and Cleanup

    Many original pages had inconsistent formatting and excessive text, making direct migration inefficient. Solution: We rewrote and restructured some of the content during implementation to fit the new visual hierarchy and break dense blocks into skimmable, sectioned layouts.

Custom and 3rd Party Javascript Libraries

Custom JavaScript snippet used in the Excel Society Webflow project to support dynamic tag display.
Finsweet Attributes documentation page showing how to implement list filtering for Webflow CMS, with a visual demo and setup instructions.

Final Mockup

Figma Design

Figma design preview

Reflection

This project reinforced the importance of thoughtful content architecture and inclusive design, especially for nonprofits serving diverse users like supporters, clients, and volunteers. We delivered a welcoming and manageable site by focusing on accessibility with clear user pathways.

  1. Client collaboration anchored every design choice

    Interviews in both the early and middle phases helped us stay aligned with Excel Society's vision and build a site that truly supports their goals which allows for connection, clarity, and ease of use.

  2. Balancing clarity with complexity was key

    Many pages required presenting dense information, so we tried different layout strategies like visual hierarchy, sectioning, and skimmable formatting to keep content digestible without oversimplifying.

  3. Starting from Problem Discovery to Development

    From identifying usability issues through research to restructuring the content and implementing a maintainable site, our team worked iteratively to ensure every phase was built toward a solution that met user and client needs.

Other Case Studies