Walden Mutual Bank Strategic Web Partnership

From full accessibility remediation to dynamic CMS architecture and a stunning 13-page report launch, Walden Mutual Bank found their long-term Webflow partner in Graceful Web Studio.

🏦 Meet the Client

Walden Mutual Bank is a certified B Corp, New England-based bank focused on funding the future of sustainable agriculture and values-driven businesses. As an institution rooted in purpose and transparency, their website needed to meet those same standards—accessible, scalable, and beautifully designed.

In November 2024, their team found me on LinkedIn while searching for a Webflow accessibility expert. They reached out with an important mission: make their Webflow site WCAG conformant and improve usability for everyone.

Phase One: Accessibility Remediation

After an initial accessibility audit done internally by their team, I proposed a full global audit to identify common accessibility barriers and streamline the remediation process. They appreciated this approach and gave me the green light.

I began by:

• Auditing every page, flagging recurring accessibility patterns and global component issues
• Prioritizing WCAG 2.2 AA conformance through semantic structure, visible focus styles, proper alt text, and accessible forms
• Remediating issues in real-time rather than listing every instance—saving time and budget while maximizing results

Key wins included:

• Accessible dialogs and form elements
• Improved heading hierarchy and page structure
• A revised accessibility statement that clearly outlined remaining limitations (e.g., the carousel)

By the end of 2024, Walden was able to publicly claim WCAG conformance with confidence—a major milestone and a shared victory. With one exception listed about Webflow's native carousel limitations.

This phase followed the same process behind our Webflow accessibility remediation and consulting service: a global audit first, then focused fixes that respect the client's time and budget.

Phase Two: CMS Architecture Overhaul

Next, we tackled a major site architecture issue: all product and industry pages were static and siloed, making content updates time-consuming with inconsistent lay-outs. Any change had to be done manually across 10+ pages.

They brought me in as a CMS architecture powerhouse to assist with fixing it.

I worked closely with their Senior Vice President of Partners & Impact—who had a clear vision and brought brilliant ideas to the table. Together, we mapped out exactly what content needed to be structured and showcased.

I then:

• Created two advanced CMS collections: Products and Industries
• Designed dynamic templates that used rich field types, cross-linking, and component-based layouts
• Dynamically connected to other CMS collections to pull relevant data
• Set conditional logic to display special call-outs and sections only on certain pages
• Eliminated outdated static pages to reduce technical debt

The result: an intuitive content management system that scales with their business, reduces overhead, and keeps everything beautifully consistent. Winning!

Phase Three: Global Style System Cleanup

Let’s just say politely… when I arrived, their styles were a little inconsistent.

Previous developers had used random class names, inconsistent spacing, and no centralized system. It wasn’t scalable. It wasn’t sustainable.

So I used a unique Client First approach:

• Created a new global style sheet based on their existing preferences
• Standardized text styles, spacing, image wrappers,  layout elements, etc.
• Applied a global naming convention similar to Client-First but tailored to their needs
• Updated pages across the site to align with the new system while keeping room for unique overrides where needed

Now, they have a clean, scalable design system that any team member or contractor can follow.

Phase Four: 2024 Annual Report Build & Launch

In early 2025, Walden asked me to build out 13 new pages to showcase their 2024 Annual Report. They collaborated with a designer to create layouts in Figma, and I was handed the files for development.

Let me just say—the designer did a truly beautiful job. The visuals were strong, thoughtful, and aligned with Walden’s brand. My role was to:

• Implement everything using best practices, accessibility standards, and responsive design
• Fill in the gaps where the design didn’t account for existing global styles
• Translate flat designs into fluid, responsive grid layouts using:
  • CSS Grid
  • Quick Stack
  • Responsive layout techniques
• Rebuild complex components from scratch, including:
  • Accessible data tables and footnotes
  • A brand new navigation menu
  • A custom pagination component

All 13 pages were launched on May 22nd, 2025, and it was a moment of celebration across the company. Their internal team was thrilled, leadership was proud, and the launch was seamless.

Check out the beautiful Annual Report pages here.

Phase Five: Enter Swiper.js – Elegant Carousels That Respect Your Scroll

As our work deepened, we began transforming long vertical sections into more elegant, interactive components—enter Swiper.JS

Walden’s newer pages now feature thoughtfully integrated accessible carousels that:

• Save vertical space without sacrificing content clarity
• Add interactivity, motion, and storytelling
• Reduce scroll fatigue while elevating the user experience

Some of these carousels are built from static content, and others are powered dynamically by CMS collections—giving Walden full control where needed, while minimizing overhead where content is less likely to change.

But make no mistake: this isn’t just visual fluff.

Each carousel is:

• Fully WCAG 2.2 AA conformant
• Built with correct names, roles, and state indicators
• Includes dynamic screen reader announcements for accessible navigation
• Supports pause/play controls for autoplaying content
• Designed with touch target sizing that meets the 24x24px minimum
• Usable with keyboard, mouse, and touch
• Draggable for those who prefer it—but never reliant on dragging alone

It’s a unified experience that feels equally elegant and functional, no matter how someone navigates the site. Now that’s classy accessibility.

Phase Six: Accessible Comparison Tables with Accordion Panels and Rate Switcher

Continuing our strategic partnership, I was asked to develop a comparison table highlighting different accounts. We created one for their individual accounts and one for their commercial accoutns as well.

Walden’s new comparison pages now feature thoughtfully integrated accessible tables that are:

• Fully accessible with correct ARIA name, roles, and values for WCAG conformance
• Built-in accessible accordion panels with full keyboard and screen reader support
• Dynamic rate switcher connected directly to the CMS for real-time interest rate updates
• Separate purpose-built desktop and mobile versions to prevent resize/reflow breaking
• Clean, organized presentation of all information on every screen size
• No horizontal scrolling required on mobile
• Consistent design and visual hierarchy across devices
• Compliance-ready and scalable for future product or rate changes

🎉 A Long-Term, Mission-Aligned Partnership

Walden Mutual Bank isn’t just a client—they’re a strategic partner. Together, we’ve:

• Remediated their site WCAG 2.2 AA conformant
• Transformed static pages into dynamic CMS collections
• Standardized and cleaned up styles site-wide
• Built and launched a major annual report across 13 pages with custom components
• Integrated multiple Static & CMS powered Swiper.js Carousels
• Developed Scrolling Marquees and Animations with Pause Mechanisms

And we’re still going strong—continuing to scale their accessibility, performance, and digital strategy with care and intention.

🌿 Want to build a site that reflects your values and performs at scale?

If you're looking for a long-term partner who brings deep Webflow expertise, accessibility mastery, and an eye for scalable systems—
Let’s start a conversation, request a free quote right now.

Crystal Scott, CPWA and certified Section 508 Trusted Tester, founder of Graceful Web Studio.