Cross-page findings

Component-level findings: patterns that aren't unique to a single template but recur across multiple pages. These propagate the most; a single component change touches every page where the pattern appears.

14
Cross-page findings
18,686 px
Quantified reduction
6
High-severity
0
New components needed
C-CARD-LIST.1 High density P02P03 3

Care-home result card is 1,000–1,200 px tall on mobile

Each card stacks a full-width image (~280 px), title row, CQC line, 7-row care-type matrix showing offered + not-offered services with similar visual weight, phone number row, and a full-width "VIEW HOME" button. Total ~1,000–1,200 logical px. The same template renders only one card per fold on a 844 px viewport.

−10,500 px · ~7,000 px on P02 (10 cards) + ~3,500 px on P03 (7 cards) Read more ↓
On the page
Fix

Compact to ~300 px per card, side-image layout, `category-tag` chips for offered services, drop the per-card phone (it's on the home detail page). The `vacancyItem` template on page 05 already proves Care UK can build a compact card pattern (~70 px each).

Catalyst components

card · category-tag

C-PANEL.1 High density P01 3

Inverse-purple section-intro panels are content-light, space-heavy

Each panel contains a heading + 2–3 line body + single CTA. Panel itself is 280–520 px tall on mobile. Across 8 instances on page 01 that's ~3.2 viewport heights of section-introduction chrome before any actual content is shown inside.

−2,686 px · 8 instances on P01 Read more ↓
On the page
Fix

Replace the 8 inverse intro panels with default-surface `content-section` headings and inline CTAs. Restrict `.catalyst-inverse` to **one** block per page (typically the final CTA) so the dark surface remains an emphasis tool rather than the page's default skin.

Catalyst components

content-section · inline-cta

C-CAROUSEL.1 High touch P01P04 3

Slick.js pagination dots are 20×20 px (sub WCAG AA touch minimum)

The dots are 20×20 logical px, below the WCAG 2.5.8 AA minimum of 24×24 px. They are the primary affordance for paginating image carousels on mobile, where swipe is the alternative but discoverability of swipe vs the dots is mixed.

WCAG 2.5.8 AA fail Read more ↓
On the page
Fix

Replace slick.js pagination styling with Catalyst-tokenised dot size (minimum 24 px hit target), or use chevron + thumbnail strip patterns from `image-gallery`.

Catalyst components

image-gallery

C-CHAT.1 High layout P01P02P03P04P05P06 2

Two persistent bottom-anchored widgets compound on every screen

Two competing always-on bottom widgets reduce the effective scrollable viewport by ~80–200 logical px on every screen of content the user reads. WCAG 2.4.11 (Focus Not Obscured), content under a persistent widget cannot be focused without scrolling around it. Per page: - P01, Olark chat icon + Recently Viewed (2 widgets) - P02–P03, Recently Viewed only - P04, Recruiting Assistant + Recently Viewed (2 widgets) - P05–P06, Recently Viewed only

viewport reclaimed × 91 screens Read more ↓
On the page
Fix

Consolidate to one persistent action per page maximum, with a documented mobile safe-area inset. Olark vs Recently Viewed must be rationalised at the application layer. Use the `floating-action` composition pattern (system-level documentation, not a new component).

Catalyst components

floating-action

C-IMG.1 High layout P01P02P03P04P05P06 2

77% of images across the audit are missing width / height / aspect-ratio

Images without explicit dimensions cause **layout shift** as they load, content jumps as the browser reserves space. This produces a poor Core Web Vitals CLS score (a Google ranking signal) and a janky perceived performance. The brief explicitly calls this out. Per page: - P01: 242 / 297 (81%) - P02: 13 / 15 (87%) - P03: 10 / 12 (83%) - P04: 18 / 69 (26%) - P05: 3 / 5 (60%) - P06: 104 / 106 (98%)

390 of 504 images (77%) site-wide Read more ↓
On the page
Fix

Apply the existing `image` component (or `<picture>` with explicit dims) to all live image renders. The component already documents `width` / `height` props as required, with `aspect-ratio` as the mobile-friendly modern alternative.

Catalyst components

image

C-MAP.1 High navigation P02P03P05 2

Map experience is silently stripped on mobile

Desktop renders a large interactive UK map showing every Care UK home / hiring location. Mobile replaces the map with a single text link "View homes on a map" wedged below the search form. The primary spatial discovery affordance is removed, not adapted.

feature parity Read more ↓
On the page
Fix

Add a `card-flush` static-map preview as the second module, opening to a full-screen map sheet via an `image-gallery`-style interaction. The careers section (P06) already does this with Google Maps, proving Care UK's templates can support it.

Catalyst components

card-flush · image-gallery

C-CARD-LIST.2 Medium density P02P03 1

Care-type matrix shows offered AND not-offered with similar weight

Each `careHomeItem` lists 7 care types with mixed pink-check (offered) and grey-circle (not offered) icons. Both icons are the same size and visual weight. 70 service rows on page 02 (10 cards × 7) and 49 on page 03, ~280 px per card of "what's not offered" content.

−2,800 px · ~280 px per card × 10 cards on P02 Read more ↓
On the page
Fix

Show only what the home does offer, as a `category-tag` chip row. Not-offered services are an absence, not a feature, they don't need to be displayed.

Catalyst components

category-tag

C-PANEL.2 Medium density P01P06 2

"At a glance" / "Job at a glance", long table-like metadata block

Stacks 4–6 rows of metadata (Location, View map, CQC Rating, Availability, Pricing PDF, Contract PDF on P01, Location, Pay, Shifts, Contract, Reference on P06). Sits in the second viewport on both pages.

−600 px · ~300 px per instance Read more ↓
On the page
Fix

Collapse to a compact summary (top, 1–2 facts that drive the user's decision) plus an accordion holding full detail. Catalyst components needed already exist.

Catalyst components

card · accordion

C-FONT.1 Medium typography P01P02P03P04P05P06

11–14 px text used in 100+ places site-wide

WCAG and iOS HIG both recommend ≥ 16 px for body text. 11–12 px text is below that floor; 14 px is borderline (acceptable for footnotes / captions, not body copy). P01 alone has 39 elements at 11 px, 38 at 12 px, 99 at 14 px.

WCAG / iOS HIG body floor Read more ↓
Fix

Use the existing `body` component sizes, `body-md` (16 px) as default, `body-sm` (14 px) as the smallest defensible body size. Footnote / caption uses can drop to `body-xs` (12 px) but should be bounded.

Catalyst components

body

C-FORM.1 Medium layout P02P03P05 2

Search form Reset / Submit visually unbalanced

Reset is a small outlined button (~75 px wide); Submit is a wide filled button (~190 px). The asymmetric pair reads as unresolved.

form consistency Read more ↓
On the page
Fix

Apply the existing form-row pattern, primary + secondary share width on mobile. `button` Primary + `button` Secondary, equal-width on small viewports.

Catalyst components

button

C-FORM.2 Medium navigation P02P03P05 2

Search results lack active-filter / sort summary, no count

After Submit, the page reloads with results but no chip row showing "Filters: …, Sort: …, X of Y results." Users can't refine without scrolling back to the form.

feedback gap Read more ↓
On the page
Fix

Add a `filter-chip` row + count band above results (e.g. "36 vacancies in 10 homes near GU22"). No new component needed.

Catalyst components

filter-chip · body

C-LINK.1 Medium touch P01 1

Inline body links have 22 px line-height, below WCAG 2.5.8 AAA 44 px touch target

Inline links inherit body-text line-height (~22 px). Wide enough horizontally; too short vertically. The hit target is the link's bounding rect.

WCAG 2.5.8 AAA fail Read more ↓
On the page
Fix

Add a tokenised `--link-min-tap-height` of 24 px applied via padding-y on inline anchors. Already addressable with existing tokens.

Catalyst components

body

C-FOOTER.1 Low density P01P02P03P04P05P06 3

Footer carries decorative pink swoosh adding ~300 px chrome

Decorative pink swoosh sits before the actual footer content (links, copyright, social, accreditation badge). On mobile, after a long scroll, the user wants to be at the bottom, the swoosh delays it.

−1,800 px · ~300 px per page × 6 pages Read more ↓
On the page
Fix

Suppress decorative footer elements at small viewports. Apply a mobile-suppression utility on the swoosh decoration.

Catalyst components

footer

C-NAV.1 Low density P01P02P03P04P05P06 2

Top utility tab bar consumes ~50 logical px on every page

The three audience tabs (CAREERS / CARE HOMES / CUSTOMERS) sit at the very top of every page, they're a Care UK Group navigation (sister-site switcher) but consume permanent vertical space on a small viewport.

−300 px · ~50 px per page × 6 pages Read more ↓
On the page
Fix

Collapse into a hamburger / dropdown on mobile via the existing `eyebrow-nav-bar` component, which already documents this pattern.

Catalyst components

eyebrow-nav-bar

C-CARD-LIST.1 High density P02P03 3

Care-home result card is 1,000–1,200 px tall on mobile

Each card stacks a full-width image (~280 px), title row, CQC line, 7-row care-type matrix showing offered + not-offered services with similar visual weight, phone number row, and a full-width "VIEW HOME" button. Total ~1,000–1,200 logical px. The same template renders only one card per fold on a 844 px viewport.

−10,500 px · ~7,000 px on P02 (10 cards) + ~3,500 px on P03 (7 cards) Read more ↓
On the page
Fix

Compact to ~300 px per card, side-image layout, `category-tag` chips for offered services, drop the per-card phone (it's on the home detail page). The `vacancyItem` template on page 05 already proves Care UK can build a compact card pattern (~70 px each).

Catalyst components

card · category-tag

C-PANEL.1 High density P01 3

Inverse-purple section-intro panels are content-light, space-heavy

Each panel contains a heading + 2–3 line body + single CTA. Panel itself is 280–520 px tall on mobile. Across 8 instances on page 01 that's ~3.2 viewport heights of section-introduction chrome before any actual content is shown inside.

−2,686 px · 8 instances on P01 Read more ↓
On the page
Fix

Replace the 8 inverse intro panels with default-surface `content-section` headings and inline CTAs. Restrict `.catalyst-inverse` to **one** block per page (typically the final CTA) so the dark surface remains an emphasis tool rather than the page's default skin.

Catalyst components

content-section · inline-cta

C-CAROUSEL.1 High touch P01P04 3

Slick.js pagination dots are 20×20 px (sub WCAG AA touch minimum)

The dots are 20×20 logical px, below the WCAG 2.5.8 AA minimum of 24×24 px. They are the primary affordance for paginating image carousels on mobile, where swipe is the alternative but discoverability of swipe vs the dots is mixed.

WCAG 2.5.8 AA fail Read more ↓
On the page
Fix

Replace slick.js pagination styling with Catalyst-tokenised dot size (minimum 24 px hit target), or use chevron + thumbnail strip patterns from `image-gallery`.

Catalyst components

image-gallery

C-CHAT.1 High layout P01P02P03P04P05P06 2

Two persistent bottom-anchored widgets compound on every screen

Two competing always-on bottom widgets reduce the effective scrollable viewport by ~80–200 logical px on every screen of content the user reads. WCAG 2.4.11 (Focus Not Obscured), content under a persistent widget cannot be focused without scrolling around it. Per page: - P01, Olark chat icon + Recently Viewed (2 widgets) - P02–P03, Recently Viewed only - P04, Recruiting Assistant + Recently Viewed (2 widgets) - P05–P06, Recently Viewed only

viewport reclaimed × 91 screens Read more ↓
On the page
Fix

Consolidate to one persistent action per page maximum, with a documented mobile safe-area inset. Olark vs Recently Viewed must be rationalised at the application layer. Use the `floating-action` composition pattern (system-level documentation, not a new component).

Catalyst components

floating-action

C-IMG.1 High layout P01P02P03P04P05P06 2

77% of images across the audit are missing width / height / aspect-ratio

Images without explicit dimensions cause **layout shift** as they load, content jumps as the browser reserves space. This produces a poor Core Web Vitals CLS score (a Google ranking signal) and a janky perceived performance. The brief explicitly calls this out. Per page: - P01: 242 / 297 (81%) - P02: 13 / 15 (87%) - P03: 10 / 12 (83%) - P04: 18 / 69 (26%) - P05: 3 / 5 (60%) - P06: 104 / 106 (98%)

390 of 504 images (77%) site-wide Read more ↓
On the page
Fix

Apply the existing `image` component (or `<picture>` with explicit dims) to all live image renders. The component already documents `width` / `height` props as required, with `aspect-ratio` as the mobile-friendly modern alternative.

Catalyst components

image

C-MAP.1 High navigation P02P03P05 2

Map experience is silently stripped on mobile

Desktop renders a large interactive UK map showing every Care UK home / hiring location. Mobile replaces the map with a single text link "View homes on a map" wedged below the search form. The primary spatial discovery affordance is removed, not adapted.

feature parity Read more ↓
On the page
Fix

Add a `card-flush` static-map preview as the second module, opening to a full-screen map sheet via an `image-gallery`-style interaction. The careers section (P06) already does this with Google Maps, proving Care UK's templates can support it.

Catalyst components

card-flush · image-gallery

C-CARD-LIST.2 Medium density P02P03 1

Care-type matrix shows offered AND not-offered with similar weight

Each `careHomeItem` lists 7 care types with mixed pink-check (offered) and grey-circle (not offered) icons. Both icons are the same size and visual weight. 70 service rows on page 02 (10 cards × 7) and 49 on page 03, ~280 px per card of "what's not offered" content.

−2,800 px · ~280 px per card × 10 cards on P02 Read more ↓
On the page
Fix

Show only what the home does offer, as a `category-tag` chip row. Not-offered services are an absence, not a feature, they don't need to be displayed.

Catalyst components

category-tag

C-PANEL.2 Medium density P01P06 2

"At a glance" / "Job at a glance", long table-like metadata block

Stacks 4–6 rows of metadata (Location, View map, CQC Rating, Availability, Pricing PDF, Contract PDF on P01, Location, Pay, Shifts, Contract, Reference on P06). Sits in the second viewport on both pages.

−600 px · ~300 px per instance Read more ↓
On the page
Fix

Collapse to a compact summary (top, 1–2 facts that drive the user's decision) plus an accordion holding full detail. Catalyst components needed already exist.

Catalyst components

card · accordion

C-FONT.1 Medium typography P01P02P03P04P05P06

11–14 px text used in 100+ places site-wide

WCAG and iOS HIG both recommend ≥ 16 px for body text. 11–12 px text is below that floor; 14 px is borderline (acceptable for footnotes / captions, not body copy). P01 alone has 39 elements at 11 px, 38 at 12 px, 99 at 14 px.

WCAG / iOS HIG body floor Read more ↓
Fix

Use the existing `body` component sizes, `body-md` (16 px) as default, `body-sm` (14 px) as the smallest defensible body size. Footnote / caption uses can drop to `body-xs` (12 px) but should be bounded.

Catalyst components

body

C-FORM.1 Medium layout P02P03P05 2

Search form Reset / Submit visually unbalanced

Reset is a small outlined button (~75 px wide); Submit is a wide filled button (~190 px). The asymmetric pair reads as unresolved.

form consistency Read more ↓
On the page
Fix

Apply the existing form-row pattern, primary + secondary share width on mobile. `button` Primary + `button` Secondary, equal-width on small viewports.

Catalyst components

button

C-FORM.2 Medium navigation P02P03P05 2

Search results lack active-filter / sort summary, no count

After Submit, the page reloads with results but no chip row showing "Filters: …, Sort: …, X of Y results." Users can't refine without scrolling back to the form.

feedback gap Read more ↓
On the page
Fix

Add a `filter-chip` row + count band above results (e.g. "36 vacancies in 10 homes near GU22"). No new component needed.

Catalyst components

filter-chip · body

C-LINK.1 Medium touch P01 1

Inline body links have 22 px line-height, below WCAG 2.5.8 AAA 44 px touch target

Inline links inherit body-text line-height (~22 px). Wide enough horizontally; too short vertically. The hit target is the link's bounding rect.

WCAG 2.5.8 AAA fail Read more ↓
On the page
Fix

Add a tokenised `--link-min-tap-height` of 24 px applied via padding-y on inline anchors. Already addressable with existing tokens.

Catalyst components

body

C-FOOTER.1 Low density P01P02P03P04P05P06 3

Footer carries decorative pink swoosh adding ~300 px chrome

Decorative pink swoosh sits before the actual footer content (links, copyright, social, accreditation badge). On mobile, after a long scroll, the user wants to be at the bottom, the swoosh delays it.

−1,800 px · ~300 px per page × 6 pages Read more ↓
On the page
Fix

Suppress decorative footer elements at small viewports. Apply a mobile-suppression utility on the swoosh decoration.

Catalyst components

footer

C-NAV.1 Low density P01P02P03P04P05P06 2

Top utility tab bar consumes ~50 logical px on every page

The three audience tabs (CAREERS / CARE HOMES / CUSTOMERS) sit at the very top of every page, they're a Care UK Group navigation (sister-site switcher) but consume permanent vertical space on a small viewport.

−300 px · ~50 px per page × 6 pages Read more ↓
On the page
Fix

Collapse into a hamburger / dropdown on mobile via the existing `eyebrow-nav-bar` component, which already documents this pattern.

Catalyst components

eyebrow-nav-bar