Four moments where the right call wasn't obvious on the first pass.
Read the whole agreement. Don't make people hunt for it.
One acceptance criterion required visitors to read the full Memorandum of Agreement without leaving the page. My first instinct was a familiar pattern: an expandable accordion, collapsed by default, with an accessible disclosure pattern and an expand-all control.
Brendan came back with something more direct — he didn't want the agreement tucked behind interaction at all. He wanted it just there. Readable, scannable, no click required. So I rebuilt the section as three plain-language parts — About the Network, Benefits of Membership, Member Responsibilities — set in a constrained reading column so paragraphs don't sprawl edge-to-edge on a 1440px screen, with the full terms intact underneath simplified, scannable copy.
One form, two kinds of applicant.
The application form had to work for both organizations and individuals, support multiple representatives signing the same agreement, and let people declare a role using a UI pattern that didn't lie about how it worked.
I caught — and fixed — a real mistake of my own here. The role-selection options looked correct but were built with radio-button components, meaning the form visually permitted only one selection while the copy said "select all that apply." Brendan flagged the mismatch in review. I rebuilt it with true multi-select checkboxes, added an "Other" option with a freeform text field, and gave every option a one-line description so a first-time applicant would know what they were committing to before clicking anything.
Not every member has a hydrophone. The directory shouldn't pretend they do.
Some of Orcasound's 21 members run physical hydrophone nodes. Others contribute through research, education, or outreach with no hardware at all. An early version of the member directory treated "Node" as if every member had one, which meant roughly a quarter of the table read like missing data.
The fix: a simple dash instead of "N/A" in the table view, the node line removed entirely — not blanked — on mobile cards for members without one, and a single explanatory line instead of a caveat repeated twenty-one times.
Three breakpoints, and a fourth one just to check my work.
Mobile (390px), tablet (768px), and desktop (1440px) served as anchor breakpoints, with landscape orientations inheriting behavior from whichever anchor they sit closest to in width, rather than being separately hand-composed.
The one exception: the application form got its own mobile-landscape validation frame, because forms are where shrinking vertical space actually breaks things — submit buttons sliding out of reach, agreement checkboxes getting covered by a keyboard. Validating it, rather than assuming it would hold up, was the entire point.
Validated, not pictured here — the proportions held up fine in review, they just didn't earn a place in this case study.
