Page 03 https://www.careuk.com/care-homes/locations/epsom

Promo Landing

Primary user task: Someone searching "Epsom care home" lands here and decides whether Care UK serves the area, and which homes are nearby.

Today
8,968 px
14 viewports
Phase 2 target
4,800 px
6 viewports
Reduction
−46%
4,168 px reclaimed

A location-templated SEO landing page for Epsom. Reuses the listing template from page 02 with seven homes pre-filtered. Card compaction propagates the page-02 fix.

A near-clone of page 02 with location-specific copy. The same card-compaction fix propagates here, seven cards × ~700 px reclaimed each. This is the leverage of the cross-page findings: fixing the component once also delivers the page-03 result.

Page-specific findings

F3.1 Medium density 2

P03 cards carry an extra body description with READ MORE not present on P02

The same `careHomeItem` template renders with an additional 3-paragraph body + READ MORE expander on the location landing template, adding ~150–250 px per card. Inconsistent with P02 which uses the same component without the description.

pattern consistency Read more ↓
On the page
Fix

Decide on one card pattern across both pages, description-keep (target ~450 px per card) or description-drop (target ~300 px). Either is fine; the inconsistency is the problem.

Catalyst components

card

F3.2 Medium density 1

Lead body paragraph is templated, lists every home name, repeats brand boilerplate

2 paragraphs of templated SEO copy listing every Epsom home name plus generic Care UK boilerplate. A user who landed via "Epsom care home" needs to know quickly that Care UK serves Epsom and where to find the homes, not read the brand boilerplate.

−250 px · collapse to one paragraph Read more ↓
On the page
Fix

Collapse to one paragraph with the location intent ("Care UK has 7 homes in and around Epsom") and let the result cards do the rest.

Catalyst components

body

F2.7 Medium typography 2

Distance "(2.7 miles)" rendered in faint grey on white

Distance is rendered near `--color-text-dimmed` (#999). At 14 px on

WCAG 1.4.3 contrast fail Read more ↓
On the page
Fix

Promote to `--color-text-primary` (#333), passes AA at any size. The token already exists; the page uses the wrong one.

Catalyst components

body

F3.5 Medium typography 1

Distance text contrast (mirrors F2.7)

Distance "(X.X miles)" rendered in `--color-text-dimmed` (#999) at 14 px, ~2.85:1 contrast on white. Same as F2.7.

WCAG 1.4.3 contrast fail Read more ↓
On the page
Fix

Promote distance to `--color-text-primary` across both list templates.

Catalyst components

body

F3.4 Low typography 1

Body lead carries no body-lg weight despite being the page's primary positioning

The lead paragraph on a location landing page is the page's primary positioning, yet renders at the same `body-md` weight as the boilerplate beneath it.

hierarchy Read more ↓
On the page
Fix

Apply `body-lg` (18 px, weight 500) to the lead.

Catalyst components

body-lg

Cross-page findings that apply here

These are component-level findings catalogued in the Cross-page findings view. Each appears on multiple pages; fixing the component delivers the fix everywhere.

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-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-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-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-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-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-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-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-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