Care Home Detail
Primary user task: A prospective customer (or their adult children) is evaluating whether this home is right for a relative.
A care home's profile page (Abney Court, Cheadle). The densest page in the audit, 27 viewports of scroll, 8 inverse-purple intro panels, 81% of images missing dimensions.
This is the densest page in the audit set and the top-priority target for Phase 2. The page’s structure is dominated by panels-as-chrome, eight inverse-purple intro panels totalling 2,686 px (18% of the page) introduce sections without delivering content. Replace those with default-surface content-section headings and the page reduces by ~2,400 px before any other change.
Page-specific findings
F1.1 Medium density 2 Welcome body is 5 paragraphs of body-md with no lead, no key-facts band
~750 px of unstructured prose on a critical first-fold positioning module. All five paragraphs equal weight, hard to scan.
Compact to 2 paragraphs with a `body-lg` lead, plus a 3-stat key-facts band ("CQC rated · Open to new residents · 32 rooms").
body-lg · card-grid
F1.3 Medium density 3 "Meet our team" introduces the section but previews only one person
A 280-px inverse-purple panel announces "Meet our team", followed by a single Home Manager bio card. Chrome:content ratio is upside-down.
Promote the team to a 3-card grid above the section CTA. Reclaims ~600 px of intro chrome and surfaces real content earlier.
card-grid · card
F1.4 Medium density 3 Trust block (How we are doing + reviews) split across 4 zones with ambiguous boundaries
The trust signals, "How we are doing" purple panel, carehome.co.uk reviews, CQC rating, awards, are scattered across four zones with no clear container hierarchy. Each carries its own intro panel, so the user reads four different "this is the trust section" cues.
Consolidate into one `content-section` with the rating, review count, and awards as cards inside a single titled container.
content-section · card
F1.5 Medium density 4 Multiple in-page carousels stack vertically
The page hosts 4+ carousels, facility images, events, awards, plus the gallery overlay. Each adds chrome (heading + 350 px slick container + dots) for content that could be a static grid.
Rationalise to ≤2 carousels per page. Convert non-temporal lists (facilities, awards) to a `card-grid`. Keep carousels only for inherently temporal / sequential content (events).
card-grid
F1.2 Low density 1 Duplicate H2 "Abney Court" 70 px below the hero ribbon
The hero ribbon already labels the home, the H2 "Abney Court" is redundant. Adds 120 px of wasted vertical and a heading-rotor entry that says nothing.
Drop the duplicate H2. The hero ribbon is the page label.
F1.7 High touch 4 Slick.js carousel pagination dots, 15+ instances at 20×20 px
All slick.js dots on this page are 20×20, below the 24×24 AA minimum. The dots are the primary pagination affordance for image carousels (swipe is the alternative but discoverability is mixed).
Same as C-CAROUSEL.1, tokenised dot size (≥24 px) or chevron-thumbnail strip pattern from `image-gallery`.
image-gallery
F1.8 Medium touch 1 Inline body links at 22 px tall
Inline links inside `wysiwyg` content render at body line-height (~22 px). Wide enough horizontally; too short vertically for a confident tap target.
See C-LINK.1, apply tokenised `--link-min-tap-height` of 24 px via padding-y on inline anchors.
body
F1.9 Medium touch 1 Map directions overlay links sub-AA
The "Download directions" / map-overlay links sit at small touch sizes overlaid on the static map preview.
Replace overlay-style links with `button` Tertiary affordance at 44 px min-height, anchored to the map card's actions row rather than overlaid on the image.
button
F1.10 Medium typography 39 elements at 11 px, 38 at 12 px on this page
This page alone has 39 elements at 11 px, 38 at 12 px, 99 at 14 px, concentrated in carousel chrome, gallery captions, OneTrust UI, and footer.
See C-FONT.1. Footer / chrome typography to `body-sm` (14 px) minimum; `body-xs` (12 px) only for genuine fine-print contexts (legal disclaimers, image attributions).
body
F1.6 Medium typography 1 Trips and outings list uses heavy pink-square bullets
Filled-pink square bullets in front of every list item create disproportionate visual weight relative to body text. The eye snaps to the bullet column rather than the content.
Replace with neutral disc bullets at body weight, or a tokenised `benefit-list` component with check-icon affordance for genuinely benefit-shaped lists.
body · benefit-list
F1.11 Low typography 1 Welcome body lead paragraph carries no extra weight
The opening positioning sentence is the same `body-md` as everything else. No visual signal that this is the page's lead.
Apply `body-lg` (18 px, weight 500) to the lead paragraph.
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-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.
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.
body
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.
Replace slick.js pagination styling with Catalyst-tokenised dot size (minimum 24 px hit target), or use chevron + thumbnail strip patterns from `image-gallery`.
image-gallery
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.
Suppress decorative footer elements at small viewports. Apply a mobile-suppression utility on the swoosh decoration.
footer
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
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).
floating-action
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.
Add a tokenised `--link-min-tap-height` of 24 px applied via padding-y on inline anchors. Already addressable with existing tokens.
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%)
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.
image
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.
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.
content-section · inline-cta
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.
Collapse into a hamburger / dropdown on mobile via the existing `eyebrow-nav-bar` component, which already documents this pattern.
eyebrow-nav-bar
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.
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.
card · accordion