The problem: a carousel hid 6 of 8 studies, unlabeled forms, no address anywhere.
What we did: all 8 templates redesigned around measured accessibility and governed tokens.
The result: a dev-ready file, every text pair AAA, 0 unlabeled fields, 56 interaction states.
The brief named patients 60 to 75 and made accessibility the top priority, under one locked constraint: the network blue.
ARI recruits participants for studies in COPD, heart failure, ulcerative colitis, liver disease, kidney disease, and chronic wounds. Nearly every visitor is a patient in their sixties or seventies, or an adult child researching on a parent's behalf. Visual cohesion with the Access Health Care Physicians network was a contractual requirement, not a preference; the blue is shared across every partner site.
Before any screens were designed, the current site was crawled and verified page by page. That pass produced a 30-question intake document for the client covering the public street address, IRB language, entity naming, and per-study accuracy. Several of those questions became the design decisions below.
Captured live, August 2026; axe-scanned (WCAG A+AA) across six templates. Quotes verbatim.
Trails Safe guards include,
Inofrmed about risks,
Your identify will remain confidential.
The axe scan also found 16 focusable elements inside aria-hidden containers on the homepage. The old site was a reasonable template build undermined by details that matter enormously on a medical site. On a page asking for medical trust, typos are not cosmetic; for a 68-year-old visitor, content that must be operated (tabs, carousels) is content that gets missed. Eligibility criteria were drawn as pink and blue person icons and cigarette glyphs rather than words. A site asking patients to visit weekly never said where it was; the client intake document opened with exactly that question.
Decision one
Eight studies with distinct eligibility rules cannot live in a two-up carousel.
Condition-specific landing pages as the primary structure were rejected: sponsors add and close studies too often, so a catalog with one study template survives churn, and condition hubs can layer on later as content, not architecture. The study pages moved from eight hand-made orphan pages under /single/ to one governed template. When a study closes it stops silently 404ing; the intake document recommends redirecting closed studies to evergreen condition pages, which the template structure now supports.
Decision two
We treated accessibility as something to measure: static labels, hyperlegible fields, 44px tap targets.
| Pair | Ratio | Grade |
|---|---|---|
| CTA blue on white | 7.45:1 | AAA |
| Navy headings on white | 9.28:1 | AAA |
| Body ink on paper | 11.21:1 | AAA |
| White on section navy | 11.74:1 | AAA |
| White on footer navy | 18.17:1 | AAA |
| Cerulean accents on white | 4.78:1 | AA |
Nothing floats, nothing disappears on focus. The old finder's 12 unlabeled controls have no equivalent in the new system because labels are part of the field component, not a per-page courtesy. The documented mobile pass audited every interactive element to a 44px minimum tap target: footer links padded into full-width rows, filter checkboxes rebuilt, close icons enlarged. The smallest legal text moved from 11px to 12px. None of this is visible in a screenshot, which is rather the point.
Decision three
The old site claimed safety; the redesign shows its work: the process, the address, the criteria, all stated up front.
Access Research Institute is looking for medical research heroes to participate in clinical studies.
We'll Ensure you always get best results
Join A Clinical Study Close To Home
What Happens When You Click “See If I Qualify”
Compensation that is not yet fixed says To be determined rather than promising anything. The footer carries the legal entity, Access Health Care Physicians, LLC, with HIPAA and accessibility notices, which also answers the entity question the client intake raised. The address, phone number, email, and business hours appear with a map on the homepage and again on the contact page.
Decision four
The mockups and art direction came from my collaborators. I owned what made them buildable: the Client-First restructure, variable architecture, responsive adaptation, and interaction states.
The responsive and accessibility passes ran through five batches of dev-mode annotations left by the designers, each batch resolved to zero before the next: reflowed footers, a filter panel reworked into a drawer, a modal rebuilt as a bottom sheet, tap targets padded to 44px, and a detach ledger recording every component that had to leave the update chain to get there.
Reconstructed to document reasoning, not field research.
68 · COPD, ten years · low tech confidence
Manages COPD and wants options beyond her current medication. Relies on her daughter for anything involving forms on the internet.
45 · researching for his mother · heart failure
Does the internet work for his 71-year-old mother. Skeptical by default and cross-checks anything a site claims against her cardiologist.
72 · completed a previous UC study
Has done a study before and would do another. Impatient with sites that make him hunt for what changed since last time.
Development-ready in Figma, not yet shipped; no numbers invented. Measured in the file:
desktop templates, plus tablet and mobile adaptations
every primary text pair, 7.45:1 to 18.17:1
unlabeled fields, new finder vs old
minimum tap targets, all 9 mobile frames
interaction-state variants, 7 component sets
intake questions: address, IRB language, accuracy
The old site's study detail pages scanned clean in the same axe pass that faulted the homepage and finder, so the redesign's case does not rest on the old site failing everything. It rests on the audience definition: for readers in their sixties and seventies, carousels, icon-glyph criteria, and 11px legalese are exclusion mechanisms even where automated rules pass.
One brief sentence, audience 60 to 70, accessibility first, settled every argument. The other lesson: systemization is design.
Maria Angelika AgutayaWorkflow Engineer · mariaangelika.com · Designed with collaborators for Access Research Institute, 2026