CASE STUDY
Residential care, United States
A care home site built for the families reading it: bigger text, a warmer palette, and a blog the home runs itself.
THE PROBLEM
1st Blessed is an adult family home in the United States. The people reading the site are usually adult children looking into care for a parent, often sitting next to that parent, and usually having a hard week.
THE FIRST VERSION
Before the build, I prototyped the site in Framer so the home could react to something clickable. When their brand arrived and the audience became clearer, most of it was replaced.
Open the Framer prototype
The prototype used a placeholder palette. When the home's brand arrived, colour, type and spacing were redrawn around it.
The prototype was set tight. The readers are adult children in their fifties and sixties, often on a phone, so the build moved to a larger base size and more line spacing.
A stacked photo grid is a long scroll on a phone. The build uses a swipeable carousel.
One long column of questions works with eight and fails with thirty. The build groups them by topic with filters.
Formspree was fine for a prototype. Resend gave control over how messages are composed, where they go and what happens when sending fails.
Nobody at the home could edit the prototype, so the build started with a content model and a CMS the home publishes from.
THE DECISIONS
Each decision, why I made it, and what it cost.
Many readers are in their sixties and seventies, on a phone. Sixteen pixels is a framework habit, not a finding.
Every size and gap is measured from eighteen, so the whole site is a step larger, not just the headings.
Blue says institution. A family is choosing a home for someone they love, not a ward.
A warm off white with a clay accent, plus a darker clay kept for text so it stays readable.
The site has to sound like people and read like a reference. One typeface cannot do both.
Lora for headings, Work Sans for body, navigation and forms.
A seventy year old on a borrowed tablet has no screen reader set up and should not have to dig through settings.
A third party widget on an otherwise light site. It costs page weight, and I took that because of who is reading.
A recent photo and a recent post make a home credible. Anything that needs a developer stops being updated.
A simple post type staff can publish themselves, kept separate from the gallery.
THE DESIGN SYSTEM
A warm neutral background with a clay accent, all measured against an eighteen pixel base so the whole site runs a step larger than usual.
Lora
Headings, and the odd aside in italic. Three weights with both roman and italic, pulled in slightly at larger sizes so a long heading still holds its line.
Work Sans
Body copy, navigation, the questions page and every form field. Three weights, set with generous space between the lines, which at an eighteen pixel base makes for a noticeably open paragraph.
HOW IT WAS BUILT
THE OUTCOME
