A mobile-first website redesign for a disability-inclusion nonprofit — turning dense, inconsistent content into a scalable, accessible resource system built for students, educators, and geoscience professionals.
The Brief.
IAGD — the International Association for Geoscience Diversity — is a 501(c)(3) nonprofit dedicated to improving access and inclusion for people with disabilities in the geosciences.
Their existing website served as a community hub but had become outdated, hard to maintain, and inaccessible. I joined a team of three designers and two engineers to redesign it from the ground up — mobile-first, accessible, and built to scale with the organization and the 15,000+ community members it serves.
I led the research track end-to-end and standardized inconsistent content into a unified, scalable page system.
Valuable content.
No system to deliver it.
IAGD's existing website held resources for students, educators, and geoscience professionals — but inconsistent structure and no clear hierarchy made it difficult to find, scan, or act on any of it — as seen below:
I ran the research
track end-to-end.
Before the first team meeting, I completed a competitive analysis and compiled the stakeholder question bank. As the project progressed, I developed and refined the user interview script with an industry mentor, managed interview logistics, conducted interviews, and led the synthesis process, including affinity mapping, persona development, and HMW question generation.
Four major insights emerged from the synthesis — each one became a structural rule for the system:
When pages aren't structured for screen readers, accessibility isn't a feature. The design system itself had to become the accessibility solution.
Users don't read pages; they sample them. The entry point to any content isn't the text — it's the structure that signals what's worth reading.
Students dropped off not because the content was wrong, but because nothing told them where to start. The IA had to do the wayfinding the content couldn't.
For educators, trust came from structure — not credentials. A well-organized page signaled reliability before a single resource was read.
Designed around page purpose, not just appearance.
Every page type was given a defined job. That job determined the layout, components, and how users move through it. The visual pattern stays consistent. What changes is the destination and depth.
Parent Hub and Category Hub look identical — both 3-card layouts. That's intentional. Visual consistency builds user confidence as they go deeper. What changes is the destination: section → subtopic → external resource. Same pattern, progressive depth.
Iterating toward
the system.
Three phases — from content-dumped pages to a fully structured, purpose-driven system.
All three show the same slice — the Previous Field Trips list from the Field Experiences page — so you can watch one pattern, the trip card, go from inline text to a standardized, collapsible component.
Every trip sits inline — bold heading, paragraph, full-width photo, repeat. Nothing collapses, and no two entries are built quite the same way.
The accordion arrives — trips collapse into a list, and the open one reveals a photo and summary. The right pieces, not yet a system.
The same accordion, now a system — the open trip becomes a contained, branded card — built once, reused everywhere.
Look at the system.
Six page families. Same structural logic — same component rules, different content depth. Each card shows the page family and the user flow that reaches it.
Each screen shows a page's body only — the shared header and footer are cropped so each page type's own structure stays the focus. Full pages, chrome and all, appear later in the case study.
Where the journey ends.
The strategy from earlier, now built — each page type, the path that reaches it, and the screen it produces. Same components throughout, arranged around each page's job.
Mobile-first.
Desktop expands the rules.
The same components, reflowed for the screen — each page stacks on mobile, then opens into its desktop layout. Shown here in full, chrome and all.
Every decision had
a structural reason.
Accessibility wasn't a checklist applied at the end — it shaped how content was organized, how interactions were built, and how the system was structured from the start.
Users choose what to expand, cutting cognitive load. The first row opens by default, so people land on context, not an empty list.
Icons alone fail screen readers. Every resource type pairs its icon with a text label, so meaning never depends on sight.
Every card that leaves IAGD carries an explicit indicator — people know they're exiting before they click.
Mobile keeps parent + current; desktop shows the full path. Context stays, clutter goes.
Sideways galleries are a screen-reader trap. All media stacks vertically instead — nothing hides off-screen.
Same page type, same behavior. People build the mental model once and reuse it everywhere.
One template for every trip.
The existing Trip Detail pages each had different section structures — no two were the same. I recreated each trip's structure in mid-fidelity wireframes to run a structural comparison, then worked with the client to identify the most-used sections, remove canceled trips, and unify everything into one standardized hierarchy — applied to every trip page going forward.
Three trips, three different structures — no two section orders alike.
One unified structure, applied to every trip page going forward.
A system you can
actually use.
Five outcomes — each one shown in motion through the final design.
Three resource pages, one structure — content
swapped, components reused.
Navigating the nested hubs — parent
to category to resource.
Field trip archive to a standardized detail page.
The system breathing in a wider viewport.
Accordions and breadcrumbs in action —
progressive disclosure, icon labeling in cards.
What this project
taught me.
The biggest shift in this project wasn't visual. It was structural. Learning to think about what kind of page something is, and letting that determine the layout, changed how I approach every project now.
Designing for maintainability is part of designing for accessibility. A system a volunteer team can't update will fail the community it was built for, no matter how good the first version looks.
A content audit is a research method. Recreating each Trip detail page wasn't redundant work; it was pattern discovery. That became the foundation for standardization.
