Skip to content

Chapter 5 of 7

Information Architecture and Prototyping

Information architecture, often abbreviated as IA, is the structural design of shared information environments: organising, labelling, and structuring content so that users can find and understand it. It rests on four components: organisation systems that group content meaningfully, labelling systems that name things consistently, navigation systems that let users move through content, and search systems that help users locate specific items. A sitemap is a visual diagram showing the hierarchical structure of a website's pages and their relationships, used as a planning tool during IA work, while navigation design creates the menus, breadcrumbs, links, and search affordances that let users actually traverse content and find what they need efficiently.

Wireframes and prototypes bring IA to life at different levels of fidelity. A wireframe is a low-fidelity visual guide representing the skeletal framework of a page, showing layout, content placement, and basic functionality without visual styling. Low-fidelity wireframes are simple sketches or grey-box layouts that are quick to create and focus on structure, while high-fidelity wireframes are more detailed and use real content and closer-to-final proportions. A prototype goes further: it is an interactive simulation that allows users to click through screens and experience the flow, making it suitable for testing before any code is written. In short, a wireframe is a static layout, whereas a prototype is interactive and clickable, simulating the actual user experience.

A range of tools supports this work, including Figma, Sketch (often paired with InVision or Principle), and Adobe XD, all of which support interactive prototyping and collaboration across teams. To ensure visual and behavioural consistency across a product, organisations maintain design systems: collections of reusable components, patterns, and guidelines covering buttons, typography, colour, spacing, and other foundational elements. Together, IA, wireframes, prototypes, and design systems form the connective tissue that turns research insights into testable, buildable product designs.

All chapters
  1. 1Foundations of UX Research
  2. 2Qualitative Research Methods
  3. 3Quantitative Research and Analytics
  4. 4Usability Testing and Experimentation
  5. 5Information Architecture and Prototyping
  6. 6Personas, Journey Maps, and Service Design
  7. 7Heuristic Evaluation, UX Principles, and Accessibility

Drill it

Reading is not remembering. These come from the User Research Methods deck:

Q

What is UX research?

The systematic study of target users and their requirements to add realistic contexts and insights to the design process, ensuring products meet real needs.

Q

What is the difference between qualitative and quantitative UX research?

Qualitative explores the "why" through interviews, observations, and open-ended data. Quantitative measures the "what" and "how much" through numbers and statis...

Q

What is the difference between attitudinal and behavioural research?

Attitudinal measures what users say (opinions, preferences). Behavioural measures what users actually do (observed actions, click patterns).

Q

What is a user interview?

A one-on-one conversation with a user (or potential user) to understand their needs, behaviours, pain points, and motivations.