Careers Home
Primary user task: A prospective applicant, care assistant, nurse, hospitality role, wants to understand what working at Care UK is like and find a job to apply for.
Careers audience landing. Six "signpost panels" of ~700 px each stack vertically, the page is essentially a list of CTAs to other pages, each wrapped in 700 px of chrome.
The careers template is more disciplined than the care-home template, no jarring inverse panels, lighter signposts. The win here is simplification of the signpost-panel pattern (collapse 6 × 700 px panels into a 6-card grid), not removal of overt chrome. Lower percentage reduction than pages 01–03.
Page-specific findings
F4.1 High density 3 6 signpost panels each ~700 px tall = ~4,200 px total
6 near-identical panels stacked vertically: Explore our roles · Why join Care UK · Rewards & benefits · Learning & development · Explore the roles we offer · Our recruitment process. Each = heading + 3-paragraph body + READ MORE + image. **The page is essentially a list of CTAs to other pages, each wrapped in 700 px of chrome.**
Collapse 6 signposts into a `card-grid` of 6 compact cards (image + heading + 1-line description + arrow), each ~250 px tall in a 2-column mobile grid → 6 cards in ~750 px instead of 4,200 px.
card-grid · card
F4.3 Medium density 1 Welcome body is 4 paragraphs without a body-lg lead
~600 px of unstructured prose. Same shape as F1.1, opening positioning statement gets no extra typographic weight, all paragraphs equal, hard to scan.
Compact to 2 paragraphs + a 3-stat band ("260+ care homes · 40+ years · UK-wide"). `body-lg` for the lead.
body-lg · card-grid
F4.4 Medium density 1 Awards carousel with 49 slides + cloned slides for infinite loop
Horizontal scroll with 49 awards on auto-advance. The carousel container takes ~350 px; the user can swipe forever. 49 awards is a lot to swipe through on mobile, engagement past the first 3-5 is unlikely.
Show the top 6–8 awards as a `card-grid` (3 across × 2 rows on mobile) instead of an infinite carousel. Reduces 49 slick-slide DOM nodes to 8 and simplifies the interaction.
card-grid
F4.5 Medium layout 1 Floating Recruiting Assistant covers the H2 "Welcome to Care UK Careers"
The Recruiting Assistant widget anchors to the bottom of the viewport and overlaps the H2 / opening sentence on first load.
See C-CHAT.1. Define a mobile safe-area inset; rationalise to one floating action per page.
floating-action
F4.7 Low typography Microsoft Word HTML residue in body content
Class signature analysis flags `SCXW18079385`, `BCX0`, `NormalTextRun`, auto-generated classes from Microsoft Word's HTML output, indicating content was pasted directly from Word into the CMS without cleanup. Word residue can carry inline styles (font-family overrides, fixed sizes) that subtly conflict with the design system.
CMS-side cleanup, strip Word artefacts on paste.
F4.2 Medium navigation 1 Hero CTA "FIND A JOB" is undersized and white-on-image
The page's entire reason for existing is to drive job applications. The primary CTA in the hero is a small (~120×40) outline button, white-on-image, competing for visibility against the busy hero image behind it.
Use `button` Primary at full-width on mobile, anchored inside the hero. The current implementation overrides default button sizing.
button
F4.6 Low navigation 1 Header has only 2 utility shortcuts on careers pages
Pages 01–03 show 3 header icons (Find a care home, Shortlist, Contact Us). Pages 04–06 show only 2 (Find a care home, Find Jobs). Different navigation per audience is reasonable, but absence of Contact Us on careers pages makes it harder for a careers visitor to reach out outside the recruitment flow.
Add Contact Us back to the careers header, or expose it via a tertiary action in the floating-widget consolidation.
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-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-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