Local Ux Patterns
skill: local-ux-patterns title: CGH Injury Lawyers, UX Spec for the Homepage and a City Practice Page oneLiner: A build-ready UX spec for a Denver personal injury firm, trust signals tuned for a law firm, CTA hierarchy, WCAG 2.2 thresholds, and text wireframes for the homepage and the Denver car-accident money page. client: CGH Injury Lawyers
What it produced for CGH Injury Lawyers
Applied the local-ux-patterns decision frameworks (WCAG 2.2 thresholds, cognitive UX laws, trust-signal checklist, CTA hierarchy, page wireframes) to CGH (Cheney Galluzzi and Howard, LLC), a Denver personal injury firm. This is the decision layer: the thresholds to hit, the laws that dictate layout, the trust signals a law firm specifically needs, and two text wireframes ready to hand to the build (frankie / web-design-engineer), gated by design-auditor for color and accessibility. It does not produce pixel-perfect mockups.
The two dominant personas for a PI firm (adapted from the skill's persona set)
- The Urgent Injured Victim (maps to "Urgent Homeowner"). Just had a crash, may be on a phone in an ER or at home in pain. Mobile-first, wants the phone number and a one-tap call NOW. Low patience, high stakes.
- The Researcher (the family member or the still-deciding victim). Comparing firms, reading reviews, checking whether they even have a case, worried about cost. Needs trust signals, the no-upfront-cost answer, and a low-risk way to learn more before calling.
The homepage must serve both at once: an instant call path for persona 1 and a credibility-and-research path for persona 2.
WCAG 2.2 hard floors for this build (non-negotiable)
| Element | Minimum |
|---|---|
| Body text contrast | 4.5:1 against its background |
| Large headline / hero text | 3:1 |
| Buttons, form fields, focus rings | 3:1 |
| Primary CTA tap target (mobile) | design to 44 to 48 px; anything under 44px on the call button is a Critical finding |
| Reflow | functional at 200% zoom, no horizontal scroll at 320px width |
Law-firm specifics: never convey a form error with color alone (an injured person on a phone needs the text "Enter a phone number," not just a red border). The click-to-call button is the single most important tap target on the entire site; it gets the largest, most isolated target in the mobile thumb zone.
Cognitive UX laws applied to CGH
| Law | The move on the CGH site |
|---|---|
| Hick's Law | Cap top nav at 5 to 7 items: Practice Areas, Locations, Results, About / Attorneys, Contact, plus the persistent Call button. The case-evaluation form starts with 3 fields (name, phone, what happened), not 10. |
| Fitts's Law | The Call button is large, brand-colored, and pinned in the mobile thumb zone site-wide. It never shrinks on scroll. |
| Miller's Law | Chunk the homepage under clear headings; split the practice-area list into a scannable card grid, not a wall of links. |
| Jakob's Law | Behave like other firm sites: phone top-right, logo links home, the sticky "Free Case Review" bar. Do not invent novel patterns for a stressed, injured user. |
| Serial Position Effect | Put the strongest content first and last: hero with the call path up top, a final CTA banner with the phone number at the bottom. |
Trust signals a personal injury firm specifically needs
The skill's trust-signal checklist, filtered for a YMYL law firm and compliance-gated:
- Real attorney and team photos (no stock), with names. Persona 2 wants to see who will represent them.
- Local proof: the Denver office address (RiNo / Five Points, 2701 Lawrence St) and a local phone number, both visible.
- Attorney credentials: Colorado bar admission and "Attorney" / firm-name framing. Verified bar status, never a wrong or implied license (YMYL ledger).
- The no-upfront-cost answer stated plainly: "No fee unless we win or collect" (the "if we win" qualifier is required for CRPC 7.1). This is the top objection-handler for persona 2.
- Reviews / rating aggregate (real, sourced). Review velocity is a live CGH reputation asset.
- Case results ONLY with the "prior results do not guarantee similar outcomes" disclaimer on the same view, per the YMYL ledger. No "best," "top-rated," or "award-winning" unless a third-party verified, current-year source is cited.
- Response-time / availability indicator (for example "available to talk now") to capture the urgent persona.
Compliance note for the designer: every trust element that touches an outcome, a fee, a credential, or a superlative passes the YMYL claims ledger before it ships. Trust beats flash on a PI site, but a non-compliant trust claim is a liability, not an asset.
CTA hierarchy
- Primary CTA: "Call for a Free Case Review" (and the tap-to-call on mobile). Highest visual priority, brand color, largest target, present in the header, the hero, and the bottom banner. This serves the urgent persona.
- Secondary CTA: "Get Your Free Case Review" (opens the short form). For the researcher who is not ready to talk yet but will type.
- Tertiary CTA: "Learn what your Colorado injury claim could involve" (links to the outer-section articles). The lowest-risk transitional step for persona 2 still in research.
Wireframe 1: Homepage (text skeleton)
Header: Logo (links home) | Nav [Practice Areas | Locations | Results | Attorneys | Contact] | Denver phone (top-right) | [Call for Free Case Review] button
Sticky mobile bar: persistent [Call] button in the thumb zone, site-wide
Hero (light background, real photo of the attorneys or the Denver office, no dark scrim):
H1: "Denver Personal Injury Lawyers"
Subhead: "Injured in an accident that was not your fault? You focus on healing.
We fight the insurance company."
Primary CTA: [Call for a Free Case Review] Secondary: [Get Your Free Case Review]
Trust strip directly under the fold: Google rating + "No fee unless we win" + Denver office
Problem acknowledgment: 1 short section naming the victim's situation (bills, lost
wages, the insurance company calling) so persona 1 and 2 feel understood
Practice Areas overview: card grid (Car Accident, Truck Accident, Motorcycle Accident,
Dog Bite, Wrongful Death, Slip and Fall), each card linking to its money/hub page
Why CGH (Guide authority): 3 to 4 differentiators with the no-upfront-cost promise,
Colorado-licensed attorneys, local Denver firm. Real, no superlatives.
Social proof: real reviews with names, rating aggregate. Case results ONLY with the
"prior results do not guarantee similar outcomes" disclaimer on the same view.
Service Areas: Denver + suburbs (Aurora, Centennial, Lakewood, Thornton, Boulder ...),
each linking to its location page
How it works (the SB7 plan): Free case review -> We build your claim -> We pursue your
compensation (3 steps, reduces uncertainty)
Final CTA banner: headline + Denver phone number + [Call for a Free Case Review]
Footer: Nav | Office address (RiNo / Five Points) | Hours | Attorneys | Legal / disclaimer
Wireframe 2: Denver Car Accident money page (/denver/car-accident-lawyer/)
Header (same as homepage) + sticky mobile [Call] bar
Breadcrumbs: Home > Denver > Car Accident Lawyer
Service Hero (light bg, real Denver image, clean, no scrim):
H1: "Denver Car Accident Lawyer"
Brief intent-matching copy: the Denver victim's situation in 1 to 2 sentences
Primary CTA: [Call for a Free Case Review] Secondary: [Get Your Free Case Review]
Trust badge row: rating + "No fee unless we win" + Colorado-licensed + Denver office
Main content + sidebar:
Main:
- What a Denver car accident claim involves (process, plain language)
- What affects your case value in Colorado (factors, NOT a dollar average; route
value questions to a free case review, per the YMYL ledger)
- Colorado rules the reader needs: comparative negligence (C.R.S. 13-21-111),
filing deadline (C.R.S. 13-80-101). Link OUT to the outer-section articles.
- Localized FAQ block (from the validated CGH PAA harvest), schema-ready after
YMYL review. Example included questions: "Is it worth getting an attorney after
a car accident?", "What should I not say to the insurance adjuster?"
Sidebar (sticky on desktop):
- Short case-evaluation form (name, phone, what happened)
- Denver phone number + [Call] button
- Trust badges, related practice links (truck, motorcycle), link up to the
/practice-areas/car-accidents/ hub
Social proof: Denver / area-specific reviews, results with the required disclaimer
Final CTA banner: phone number + [Call for a Free Case Review]
Footer (same as homepage)
So-what / now-what: the spec gives the build two converting page skeletons that serve both PI personas, a CTA hierarchy that puts the tap-to-call first for the urgent victim, and a trust-signal set that is both persuasive and compliance-gated. Now-what for the build: hand these wireframes to frankie / web-design-engineer, fill the money-page content from the CGH content brief and PAA bank, and run design-auditor for the contrast and tap-target gates before any deploy. Every fee, result, credential, and superlative still clears the YMYL claims ledger before it ships.