Why Elm Street Seniors looks the way it does
Elm Street's visitors are mostly over seventy, often reading on a tablet a grandchild set up, or are adult children checking for a parent. The site opens with the week itself, in large type, because the first question is always "what's on, and when is lunch?"
- Built for
- Dubuque adults 60 and over, their adult children and caregivers, and the volunteers who drive and cook.
- Navigation
- Classic top bar. Logo left, pages right, one action. Familiar to every visitor.
- Pages
- This week, Noon meal, Rides, Classes, Help & advice, Volunteer
- Hero
- a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; a drawn neighbourhood map as the opener, with numbered pins for each stop or campus and a list of names, addresses and times beside it; pointing at a list item lights up its pin. Built for mobile pantries, multi-site churches and bus routes. Variants: a = map on the left, headline and stop list on the right; b = headline across the top, a wide map, and the stops as columns beneath; c = a route: stops as a connected timeline beside a map with the path drawn between pins; This week's schedule is the hero: day columns with what is on, so regulars and newcomers see when to come before anything else
Typography
Merriweather was designed for reading on screens, with a large x-height and sturdy serifs that survive older eyes and older tablets. Body text is Atkinson Hyperlegible at 20px, a face the Braille Institute drew so that letters like I, l and 1 can never be confused. Nothing on the site is set below 16px.
Color
The green is taken from the American elms that gave the street its name, and the warm ochre accent is an elm leaf in October. The background is a soft butter tone, warmer than white, which cuts glare for readers with cataracts. We avoided a hospital palette on purpose: this is a place people come to for lunch and euchre. Every pair of colors clears 4.5:1, most clear 7:1.
Layout and navigation
A classic top bar with words, not icons: logo on the left, six plainly named pages, one button. Our users have learned this pattern over twenty years and we see no reason to make them learn another. Pages are short and each one answers one question.
The hero
The first screen is this week's schedule, day by day, with the lunch and the bingo and the blood pressure clinic. That's what regulars come to check, and it shows a newcomer that something is on every day.
Calls to action
"Reserve tomorrow's lunch" is the nav button because the kitchen needs a count by 10 AM the day before, and a no-show wastes a meal. "Book a ride" comes next. "Call the front desk" sits beside both, because many members will always prefer the phone, and that's fine.
Photography
Real older people doing ordinary things: tending the garden beds, looking at a phone together, two volunteers at a front door on a Meals on Wheels round. No stock grandparents laughing at salads. Staff portraits are plain and friendly so members recognize faces at the door.
Accessibility
Large tap targets, soft rounded buttons with a visible label and arrow, and a thick rule between sections so it's clear where one ends. Phone numbers are always tappable. The menu and calendar are also offered as large-print PDFs to print at home.
Type system
- DisplayMerriweatherMerriweather was drawn for reading on screens: big x-height, sturdy serifs and wide letters that hold up for eyes over seventy.
- TextAtkinson HyperlegibleDesigned by the Braille Institute for low-vision readers; every letter is built to be told apart from its neighbors.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.46:1 | AAA |
| Body text on cards | Aa | 15.79:1 | AAA |
| Secondary text | Aa | 5.68:1 | AA |
| Links | Aa | 7.11:1 | AAA |
| Button text | Aa | 7.96:1 | AAA |
| Accent label text | Aa | 5.41:1 | AA |
| Text on dark bands | Aa | 14.46:1 | AAA |
| Muted text on dark bands | Aa | 7.74:1 | AAA |
| Text on brand bands | Aa | 7.96:1 | AAA |
| Muted text on brand bands | Aa | 5.32:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.97:1 | AAA |
| Body text on cards | Aa | 13.46:1 | AAA |
| Secondary text | Aa | 6.79:1 | AA |
| Links | Aa | 9.4:1 | AAA |
| Button text | Aa | 10.17:1 | AAA |
| Accent label text | Aa | 9.44:1 | AAA |
| Text on dark bands | Aa | 16.28:1 | AAA |
| Muted text on dark bands | Aa | 8.31:1 | AAA |
| Text on brand bands | Aa | 10.17:1 | AAA |
| Muted text on brand bands | Aa | 5.89:1 | AA |
