Diagnose Before You Design: Website Restructure Week 1 Audit by Muskan Agrawal

HAI Fellow Muskan Agrawal walks through week one of a website restructure project: a diagnostic audit of the existing Humanitarians AI site, done before touching a single pixel of the redesign. The point of week one was to read the site the way a first-time visitor reads it, as a stranger, not as the person who built it.

Why diagnosis came before design

The original brief called for a full rebuild. Instead of starting there, the first move was a heuristic review of the existing structure, benchmarked against comparable nonprofit and education sites, before assuming a rebuild was even the right call. That ordering, diagnose first, decide on rebuild versus fix second, is the organizing idea of the whole week.

What the heuristic review found on the homepage

The homepage carries a lot of dense conceptual content: a framework, four separate program blocks, a documentation system, and a curriculum series, all before a visitor gets a plain answer to what the site is and what to do next. That is identified as a hierarchy problem, not a content problem. The information itself is good; the order in which it gets delivered is working against the reader.

The footer as the clearest signal

The footer lists eight unlabeled project names with no context for a first-time visitor. That absence of labeling is treated as the clearest signal that navigation needs to be rebuilt around what a stranger actually understands, rather than around what the internal team already knows by heart.

Typography research: a four-step scale

This week's typography research focused on hierarchy as well. The site currently relies on one bold display typeface at nearly every level, so a page title and a card label carry almost the same visual weight. Read speed drops when everything is visually shouting at the same volume. The direction explored introduces a clear four-step type scale, display, headline, subhead, paired with tighter paragraph line length and more breathing room around the maroon accent color, so that accent reads as emphasis again instead of decoration.

Rethinking the hero section

The hero section got specific attention. Right now, the primary visual real estate goes to a video embed, while the actual value proposition, who the site is for and what to do next, competes for space in a narrow column. The direction being explored rebuilds the hero around what a first-time visitor actually expects: a clear one-line answer to what the organization does, who it's for, and a single next step, with supporting media playing a secondary role instead of leading.

Why the scope changed

This audit is also what changed the project's plan. The original scope was a full rebuild, but a full rebuild throws out everything already working, the mission clarity, the tone, the maroon and black visual identity, along with the things that actually need fixing. So the direction shifted to fixing the structural problems first: navigation, hierarchy, hero, and typography, with a ground-up rebuild only revisited if targeted fixes prove insufficient.

Key takeaways

• A heuristic audit against comparable sites came before any redesign decision, and it changed the scope of the project.
• The homepage's problem was identified as information hierarchy, not the underlying content quality.
• An unlabeled footer listing eight project names was the clearest sign that navigation needed a rebuild around visitor understanding.
• Typography research produced a four-step type scale to fix a display face carrying nearly equal weight at every level.
• The hero section needs to lead with a clear value proposition and next step, not a video embed.
• The plan shifted from a full rebuild to targeted structural fixes, preserving what already works.

Who this is for

Anyone planning a website redesign who wants a model for auditing an existing site's structure and typography before committing to a full rebuild, especially teams weighing targeted fixes against starting from scratch.