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.
~7 phone-screens of scrolling could be reclaimed on this page if these findings are addressed.
Care-home discovery page. Ten result cards dominate the page, each about 1,000 pixels tall. The card design is by far the biggest factor in the page's overall length.
The page is the cards. Anything else (search form, “View map” link, footer decoration) is small change next to the card stack. The card template is doing most of the work driving page length, so it’s where the biggest improvement opportunity sits.
Page-specific findings
F2.1 High density 2 Result-list cards are the entire weight of this page
Verified from heading positions, the result cards run roughly 770 px tall each. Across 10 cards that's about 7,700 px, around 78% of the 9,785 px page. Anything else (search form, "View map" link, footer decoration) is small change next to the card stack. The page's density is dictated almost entirely by the card template.
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. Across 10 cards, the per-card phone row contributes a meaningful amount of vertical space to the page that the home detail page already covers.
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
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 decoration.
Cross-page findings that apply here
These are component-level findings catalogued in the Cross-page findings view. Each is observed on multiple pages, so they're worth highlighting separately from page-specific issues.
C-ALIGN.1 High layout P01P02P03P04P05P06 3 Section components sit with inconsistent alignment to the page edges, breaking visual flow
Across the audit, several different section components on the same page render with mismatched left and right page margins. Some sit flush to the left edge with a wider right gutter; others reverse it; some sit roughly centred but with their inner content offset. On a mobile viewport where horizontal space is already at a premium, the result is a page that reads as misaligned. Each section starts at a slightly different horizontal position, the vertical rhythm down the page breaks, and the side with exaggerated padding wastes content area. Beyond the wasted space, the inconsistency carries a cognitive cost. Each new section asks the eye to re-anchor on a different horizontal axis. The user is constantly recalibrating where content begins and ends, which interrupts the natural top-to-bottom reading flow and adds friction to scanning the page. On a long page (the Care Home Detail page is 27 phone-screens deep), that friction compounds. The pattern is observable on the Care Home Detail page across the purple intro panels, the lighter-grey content cards, the Feature text panels (variants A and B), Care at our home, Reviews & Ratings, and the Nearby homes block. It carries over to the listing, promo-landing and careers templates, which inherit the same section components.
C-CARD-LIST.1 High density P02P03 3 Care-home result card is heavy on mobile (around 770–970 px tall per card)
Each card stacks a full-width image, a title row, a CQC line, a 7-row care-type matrix showing offered + not-offered services with similar visual weight, a phone number row, and a full-width "VIEW HOME" button. On P02 the template runs around 770 px per card (verified from heading positions); on P03 it's closer to 970 px because each card adds a description block. Either way, only about one card fits on the visible viewport at a time.
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
C-IMG.1 High layout P00P01P02P03P04P05P06 2 71% 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: - P00: 21 / 72 (29%) - P01: 242 / 297 (81%) - P02: 13 / 15 (87%) - P03: 10 / 12 (83%) - P04: 18 / 69 (26%) - P05: 3 / 5 (60%) - P06: 104 / 106 (98%)
C-CARD-LIST.2 Medium density P02P03 1 Care-type matrix gives offered and not-offered services the same visual weight
Each result card lists 7 care types as a matrix. Pink-check icons mark services the home offers; grey-circle icons mark services it doesn't. Both states get the same row height and the same visual weight, so "what isn't offered" takes up just as much of the card as "what is." Across 10 cards on P02 (70 rows) and 7 cards on P03 (49 rows), a meaningful chunk of every card is given to absences rather than presences. There's also no explicit label clarifying that the grey circles mean "not offered", the user has to infer it from the icon contrast against the pink checks.
C-FONT.1 Medium typography P00P01P02P03P04P05P06 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.
C-NAV.1 Low density P00P01P02P03P04P05P06 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.
C-FOOTER.1 Low touch P00P01P02P03P04P05P06 Eight footer navigation links sit below the WCAG AA tap minimum on every page
Eight footer links measure 19 px tall on every audited page: About Care UK, Press & media, Feedback & complaints, Careers at Care UK, Legal & regulatory information, Privacy policies, Cookies policy, Web Accessibility. The WCAG 2.5.8 AA minimum is 24×24 px. These don't qualify for the inline-text exception in 2.5.8, since each link is its own row in a stacked footer navigation list, not a phrase inside a sentence. They are explicit navigation controls.
Potential ways forward
Observations on patterns that could improve the issues above. These are possibilities worth exploring, not committed solutions, the audit's deliverable is the diagnosis.
Signposting on the result card
Each result card currently tells a lot about the home (services offered, services not offered, a phone number). It could say less, just enough for someone to recognise this as the right home and step through, with the deeper detail living on the home detail page.
Progressive disclosure on the services list
The seven-row offered/not-offered care-type matrix could be a chip row of just the offered services. The rest of the detail can live on the home detail page where it has space to breathe.
Mobile feature parity
The desktop interactive map is replaced on mobile with a small text link. A static map preview that opens to a full-screen sheet would restore the spatial discovery affordance without compromising the small viewport.