A website’s information architecture (IA) has two main components a) the site’s content and b) functionality and structure that define the relationships between a site’s content/functionality. Even though the IA itself isn’t visible in the UI, a solid IA is the foundation of a great user experience. That’s why the best time to start thinking about information architecture is before the website is even built.

In this article, we will review IA best practices and share the best information architecture templates that will help you design great IA.

A step-by-step process of creating an information architecture for web design

What kind of content should you have on your site? How should it be structured? Unfortunately, all too many businesses structure their content using the “In my opinion” method. No matter how good you are at predicting things, it’s always better to rely on research and make data-informed decisions. That’s why before starting a web design project, it’s recommended to conduct proper research and analysis.

Below is a seven-step process that you can follow to create a website architecture:

1. Frame your approach

Are you redesigning an existing website or designing something new? The answer to this question will help you prioritize your activities. For example, when you design a new site, you need to invest more time in understanding the business and your user’s needs. But when you redesign an existing website, you will need to focus more on conducting a content inventory and audit in order to find places where content requires attention (more on this later in the article).

2. Conduct user research to understand your users

Once you have identified which approach is appropriate, gather data about your site users – invest in user research and learn about a user’s wants and needs. Create user persona profiles based on the insights you get from user research. Write user stories and evaluate your content organization and design on how they work for real people and their tasks.

a persona that is used in design detailing a persons goals, personality traits, frustrations, favorite brands, and basic information
Personas are fact-based representations of your users including the goals, motivations, characteristics, and behaviors of your target audience. Image by clevertap.

3. Identify business goals

Once you have identified what your users need, its time to discover what your stakeholders need. The goal of information architects is to come up with a structure and design that balances the users’ needs with business needs. Conduct a series of interviews with stakeholders. Get a clear understanding of what the business requirements are and list them with the appropriate metrics and KPIs. The earlier the purpose and goals are defined clearly, the easier it is to stay focused and confident in your work.

A venn diagram comparing the business goals and the customer goals
The intersection of business goals and customer goals will tell you what content and features will benefit both the customer and business. Image by yunsukchoi.

4. Review the content

Now when you know what users want and what the business wants, you can evaluate the content you have according to those goals. The main activities to perform at this stage are content inventory and content audit.

Content inventory

Before you start constructing a layout of the product, you need to understand what elements your website will consist of. Conducting a content inventory will help you locate and identify the existing site content. The goal of this activity is to create a list of information elements (blocks of content on webpage) and classify them by topics. The inventory list usually includes various elements such as page titles, meta elements (keywords, description, tags), body copy, media content (images, audio, video), and documents (doc, pdf, ppt).

a written step-by-step guide of the content inventory procedure
A procedure of content inventory. Image by uxknowledgebase.

Content audit

A content audit is a process of evaluating content usefulness, accuracy, and overall effectiveness. The usefulness of content is evaluated in terms of value (potential and real) that it provides for users. When you have a content list, you can evaluate it based on the goals you have put in place. For more information on content audit, read the article How to Perform a Website Content Audit.

a spreadsheet of a content audit that has categories for basic info, category, metadata, and metrics.
A sample of the content audit spreadsheet. Image by semrush.

5. Classify and group content

Now that you know what content you have and have evaluated it according to its usefulness, it’s time to define the relationships between content, which can be done using a technique called information grouping

All of the different types of content must be grouped, or classified, and have proper names that won’t confuse a user. The most popular and the most important technique that allows information grouping the content is card sorting.

3 pieces of paper with smaller notes on the page detailing the cart sorting process and determining how content will be grouped and arraigned on a site.
Open card sorting is the most popular technique that allows content grouping. Image by boagworld.

6. Labeling and navigation design

As soon as you have the results of card sorting activities, you will understand how your target audience classifies the content. This step embraces navigation design, labeling, and site mapping. When you work on navigation design, you need to define a structure for your navigation system and write a proper label for each navigation option. This will help you understand what options you have and in what order you might want to present them to your visitors/users.

