Cordwainer UX Improvements & Accessibility

Overview

During a February 2026 internal sync, the team conducted a live page-by-page review of the Cordwainer website and identified several recurring UX problems that needed immediate remediation. Issues spanned staff photo presentation, blog content readability, CTA placement, and ADA compliance. These fixes are important both for user experience and for supporting the paid advertising conversion goals — a well-trafficked site that fails to convert is a wasted spend.

Staff Photo & Hero Image Issues

Problem

Staff pages had poorly cropped photos — heads cut off, faces obscured by gray overlays added to make overlaid text readable. The pattern appeared across multiple staff member pages (e.g., program director, Tamalyn, Bodo).

Root Cause

The site template placed H1 text directly over the hero/banner image, requiring a dark overlay for legibility. This forced a tradeoff: either the text is readable or the photo is properly framed — not both.

Solution

Remove the H1 from the hero image entirely and place it below the image as a standard heading. With no text on the image, the overlay can be removed, the photo can be shown full-color and properly framed, and the H1 retains its semantic value for SEO.

Implementation note: E-Shock should create two blog/staff page templates:
1. Text-on-hero variant — gray overlay + H1 on image (for abstract/landscape hero images only)
2. Text-below-hero variant — full-color image, H1 placed below (required whenever a person's face appears in the hero)

The decision of which template to use should be made based on whether the hero image contains a person's face.

Blog Content Formatting

Problem

Blog posts contained long, unbroken walls of text. Example: the "Importance of Lighting" article was getting traffic but likely losing readers due to poor scannability.

Solution

Reformat existing blog posts and establish a standard for new ones:
- Break long paragraphs into shorter ones (3–4 sentences max)
- Add bullet points for list-style content
- Bold key terms and takeaways
- Use subheadings (H2/H3) to create scannable sections

This is especially important for informational articles (e.g., sundowning, lighting) that attract top-of-funnel traffic. If visitors bounce immediately, the content provides no conversion value.

CTA Placement

Problem

Pages with high conversion intent were missing clear calls to action. The "Schedule a Visit" information page, for example, described visiting hours but had no link or button to actually schedule a visit.

Solution

Audit every page for conversion intent and add appropriate CTAs:
- Visit info pages → "Schedule a Visit" button/link
- Staff/about pages → "Contact Us" or "Learn More" CTA
- Blog posts → contextual CTA relevant to the article topic

CTAs should be prominent, above the fold where possible, and use action-oriented language.

ADA Compliance (Accessibility Plugin)

Problem

The site lacked an ADA-compliant accessibility widget, creating legal exposure. Websites are subject to the Americans with Disabilities Act — failure to accommodate users with visual impairments, color blindness, or other disabilities can result in lawsuits.

A previous accessibility plugin had been tried but was removed because it broke the site.

Solution

Install and configure the Access Yes WordPress plugin. This plugin:
- Creates a configurable accessibility icon (recommended: bottom-left corner, to avoid conflict with chatbot widgets typically placed bottom-right)
- Allows users to adjust contrast, text size, and other accessibility settings
- Has 10,000+ active installations and a 4.5-star rating

Assigned to: Mark

Note on icon placement: Place the accessibility icon in the bottom-left corner. Bottom-right is conventionally reserved for chat widgets and will create visual conflict.

Related Technical Issues (Same Audit)

These issues were identified in the same review session and are tracked separately but are part of the same UX/quality pass:

• Orphan pages (3 pages with no internal links) — fix by adding footer links or linking from relevant content pages. See ^[1]
• Duplicate permissions-policy header — preventing the site from achieving an A+ security score (currently A). Caused by an unknown plugin injecting a duplicate header. Mark is investigating.
• Cookie banner position — cookie consent banner is rendering in the wrong position. Mark to fix.

Recommended Process Going Forward

The team identified a repeatable workflow for ongoing site quality:

1. Periodically browse the live site page by page looking for UX issues
2. Create a ClickUp task for the designer: "make this look better / fix this issue"
3. Designer produces a solution
4. Developer implements it (typically ~30 min per page for minor fixes)

This keeps the site improving incrementally without requiring large redesign efforts.

Action Items

Related Articles

• ^[1]
• ^[2]
• ^[3]