Turning a clinical discharge process into a reassuring digital journey
Role: UX/UI Designer & Front-End Developer Client: CTS (part of Catalyst Care Group / Nurseline Healthcare) Timeline: [X weeks/months, e.g. “6 weeks, 2023”] Tools: Figma, WordPress, Elementor, custom CSS, scroll-based animation Live site: hospitaltohome.co.uk
1. The Problem
Situation: Hospital-to-home care is one of the most anxious transitions a patient or family member goes through — leaving a hospital’s structured, supervised environment for care at home, often with limited understanding of what happens next, who’s involved, or what to expect.
CTS needed a website that could explain this transition clearly, but the real challenge was emotional, not just informational: visitors arriving at the site were often stressed, unfamiliar with care terminology, and trying to make a decision — or reassure themselves — during a vulnerable moment.
Task:
- User pain point: Patients and families couldn’t easily picture what the “hospital to home” journey actually looked like. Care pathways are inherently sequential and multi-stage, and a traditional page of text/bullet points failed to communicate that sense of progression or build trust.
- Business goal: [e.g. “Increase qualified enquiries from families and referring hospital staff by making the service easier to understand and more emotionally reassuring, ultimately supporting Catalyst Care Group’s brand consistency across its 14 healthcare websites.”]
[Placeholder: if you have any brief/stakeholder quote about the original problem, drop it here — e.g. “Our current site doesn’t explain what we actually do” — CardCo referring GP / discharge coordinator, etc.]
2. My Role & Process
I owned the project end-to-end: research, IA, UX, UI, and front-end implementation.
Research & Discovery
- Reviewed the existing patient discharge pathway with stakeholders to understand each real-world stage (hospital discharge → assessment → home setup → ongoing care).
- Audited competitor and sibling Catalyst Care Group sites to keep the new page consistent with the group’s design system while giving CTS its own narrative identity.
- Identified that the core UX problem wasn’t “what to say” but “how to sequence it so it feels like a guided journey, not a wall of information.”
Information Architecture & UX
- Mapped the patient journey into distinct, ordered stages, ensuring each stage answered one clear question a worried family member would have (What happens first? Who’s involved? What do I need to arrange?).
- Designed the page as a single-scroll narrative rather than a multi-page structure, reducing decision fatigue for an already stressed user.
Wireframing & Prototyping
- Built low-fidelity wireframes to test the scroll-based storytelling structure before investing in visual design.
- Moved to high-fidelity UI in Figma, designing each “chapter” of the journey with its own visual moment.
- Prototyped scroll-triggered reveal interactions in Figma to validate pacing with stakeholders before development — checked that content unveiled at a natural reading rhythm, not too fast or overwhelming.
UI Design & Development
- Designed a calm, trust-building visual language (soft palette, generous whitespace, clear typography hierarchy) appropriate for a healthcare-anxiety context.
- Implemented the design in WordPress/Elementor with custom CSS to achieve the scroll-triggered animation sequence pixel-for-pixel to spec.
- Built it fully responsive, since many visitors would be checking the site from a hospital waiting room on mobile.
3. The Solution
- Scroll-triggered storytelling: Content progressively reveals as the user scrolls, transforming a static informational page into a guided walkthrough of the patient journey — mirroring the real sequence of care rather than dumping it all at once.
- Stage-based visual narrative: Each phase of the hospital-to-home pathway got its own distinct visual “beat,” making a complex, multi-step clinical process feel linear and manageable.
- Reassurance-first UI: Typography, pacing, and color were deliberately restrained to reduce cognitive and emotional load for an anxious audience — this was a healthcare trust problem as much as a usability one.
- Responsive performance: The animation and layout were built to hold up on mobile without sacrificing load speed or smoothness, since much of the target audience would be on a phone, not a desktop.
4. Impact & Learnings
Impact
- [e.g. “Increased average time on page by X%, indicating stronger engagement with the journey narrative”]
- [e.g. “Reduced enquiry-to-call drop-off by X%”]
- [e.g. “Adopted as the template pattern for X other Catalyst Care Group sites”]
- Contributed to the broader outcome across your Catalyst Care Group work: consistent design language maintained across 14 healthcare brand websites, and measurable Core Web Vitals / page speed improvements (90+ scores) across the portfolio.
[Placeholder: any direct client feedback, e.g. “The scroll story is exactly how we wanted this to feel” — Name, Role at CTS]
Learnings
- Designing for high-anxiety users means the interaction pattern itself (pacing, reveal timing, restraint) carries as much weight as the visual design — the rhythm of the scroll became a UX decision, not just a stylistic one.
- Prototyping the scroll interaction in Figma before development saved rework — stakeholders could react to pacing early rather than after the animation was already built in CSS.
- [Add your own reflection: what would you do differently next time, or what pattern from this project did you reuse elsewhere?]