small boxes leading to other smaller boxes in a tree breakdown to detail the site structure of a consulting firms website.
IA example from the book Information Architecture by Louis Rosenfeld, Peter Morville, Jorge Arango.

7. Wireframing

As soon as you have a navigation design, you need to see how pages/screen will work in relation to each other. It’s easier to get this understanding by doing wireframing. Wireframing helps to create a simplified and schematic visual representation of a layout for digital products. Wireframes are similar to architectural blueprints- they are low-fidelity mockups that show a project structure and connections between its parts. Wireframes are focused on the structure, not the visual and emotional perception of the details; that’s why it’s important to keep them simple. Once you have wireframes, you can connect them into the user flows and evaluate user interactions with a website.

different website wireframes including webpages with maps and coordinating information.
Website wireframes. Image by Angie Herrera.

Information architecture templates

Now that you’re familiar with the general process of information architecture web design, it’s time to review a few excellent templates that will simplify the process of creating your IA.

Visual vocabulary for information architecture

Diagrams are an essential tool for communicating information architecture and interaction design in web development teams. Jesse James Garrett shared a document that helps in the development of such diagrams. The document outlines basic symbology for diagramming information architecture and interaction design concepts while providing guidelines for using these elements. Here is how different team members can benefit from using the diagrams:

  • Project managers use them to obtain a general sense of the scope and form of the project.
  • Content producers use them to derive content requirements.
  • Visual and interface designers use them to extract a count of how many unique page designs must be produced, and to obtain an initial sense of the navigational and interface requirements for these designs.
  • Information architects use them to develop detailed navigational and interface requirements for each page.

Along with the document, you will also find an information architecture example of the website MetaFilter. You can use it as a reference when working on your IA for your website.

a websites information architecture containing a diagram breaking down various pages into smaller subcategories and the connection between them.
A sample diagram of the information architecture and interaction design of MetaFilter. Image by Jesse James Garrett.

Visio stencils for information architects

The Visio stencils, a name given by author Nick Finck, were designed to aid the work of information architects. They are created for people who have experience in IA. Thus, it’s important to familiarize yourself with common IA practices before trying to use these stencils.

The stencils in this kit will help you to design:

  • Wireframes. The wireframe stencil will help you communicate what needs to go on a page and what priority it should have.
  • Sitemap. The sitemap stencil will help you visualize which pages can be accessed (hierarchically) from a given page.
  • Process flows (sometimes referred to as user flows, task analysis, or process maps). The process flow stencil will help you create flow charts or diagrams to explain and define a process within a web site, a web application, software, or system.
a sitemap of a website containing small squares to indicate the different pages on a website.
Sitemap stencils for information architects. Image by nickfinck.

Information architecture kit by UI8

The company UI8 offers an information architecture kit that will help you get started. The kit contains 250 templates and 500+ elements. All assets in this kit are vector-based and fully scalable. The kit is compatible with Adobe Creative Suite.

different website pages arraigned in a row with connecting arrows to show the connection
Information Architecture Kit by UI8. Image credit UI8.

Information architecture template for Keynote

This is a simple and easy-to-use IA template that contains simple blocks that will help you showcase your web app/site structure right in Keynote and doesn’t require a third-party software to create sitemaps. Along with the IA template, you will find a link to Google Docs where Alex Gilev (the creator of this kit) outlined IA architecture on a real project from the past.

a printed page with various squares signifying different web pages and the connection between them all
Information architecture kit for Keynote. Image by gumroad.

Conclusion

It’s a well-known fact that design work is never truly done, and that’s especially true for information architecture. IA is a living and breathing organism that adapts to the rapidly changing environment. But it’s vital to create a solid foundation for your design. That’s why it’s important to invest in creating good IA and use tools that will allow you to introduce changes without much effort.