Wireframing and information architecture

What this actually solves

Somebody has twenty pages of accumulated material and no idea which of it survives, which of it merges and which of it should have been deleted years ago. Or a developer has asked the reasonable question — which pages am I building — and there is no list to give them. Both of those are annoying. Neither is the expensive one.

The expensive one is the project where design started with appearance. Three rounds in, you keep asking for changes that sound cosmetic and are not, because nobody ever agreed what the site is made of. Each round moves things around, each round costs money, and the reason it never converges is that the argument is about structure while the conversation is about colour. Structure decided late is the single most common cause of a six-week project taking three months.

There is a second, quieter cost. A site whose menu was assembled from the company's internal departments makes visitors do translation work. They arrive wanting to know whether you can supply four hundred plates by Friday, and the menu offers them Company Profile, Our Vision and Certificates. Nothing on that menu is wrong. It is just answering a question nobody asked.

What we do, and in what order

1. Inventory what exists. Every page of the current site screenshotted onto one board, so the whole thing is visible at once for the first time. This is where duplication, orphan pages and the four versions of the same PDF surface. Half a day to two days.
2. Card sorting, if the site is large. Page names on cards, grouped by people who are not you and not us. Only worth doing above a certain size, and quoted separately when it is. Two to four days.
3. Build the sitemap. A tree, no more than three levels deep, every page with a one-line statement of what it is for. The menu gets capped at five to seven items. What comes out of the menu is not deleted — it moves to the footer, which is where the material that matters to some visitors and no visitors at once belongs. Menu space is the most contested real estate on any site and it is spent deliberately. One to two days.
4. Draw the user flows. Two or three journeys written as steps — the new customer ordering for the first time, the returning customer repeating an order, the person checking a price without creating an account. Each flow includes the route back, which is the step that is missed most often and the one that generates support emails. One to two days.
5. Wireframe every unique page. Grey boxes, mobile and desktop, and real words rather than placeholder Latin. This is not a stylistic preference. Lorem ipsum hides the actual problem, which is that your headline is seventeen words and not five, your product names are long, and the button label you had in mind does not fit. Three to seven days.
6. Write the page-purpose sheet. One line per page saying what that page is for and what the visitor should do next. It takes an afternoon and it is consistently the document clients find most useful afterwards, because it is what copy, design and build all get briefed from. One day.

Work happens in FigJam for the sitemap and flows, Figma for the wireframes, and on paper for the first hour, which is not a joke — it is the fastest way to throw away four bad structures before committing to the fifth.

What moves the price

The range is $400–$3,000, set by three things.

How many unique pages there are. Unique is the operative word. Forty product pages built from one template is one wireframe. Eight pages that each do something different is eight.

Whether we are organising your content or only the structure. Being handed a clean inventory is one job. Going through years of accumulated material, deciding what merges, what is retired and what has to be rewritten, is a bigger one and it is where the upper half of the range goes.

Whether card sorting is needed. On a large site with genuinely ambiguous grouping, a sort with real participants is the only honest way to settle the menu. It is separate work with its own recruitment, and it is quoted as such rather than absorbed.

What usually goes wrong

The wireframe gets made attractive. Colour goes in, real photographs go in, a nice typeface goes in, because it looks better and it is tempting. The result is that you stop reviewing the structure and start reviewing the blue. The entire purpose of the stage has been spent. Wireframes are kept deliberately plain — one grey, one typeface, no imagery — and the covering note says so explicitly, so that the feedback that comes back is about order rather than appearance.

Placeholder text instead of real words. Lorem ipsum makes a wireframe look tidy and makes it useless as a test. The layout that holds a five-word heading collapses under the real one, and nobody discovers this until the visual design is approved and the copy arrives. Real headings, real product names, real button labels, even rough ones, at the wireframe stage.

A page count with no page purpose. A sitemap that lists twenty-two boxes and stops looks complete and produces twenty-two pages that nobody can write, design or scope, because no one ever said what any of them is for. The one-line purpose per page is the part that gets skipped when the stage is rushed, and it is the part that everything downstream depends on.