Your Complete Guide to Information Architecture 🗺️

Blueprint for Digital Products, Examples of IA at Webflow, IA Tools for Testing

Today we’re covering the basics of information architecture. This is a requested article from one of our paid subscribers! 🙌 We’ll cover:

• Intro to Information Architecture

• What is IA?

• Why IA Matters Now More Than Ever

• Case Study: Webflow’s New Unified Marketplace

• 3 Pillars of Information Architecture

• What are Some Core Principles?

• The IA Design Process

  • Card Sorting 📑

  • Tree Testing 🌳

  • Site Mapping 🗺️

  • Navigation Design ↳

• Practical Tips for Better IA

• Tools of the Trade

• Bonus: Quick IA Exercise ✨

Some designers say that information architecture makes a great digital product but I would say it’s the baseline.

If someone can’t navigate your product easily, then it simply does NOT work.

Intro to Information Architecture

The ability for a user to navigate the digital world can be more challenging than it may appear. When people aren’t able to visibly walk through your digital experience like they would a building, they need strong guidance indicators and a well thought out experience.

What Is Information Architecture?

Think of IA as the blueprint of your digital space. A designer is like an architect, but instead of organizing physical spaces, you're organizing information spaces. Just as a well-designed building helps people find their way naturally, good IA helps users navigate digital spaces effortlessly. This is good for users and the business.

⚠️ One thing to keep in mind is accessibility for disabled people or even older users who struggle more to navigate an interface.

Why IA Matters Now More Than Ever

In today's digital world:

• Users spend 60% less time reading website content than a decade ago¹

• 88% of users won't return to a website after a bad experience²

• The average user makes a stay-or-leave decision in just 3 seconds³

Now let’s go through a quick story that illustrates why IA matters.

Webflow’s New Unified Marketplace

One of the challenges I worked on at Webflow was creating their new ecosystem. One of the core challenges was bringing disparate resources together to create a unified marketplace. Things like showcase, templates, experts, and integrations were all separate experiences.

What did poor IA mean for Webflow?

• Users struggled to find what they’re looking for

• They asked for things that already existed

• Resources available were not being used

• The support team had to spend time fielding more questions

This caused a poor experience for our users, with successful creators spending 20%+ of their time facilitating their own distribution workarounds to Webflow systems. 😕

While there were other issues, one of the key problems addressed in our v1 solution was strong information architecture and a unified search experience. Below is an example of an early iteration I explored for a strong search experience that unified different assets in the marketplace.

This meant instead of going to different places in the navigation to access the showcase, templates, experts, etc., it would all be available right here, in one location, easily searchable and navigable.

Before:

• No clear sorting

• Separate navigation paths to assets

• No clear categorization

• No unified search

• Limited Filters

After: