Information architecture: how to make it worth your time & money

Information architecture is a diagram that shows paths to find chosen information. A lot of people mistake it for navigation or a page map, so let’s start with what is what before we start questioning how.

Main picture shows simple information architecture for Intranet

Information architecture is NOT navigation

To put it simply, Information architecture shows where you should put information that is connected with other information. You can think of it as a mind map. Info may be duplicated in some places or just be unique for one page. The key goal for you as a designer is to create a map of connections that will be convenient for the user in different situations.

Navigation on the other hand usually shows just names of different pages that a website has. It doesn’t show you what information you will find there exactly or what kind of action you may take. Some page titles are pretty obvious like “Contact” or “About Us” but even then without proper information architecture you will drown in “Lorem Ipsum“ text (I have seen websites that have empty states with lorem ipsum long after release).

2 sections. On the left there is a diagram for information architecture (IA) for News and People pages on the right there is simple navigation. Both diagram show Intranet example but the one on the left show that IA divides page into smaller chunks of information where navigation shows just names of a page
Information architecture vs. navigation

How to create Information Architecture that will really help you?

The bigger the project is, the better the results you will get out of Information architecture. After so many years I created my own way of planning information architecture and navigation but we will get there. Before that let me clear something out….

If you are building a small personal blog or even slightly bigger e-commerce, doing Information architecture from scratch may be overkill. Why? Because we have thousands of shops and millions of blogs that can inspire you.

What I am trying to say here is that you can use existing information architectures from other websites and this should be your first step before creating everything by yourself. But remember without taking some time to figure out how to design a good information architecture you may be frustrated after seeing a million times how users struggle to find one obvious piece of information.

Funny Gif that shows a cartoon person trying to drink water in different ways but not as it should be drunk.

Let’s get started and see how to build information architecture.

1 of 7 — Starting point

The best starting point is by getting a sitemap of a benchmarked website that you like and feel that is nicely done and remember — you won’t design good information architecture by looking at Dribbble shots!

So if you are designing a marketplace with thousands of products — check Amazon or Etsy

If you are building a blog — look at Medium or big news websites like New York Times.

If you are building a company website —> you know how it goes…

So the real question is, do you need to do it manually?

The answer is yes and no. You can do it manually by going through the pages and the quickest way to do it is by going straight to the footer. Usually, there is a sitemap with the most important websites listed there.

Footer screenshot taken from It shows links to different ‘Topics” and Government activities.

The other option is by using some automated tools like that is making a site map for you. It’s not always working and if it works you still may not have a whole sitemap since developers may “hide” some of them in the browser.

Navigation map genereated by It shows structure of
Navigation generated by

Either way what you will get will be a sitemap aka navigation, not information architecture. But it will already give you some idea of how the website was structured.

2 of 7 — Understand the structure

A diagram that show four different ways of presenting information architecture: Linear, Grid, Hierarchical, and Webbed.

The structure of information architecture may be completely different than navigation.

With navigation it’s relatively simple, you need to design the breadcrumbs — which is under each page. Of course, cross-links that are shown in different sections may complicate it a bit but usually, you don’t focus on them designing navigation.

In Information architecture, you may end up with something that reminds you of mind maps and this is normal, but let’s check what you may end up with, based on different projects.

2.1 Linear diagram

Simple diagram that show four steps of a process to buy a product.

This is the simplest option it occurs when you build a product or a feature with a strict sequence. You see it when you design paths where users need to make some steps to see more information. An example of such path is a shopping cart. Let’s explore this typical path:

  1. Add product to shopping cart
  2. Go to shopping cart (list of all items)
  3. Proceed to checkout (user sometimes now see register page — its bad UX!)
  4. Add shipping information
  5. Add payment information
  6. Accept payment
  7. You see a ‘Thank You’ page

2.2 Grid diagram

A diagram that shows 3 different system roles matched with features.

This is an information architecture that you may often see when building a data model or system roles. A good example of this kind of model is Figma members vs guests.

Figma admin may add users with different access. They will be able to edit or just view some information.

To put it really simply, I like to think of this structure as a multiplication table. You see to what data each user role has access to.

2.3 Tree diagram

HIerarchical diagram for Intranet. On top there is a box with ‘Intranet example’ title. Bellow, there are seven different subpages like ‘News’ and ‘Files’.

The most logical of all of them. You simply build information architecture from one page to another (in Europe and the USA it’s usually from top to the bottom but I also saw from left to right and the opposite depending on different regions)

An example of such architecture was used to plan Disneyland. It’s used so that you have almost the same experience each time you visit one. There is always some Main street and different “regions” with attractions.

Diagram shows DIsneyland plan.
Information Architecture, 4th Edition — The organizational structure of Disneyland made a new, unfamiliar concept — the theme park — easily understandable to mid-1950s Americans by appealing to their emotions and fantasies.

2.4 Web aka Mindmap diagram

This picture shows a complex connection between different websites, actions and information that user may experience on Amazon website. This example shows a short process of adding a product to shopping cart and then buying it by adding payment information.

This structure is also connected with hyperlinks. Usually, you start building a tree structure but you then start to understand that it can’t be that simple. An example of such information architecture is used at different marketplaces for example Amazon. You can find “iPhone” in at least 17 different categories depending on what you really want to find.

Knowing that you should be now prepared to start on your own and go to the next step which is to…

3 of 7 — Choose the right tool

Now take your blank canvas and start creating your information architecture.

I recommend 2 tools:

  1. FigJam (not the best but still convenient to have everything in one tool ;))
  2. Use mind mapping tools (my favorite is XMind but there are plenty of others)

4 of 7 — Start with something simple

At this point seeing benchmarked navigation and a blank space on your tool may be overwhelming but the hardest step is always the next one. I am sure you could design some pretty good information architecture in just a few hours if you stay focused.

This picture show FiGjam file with Login information architecture.

Start with the first page. It can be a home page or even a login page. I always recommend starting with something simple and obvious to understand how you should structure your diagram.

5 of 7 — Find out what are the red routes

A Matrix that shows different Google Maps features mapped on a matrix regarding popularity and how often user use chosen features for example Voice command.

If the product is already on the market or you build something similar to what is already there I strongly recommend to discover so-called ‘red routes’. They will show you what are the key websites/ features that people should find as simply as possible. Treat it like a heatmap for information architecture.

There is one important fact — If the feature is used by many and is important It does not mean that you always have to put them in navigation because some of them (features) may be a part of some process on one page users will see it only after doing some action.

Let me give you an example: Planning a route is a crucial feature for Google Maps but to get there you first need to enter (or system needs to get) your location and final destination.

6 of 7 — Test it

We have plenty of different tools that may help you test navigation or Information architecture really quickly. I personally like to use two of them: Optimal workshop for tree testing and a usability hub if I already have some screens but not much time.

These kinds of tests will show you how people wander across your navigation and where they would expect to see certain information. Please also remember that there is also an option to teach new behaviors to people.

Screenshot from Optimalworkshops. First chart shows the average success score across all your tasks. Second average directness score across all your tasks.

7 of 7 — Optimize it

Never stop optimizing your information architecture its not a one shot task. This task is more important than designing wireframes itself. Imagine having a beautifully designed system with users that don’t know about half of the features you made for them. You may end up with half the product being useless because the path to go and discover new features may be almost impossible.

At the end how many people know how to manually add your parking position to Google Maps?

And thats it. I know its a lot but if you want to build a better product you should start with better fundament.

Want to know more?

Read the full article here

Leave a Reply

Your email address will not be published.

Dear design student: You are not an artist

Dear design student: You are not an artist

Design can’t live on creative expression alone Like a lot of people that began

An Outline for Your First UX Portfolio That Will Impress Anyone.

An Outline for Your First UX Portfolio That Will Impress Anyone.

Table of Contents Hide Just Do It ✅Don’t Be Picky with The Portfolio Website or

You May Also Like