23 Nov 2016

Creating an Information Architecture Diagram

One of the first steps I like to do when embarking upon a web site redesign process is to create an information architecture diagram. An information architecture (IA) diagram can be extremely beneficial in the discovery phase of a project and even beforehand during the proposal creation process. By creating an IA diagram of the site or application as-is, you’re forced to learn more of the ins-and-outs of either the information hierarchy or application functionality. The resulting document can also be a great guide for your development team as they begin to assess either CMS requirements or custom software development needs.

Another benefit of an IA diagram is that it allows the client to get a full picture of their current content or functionality. Often times, this IA diagram can be a useful tool when planning for a minimum viable product (MVP).

I like to create IA diagrams using a mind mapping tool called MindNode. It’s available for both macOS and iOS. I enjoy working with MindNode because it generally gets out of the way and lets you quickly create an IA diagram as you work your way through the existing web site or application. Here’s an example of an IA diagram that I created for a recent client project:

IA diagram example

IA diagrams don’t need to be obsessively detailed. Often times I will condense particularly hairy areas of a site or application provided that the result is a rough representation of the hierarchy or functionality. I like to time box these projects to no more than an hour or two, particularly if they’re being created as part of the proposal phase. It’s always possible to dive deeper at a later point.