Harborline Credit Union · Web Design · sample engagement
Rates in two taps
Mobile bounce −34% · bookings +120%/mo
The brief
Harborline has served coastal Massachusetts since 1964 — on a website from 2014. Rates lived in PDFs eleven seconds deep on 4G, booking didn't exist, and 71% of mobile sessions bounced. Younger prospects left for fintechs; the median member age kept climbing.
The brief: a marketing and service layer that answers the three tasks members actually came for — rates, appointments, branches — without alienating the 58+ majority.
The core-banking vendor keeps online banking itself; this site owns everything before the login.
Constraints: Core-banking vendor boundary (login is external) · compliance disclosures mandatory · WCAG AA mandated · zero font payload for older devices.
How it was made
-
Discovery
The analytics teardown was blunt: the top three site searches — rates, hours, appointment — were all four-plus clicks away, and rate PDFs took eleven seconds to paint. Twelve member interviews, ages 24 to 71, converged on one sentence: “I just want to see the rate.”
Task-vs-clicks audit — the legacy gap, measured. -
Strategy
Task-first, not brochure-first: “rates in two taps” became the metric the whole architecture serves. Three tasks got permanent surface; disclosures moved into expandable per-product footnotes — visible, legal-approved, never buried. Plain language everywhere: “Share Draft Account” is just “Checking.”
The task-first IA, as signed off. -
Concept
Task tiles versus lifestyle hero versus fintech dashboard. The lifestyle hero re-creates the legacy failure — tasks below the fold under aging photography. The dashboard alienates the 58+ majority and clashes with the vendor's real banking UI. Task tiles answer all three measured tasks above the fold.
Wireframe directions — the rejected hero preserved. -
Design
Harbor Navy, Fog surfaces, Channel Blue links — and Buoy Red reserved exclusively for action. System type stack means zero font payload on a decade-old phone. Every pairing AA-verified before a single component shipped: navy on fog 9.8:1.
System sheet — components, palette, AA gates. -
Production
The spec that survives handoff: semantic rate tables with scoped headers and footnotes wired by aria-describedby; booking errors that set aria-invalid and move focus; a marked external boundary where the vendor's login begins; a focus-order map with visible navy rings.
Component + AA spec (excerpt). -
Results — how we measured
Instrument: a 90-day analytics window against the legacy baseline plus an eight-person moderated task test. The headline task — find today's certificate rate — fell from 48 seconds and five clicks to seven seconds and two taps. Cards below; demonstrative data.
The task-time instrument: legacy vs new.
The deliverable, live
This is the working deliverable itself — not a mockup of it.
Open full screen ↗Results demonstrative data
- −34%mobile bounce (90-day window)
- 2 tapsto today's rates (was 5 clicks + PDF)
- +120%appointments booked per month
- +31%new-member applications started
“Members stopped calling to ask what the certificate rate is. They call to open one. Our youngest new member this quarter is 24; our oldest is 81 — same website.”
Branch operations persona, Harborline CU — demonstration quote
In the world
Where the system lives once it ships — shelf, hands, and street. photography in production
