Page 02 https://www.careuk.com/care-homes

Care Home List

Primary user task: Find a Care UK home near a postcode, optionally filtered by care type, sortable by distance or drive time.

Today
9,785 px
15 viewports
Phase 2 target
5,200 px
8 viewports
Reduction
−47%
4,585 px reclaimed

Care-home discovery page. Ten result cards, each ~1,000 px tall, the entire weight of the page is the card template. Compact the card and the page reduces by ~7,000 px.

The page is the cards. Anything else (search form, “View map” link, footer chrome) is small change. Compacting the result-card template from ~1,000 px to ~300 px is the entire game, this single fix delivers nearly all of the page’s reduction.

Page-specific findings

F2.1 High density 2

Result-list cards are the entire weight of this page

10 cards × ~1,000 px = ~10,000 px of card stack on a 9,785 px page. Anything else (search form, "View map" link, footer chrome) is small change. The page's density is dictated entirely by the card template.

see C-CARD-LIST.1 Read more ↓
On the page
Fix

Apply C-CARD-LIST.1, compact the card to ~300 px. This single fix delivers ~95% of the page's reduction.

Catalyst components

card · category-tag

F2.3 Medium density 1

Each card has a per-card phone number duplicating the home detail page

Every card prints a phone number as a `tel:` link below the service matrix. The card already has a "VIEW HOME" CTA leading to the detail page where the phone number is repeated.

−500 px · ~50 px per card × 10 cards Read more ↓
On the page
Fix

Drop the per-card phone, rely on the home detail page. Or move it to the card actions row as a secondary action with a phone icon.

Catalyst components

card

F2.2 Low density 2

Empty whitespace below "SHOW MORE" before the footer

~600 px of unfilled gap between the SHOW MORE button and the footer pink swoosh. After a long card scroll, the user wants to be at the bottom, the gap delays it without serving a purpose.

−400 px · tighten margins or repurpose Read more ↓
On the page
Fix

Tighten bottom-of-page margins, or repurpose the space ("Can't find what you're looking for?" callout, contact CTA, FAQ teaser).

F2.4 Low layout

Address field wraps awkwardly with long postcodes

"Dorset, DT4 9QX (119.1 miles)", the distance breaks to its own line on long postcodes; on shorter postcodes it stays inline. Inconsistent rhythm card-to-card.

layout consistency Read more ↓
Fix

Address always on one line, distance always on a second line in `body-sm`. Pure formatting consistency.

Catalyst components

card

F2.5 Medium touch 2

Distance / Drive time form radios are 16×16 (sub WCAG AA)

Native HTML radio inputs render at default browser size (16×16), below the WCAG AA 24×24 minimum. The labels next to them extend the perceived hit area but the actual handler usually fires on the input rect.

WCAG 2.5.8 AA fail Read more ↓
On the page
Fix

Replace with the Catalyst `radio` component (24×24, with extended 44×44 hit area via padding).

Catalyst components

radio

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

F2.6 Low navigation 1

Numbered pink pin badges with no map context on mobile

Per-card pink circle with a number ("1", "3", "6"…) at the top-left. These correspond to pins on the desktop map. With no map visible on mobile, the numbers are unexplained chrome.

clarity Read more ↓
On the page
Fix

Either restore the map (see C-MAP.1) so the badges have meaning, or drop the badges on the mobile breakpoint.

Catalyst components

card

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