Excel Society
A nonprofit supporting people with disabilities and complex mental health needs needed a site its own staff could run, and an accessibility baseline that would hold after handoff. We rebuilt both, from research through to launch.
Role: Front-end development & UX
Shipped
a Webflow build the staff run themselves, a CMS content model behind the events and careers pages, with WCAG held through the build, not bolted on after.
- Year
- 2025
- Client
- Excel Society, via Ripen
- Team
- With Andre, Amaka & Anika · MacEwan
- Scope
- CMS content model, faceted filtering, responsive build, WCAG
- Stack
-
- Design
-
- Figma
- Build
-
- Webflow
- MAST framework
- Content
-
- Webflow CMS collections
- Filtering
-
- Finsweet Attributes
- Custom JS
- Assurance
-
- Manual WCAG
- Webflow audit
Overview
Excel Society is an Edmonton nonprofit that has supported people with disabilities and complex mental health needs since 1923. Through Ripen, MacEwan's work-integrated learning platform, four of us took it on as a real client: a Webflow rebuild that staff can run themselves, organized so a visitor can find a service, an event, or a way to give without hunting for it.
My role
I worked across the project, from UX research and wireframing with the team to the front end that carried the design. On the build I took the heavier lifts: the CMS content model, the responsive layouts, and the custom and third-party JavaScript behind the filterable events and careers pages. This case study follows that build, from the content model to the filtering on top of it.
With Andre, Amaka & Anika
The problem
A site people bounced off, and staff could not fix
For a nonprofit, the website is the front desk. It is where someone decides to volunteer, looks up a service, or gives. Excel Society's old site made all three harder than they should be, and made routine upkeep harder still.
- 01
Walls of text, no way in
Long unbroken blocks buried the things people came for. With no clear path to donate, volunteer, or join a program, interest had nowhere to land.
- 02
A mission left unsaid
The site never quite explained who Excel Society is or what it does, so visitors left without the one thing a nonprofit homepage owes them: a reason to care.
- 03
Locked behind a developer
Every change ran through a developer. Staff could not post an event or fix a detail themselves, so the site fell out of date faster than anyone could keep up.
The solution
Four moves answered it
Restructure the nav
User-centred categories, each page filed where people expect it.
An open card sort settled the six top-level groups, then every page moved into the section visitors actually reached for.
The Problem It Answers
Visitors used to hit walls of text with no clear way in. A nav filed by how people actually think gives them a way through.
Clarify the surface
Stronger hierarchy, lighter pages, calls to action you can find.
Dense blocks broke into skimmable, sectioned layouts, with accessibility and high-visibility calls to action carried through the design.
The Problem It Answers
The old site never made clear who Excel Society is or why to care. A cleaner surface puts the mission, and the next step, in plain sight.
Hand staff the keys
A Webflow content management system so events and news update without a developer.
Staff update events, news, and program details from a Webflow dashboard, so the site stays current without anyone touching code.
The Problem It Answers
Updates used to depend on a developer, so the site drifted out of date. Now the people who run it keep it current themselves.
Open the front doors
A filterable events page and visible volunteer and contact routes.
Finsweet-powered filtering on a dedicated events page, plus volunteer and contact links placed where people look for them.
The Problem It Answers
Interest had nowhere to land. A filterable events page and visible volunteer and contact routes turn that interest into action.
Research
We listened before we redrew anything
A client interview, a content audit, and an open card sort told us where the old site lost people, and how the people who use it actually think about its content.
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, 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
Each of us audited the live site page by page, flagging what was unclear, redundant, or buried. Four boards, one shared map of the damage.
Information architecture
Card sort
Then we sorted the site's content into groups that made sense to its audience, not to its old org chart. Six top-level groups emerged, the ones the live site still uses. Sort the pile to see where things landed.
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.
Design
Structure first, then surface
With the research in hand, we rebuilt the backbone: a sitemap people could predict, wireframes to test the shape, and a visual system to match. I owned the information architecture and the front end that would carry it.
- 01
Regroup the content
We rebuilt the sitemap to cut redundancy and file related pages together, so people reach what they need in fewer steps.
- 02
A system, not a skin
From prototyping and feedback we shaped a clean, approachable design system that fits Excel Society and the people it serves.
- 03
Built to maintain
Responsive, accessible, and editable by staff, so the site stays usable long after handoff without anyone touching code.
Navigation design
Navigation, before and after
The old menu leaned on vague verbs, Learn, Care, Engage, that hid where things actually lived. The card sort replaced them with six plain-language categories, and promoted Donate from a buried text link to a button.
Sitemap
Wireframes
Branding
Feedback, and one problem we kept chasing
We showed the design to the client and to peers. The verdict: a clear step up, but the densest pages were still a lot to take in.
On 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: much more modern and easier to navigate than the original site.
Two passes at the fix
01
First pass: a show / hide toggle
Dense sections felt heavy, so we let people expand or collapse the detail. It cut the wall of text, but pages now read as empty, and some visitors never noticed the toggle at all.
Excel Society has supported the community since 1923.
Across supportive living, programs, and day services, the organization works alongside guardians and families so people can live fuller, more independent lives, exactly the kind of history that used to sit in an unbroken wall of text.
02
Second pass: break it into boxes
So we stopped hiding content and started structuring it: boxed sections, icons, and real whitespace that split a long page into parts you can scan without unfolding anything.
Content model
From a sitemap to a data model
The research settled what the site should hold; the build had to encode it. We built in Webflow on the MAST framework, and I modelled the content that changes most, services, events, and careers, as CMS collections, so those pages render from structured data instead of hand-maintained markup.
- 01
Model the content, not the pages
Services, events, and job postings each became a Webflow CMS collection: one typed schema per content type, so every entry stays consistent and the templates render from data instead of hand-built pages.
- 02
One template, many entries
Each collection drives a single templated layout, so a new event or role is a CMS entry, not a new page, and a design change is one edit instead of twenty.
- 03
Fields chosen for how the page is used
Careers carries Category, Job type, and Location as structured fields because the page has to filter on them; Events carries a searchable Name because that is all visitors reach for. The model follows the page, not the org chart.
Webflow CMS · content model
Three collections, filtered three ways
Each dynamic page reads from a collection: a fixed set of typed fields. A marked field drives a filter or a search. Select a collection to trace why each is modelled the way it is.
Staff CMS
The people who run it keep it current
Modelling the content as collections is what hands the site back to its staff. Every entry is a form, not a page edit, so adding an event or a job posting takes no developer and no code. That was the brief: a site the team can run after we leave.
Webflow CMS
Posting a job, no developer in the loop
This is the shape of adding a job posting in Webflow. Fill the fields and tag it; the card on the careers page, and the filters that sort it, update as you go.
Published /careers
Direct Care
Community Support Worker
The category and type tagged here are fields on the Careers collection, the same values the careers page filters on, next.
In the editor
One field does double duty. The image field on every collection is set to require alt text, so a staff-added photo cannot publish without a description. Accessibility is enforced by the model, not left to whoever posts next.
Filtering
The careers page had to filter itself
Services lists; events search by name; careers was the page that needed real filtering, across category, job type, and location at once. Webflow has no native way to facet a Collection List, so this is where the build needed engineering on top of the builder.
Careers · faceted filter
Filter the real postings
These eight roles are live on the careers page. Narrow them by the same three facets Finsweet drives over the CMS collection.
Showing all 8 roles
-
Supportive Independent Living
Community Support Workers
-
Food Services
Casual Cook
-
Licensed Practical Nurse
BV.25.16 - Licensed Practical Nurse
-
Health Care Aide
Community Health Care Aide - Weekends
-
Health Care Aide
BV.25.10 - Health Care Aide
-
Licensed Practical Nurse
BV.25.13 - Licensed Practical Nurse
-
Direct Care
Community Support Worker - Weekends
-
Licensed Practical Nurse
BV.24 - Licensed Practical Nurse
No roles match these filters.
Finsweet Attributes drives these same three facets over the Careers collection on the live site; this is that behaviour, rebuilt on the real postings.
Where Webflow pushed back
- 01
A Webflow list cannot filter itself
A Collection List renders entries, but Webflow has no native UI to facet them, and the careers page needed Category, Job type, and Location filters at once.
Fix:I gave each facet its own field on the collection, then wired in Finsweet Attributes to drive the filtering, sorting, and live result count over that field set.
- 02
Cards and filters had to read one source
Each job card shows its own category and type as tags, and those tags have to match the values the filters run on, or display and filtering drift apart.
Fix:A small custom script drives the dynamic tag display from the same CMS fields the filters read, so what a card shows and what it filters on can never disagree.
Custom and third-party JavaScript
Accessibility
Holding WCAG inside a visual builder
Webflow makes it easy to ship a pile of unlabelled divs. Keeping this site accessible, and keeping it that way after we left, came down to four habits, not a checklist run at the end.
- 01
Semantic structure
Real landmarks, headings, and lists, so the page is navigable by structure, not just by eye. The builder does not produce that on its own; we marked up every section by hand.
- 02
Alt text that outlives us
Every image carries a description, and the CMS image field is required, so staff-added photos stay accessible long after handoff.
- 03
Manual audits while building
We checked accessibility by hand as we built, not as a final sweep, catching issues while they were still cheap to fix.
- 04
The audit panel, as backstop
We ran Webflow's own accessibility audit across the pages to back up the manual passes and hold the line on WCAG.
No automated checker substitutes for a person tabbing through the page. The audit panel backed up the manual passes; it did not replace them.
Outcome
A shipped redesign, and what I learned
The redesign shipped on Webflow: staff post their own events, the pages hold up across devices, and the structure mirrors how people actually look for help. The final design is below.
Reflection
- 01
The model is the maintainability
Modelling the content as typed collections, not pages, is what lets staff keep the site current and what made the careers filtering possible. The data model was the load-bearing decision, not the visual design.
- 02
Low-code still needs engineering
Webflow carried most of the way, but the faceted filtering, the dynamic tags, and the semantic, accessible output all needed real structuring and custom code on top. The interesting work lived in the gaps the builder left.
- 03
Accessibility holds when it is built in
A required alt-text field, semantic structure, and audits run during the build (not after) are what keep WCAG intact once the team is running the site without us.