Guided Health Navigation
A site for an independent healthcare navigator — read by frightened people on a phone, late, and held to what a compliance memo will allow it to say.
- Engagement
- Client project
- Role
- Product Design & Front-End
- Platform
- Responsive web, 360px → desktop
- Sector
- Healthcare navigation, Orange County
- Scope
- 8 routes, two schemes
- Build
- Next.js 16, Tailwind v4
The people this site is for are not shopping. A hospital has said a parent is ready for discharge, or a denial letter has arrived with a deadline on it, and someone is reading on a phone at eleven at night with no idea whether the person on the other end of this page can help or is about to sell them something. That reader sets every decision. The rates are published because a family already being quoted $12,167 a month cannot afford another conversation to find out a number. The boundaries get a page of their own because a family who discovers the limits of an advisory relationship during a crisis will feel misled however clearly it was written somewhere they skipped. Every statistic carries its source because the whole pitch is that this person tells you the truth about a system that hasn't. And the accessibility work is a product requirement rather than a polish pass, because the audience is old, tired, and on a small screen.
Prices on the page, not on the call.
The category norm is a free consultation that exists to get you on the phone. This practice publishes all seven rates, the billing rules underneath them, and the travel surcharge — so the first conversation can be about the situation rather than about what it costs.
- Key jobs
- Estimate, Compare, Decide
- Session
- Minutes, pre-contact
- Differentiator
- Every rate published
The Price Carries Its Unit, Always
Flat fee, per hour prepaid in blocks, per month for three scheduled hours, three-hour minimum then hourly. The qualifier sits under the figure in tracked uppercase, so the price column stays one scannable run of numbers and no rate can be misread as a flat total.
The Free One Is First And Says Why
Thirty minutes, by phone, free — placed at the top of the rate list rather than in a banner. It carries the sentence that if the answer is that you don't need her, she'll say so, which is the only version of a free consultation this audience has reason to believe.
Billing Rules Sit With The Rates
Hours prepaid and topped up before they run out, retainers billed in advance, flat-fee work billed at the start, travel beyond twenty miles at $85 an hour and told to you before it applies. A rate a family later discovers has conditions attached is worse than a rate they had to ask for.
One Card Is Marked As Having A Clock
The Medi-Cal renewal review is the only time-limited engagement on the page, and it is the only card wearing the accent. That is the whole rule for that colour — it means a deadline, and spending it anywhere else would drain the association exactly when it matters.
A page for everything she will not do.
The practice is advisory: she advises, the family acts. That distinction is invisible until the worst possible moment, so it gets a route rather than a paragraph in the terms — nine boundaries, each naming the professional to see instead.
- Key jobs
- Qualify, Redirect, Trust
- Session
- Read once, before contact
- Differentiator
- Referral, not deflection
Each Exclusion Names Its Alternative
Legal advice sends you to an elder law attorney, money management to a fiduciary, insurance to a broker who is paid to sell it. A page of refusals reads as a liability shield; a page of nine redirects reads as someone who knows the field — and it is the same information.
“I Advise. You Act.” Is Load-Bearing Copy
It appears on the services page above the rates, not only on the boundaries page, because the sentence has to be read by someone who is about to pay. Copy implying otherwise — “I'll handle it”, “leave it with me” — is treated as a defect in this repo, not a matter of tone.
The Employer Is Never Named Or Implied
Her expertise comes from a role inside a health system, and none of it may read as an affiliation: no logo, no “as seen at”, not even as a credential. What she knows is stated directly instead, which is the harder version and the honest one.
Every figure arrives with its source.
The home page states what care actually costs — $40 an hour for non-medical in-home help, $12,167 a month for a semi-private nursing home room, a $130,000 asset limit returning in 2026. Numbers like that are the argument, and a number without a source is just a claim made by someone who wants your business.
- Key jobs
- Orient, Verify, Prepare
- Session
- Scroll-led, high stakes
- Differentiator
- Sourced in the markup
The Source Is A Field, Not A Footnote
Every statistic in the content layer has a source attribute traced to a public research document with a URL. It renders under the figure, so a reader checking one does not have to travel to the bottom of the page — and a figure with nowhere to point cannot be added without noticing.
Outcomes Belong To Research, Never To Clients
No outcome study of solo advisory practices exists, so the site never says “my clients experience”. It says what advance care planning is associated with, in the research, and stops. The weaker claim is the true one.
The Deadline Page Exists Because The Rule Changed
California brought the Medi-Cal asset limit back on January 1, 2026, after two years without one, so renewals now ask for documentation nobody has needed since 2023. That is a page-sized fact with a date on it, so it got its own route rather than a card on the homepage.
The Privacy Page Is A Representation, Not Boilerplate
It names which third-party scripts run, which browser storage is used, and states that a form submission is emailed and never written to a database. Adding an analytics tool or a font CDN makes that page false until it is updated — which has already happened once, an hour after it went up.
Editorial warmth, not clinical blue.
The default visual language of this category is hospital blue, stock photography of smiling seniors, and a chatbot. All three read as an institution, which is the thing the family is already losing to. The site is set in a flared humanist serif on bone and sage against a deep teal-slate, closer to a magazine than a portal.
- Key jobs
- Read, Settle, Trust
- Session
- Long-form, low energy
- Differentiator
- Two typefaces, no mono
The Monospace Came Out
An earlier pass set prices, sources and phone numbers in a mono face to mark them as the machinery. On a page whose readers are frightened rather than technical, it read as a terminal. Money and deadlines moved into the display serif — which states a cost rather than outputting one — and the token was deleted so a stray class fails to compile instead of silently doing nothing.
Display Type Is One Idea, Not Three Properties
Light weight, tight tracking, leading just above one. Setting a heading bold or letting the leading open turns it back into a generic serif and loses the whole register, so the three move together and are documented as a single decision.
Eighteen Pixels Is The Reading Floor
Set once on the body and never restated smaller on a paragraph — which is exactly how the two legal pages sat at 17px for a month, from one declaration. Labels, captions and fine print are deliberately smaller; anything a reader has to actually read is not.
The Mark Is Nine Discs, Open On The Right
A spiral that terminates on one warm disc rather than closing into a ring, because it is a path through something, not a cycle. Its greens are one token at nine opacities so it flips with the scheme for free, and the warm disc uses a separate token from the deadline accent — same hue family, different job, so the urgency colour is not on screen permanently.
A dark mode measured, not inverted.
Light is the default and the brand — warm, airy, editorial. Dark exists because a lot of this reading happens at night, and it is authored rather than derived: the deep slab becomes the ground, the greens re-tune against it, and every pair is re-measured rather than assumed.
- Key jobs
- Read, Return, Rest
- Session
- Often late, often long
- Differentiator
- Both schemes measured
There Is No prefers-color-scheme Block
Dark applies only when the visitor asks for it, stamped on the document root by a pre-paint script from one stored key. An OS setting is a guess about a preference; the switcher is the preference.
Contrast Is Measured From Rendered Pixels
The audit screenshots the page with every text node painted transparent and samples the real pixels behind each text run. Modelling the background from CSS instead misses the grain layer's soft-light blend and steps over SVG text — the pixel method finds 1,750 text runs where the modelled walk found 946.
Tailwind v4 Emits oklab(), Which Breaks Naive Checkers
A contrast tool that parses rgb() with a regular expression reports nonsense here. Foreground is composited over background through a canvas and read back, and alpha-modified utilities are composited rather than treated as opaque — both have already produced silent passes in this project.
Focus Rings Are Measured Outside The Border Box
The ring sits three pixels off the element, so sampling the element's own fill reports a perfect 1.00:1 on every filled pill — indistinguishable from the real bug that measurement was introduced to catch.
Six widths, because two were not enough.
Overflow is measured at 360, 390, 768, 900, 1024 and 1280. Every audit before this one checked only the two phone widths, and missed a 920px header that scrolled the page sideways across the whole tablet range for months — the horizontal nav is tightest just above its breakpoint, which is exactly where nothing was being measured.
- Key jobs
- Read, Call, Enquire
- Session
- Phone, late, one-handed
- Differentiator
- Six measured widths
The Inline Nav Waits Until 1180 Pixels
Its five labels need that much room before they stop wrapping mid-item, so the horizontal bar appears at the extra-large breakpoint rather than the medium one. Below it, a menu button — which is the honest answer for a nav that does not fit.
Below 360 The Mark Stands Alone
Mark plus name needs 387px of a 360px bar. Every way of fitting both meant taking padding off the phone pill and the menu button at the one width where they are already tightest, so the name is dropped and the accessible name carries it.
The Phone Number Is In The Header, Not The Footer
It is a pill in the top bar on every route and at every width. A family reading this at eleven at night should not have to scroll to a footer to find the one action the whole site is asking for.
The Form Asks For Nothing Clinical, And Says So
Name, contact, city, relationship, and free text — with a visible instruction on the free-text field not to include medical detail. The field set is asserted in a test, so adding a field fails the suite until someone has read why the boundary exists.
Process
This one started in prose, not in Figma. A compliance-and-risk memo, a market research file where every figure carries a URL, and a positioning document came first — and four of the five compliance findings removed a service from the menu, so the document governed the business plan rather than following it. That order is why the site's structure is what it is: the boundaries page exists because a memo argued for it, and the sourced statistics exist because a rule says nothing renders that isn't traceable. I separated content from presentation for the same reason — a figure, a price and an exclusion all carry compliance weight, so they live in a content module with their sources attached rather than inside a component. The design was rebuilt once, away from a three-typeface system that had read as technical, and the accessibility audit was scripted rather than eyeballed: eight routes, two schemes, six widths, contrast sampled from rendered pixels.
Research methods
- A market research file where every statistic carries a public source and a URL
- A compliance and risk memo whose findings removed four services from the menu before the site was designed
- Competitive scan of Orange County care management and geriatric care manager practices, and their quote-on-request norm
- The practitioner's own account of caregiving, de-identified so nothing published belongs to someone who cannot consent to it
- Scripted accessibility audit across eight routes, two colour schemes and six widths, with results logged per run
Deliverables
- Eight-route static site: home, services and rates, what I don't do, Medi-Cal 2026, about, contact, privacy, terms
- Seven published rates with billing rules, travel policy and exclusions stated inline
- Light and dark schemes, light as default, persisted per browser with no flash of the wrong one
- Sourced statistics as a content layer, with the source rendered under every figure
- Intake form on a React server action, with a field set that admits no clinical detail
- Accessibility audit script covering contrast, tap targets and overflow across both schemes
- Built and deployed at guidedhealthnavigation.com
The site — light (default)
6The site — dark
6Responsive — 390px, both themes
12Next project
Momentix