Site architecture can be mind boggling when you’re going through a website relaunch. Sure, a well-organized website looks intuitive and obvious, like the information arranged itself into simple, easy to navigate categories. In fact, getting to that point usually takes some serious wrangling, puzzling, arguing, and problem solving.
This process almost always involves more than one person. And we’ve found that most people need to work through it visually. So, we need a process for planning information architecture that allows you to revise as you go, that involves multiple collaborators, and that uses a visual format.
We’ve been playing with that challenge here at JB Media—and we’ve come up with three approaches we find productive. You can take your pick of these methods to help resolve your own site architecture quandaries. Bonus: it’s fun! You get interactive problem solving. You get ah-ha! moments. And, in the end, you get a new, more strategic website.
Why is Information Architecture So Challenging?
You need to make the complex simple.
Even if you go into your relaunch thinking you have a pretty good idea of how to organize your site, you’re likely to wind up wracking your brain over some structural dilemma. Information architecture is hard because you’re creating a map of everything you need to communicate about everything you do. You need to arrange sprawling, complex information in a simple, user-friendly structure.
You need to see it with the eyes of an outsider.
Your challenges will be different if you’re inside the company relaunching its site than if you’re an outside web developer or Internet marketing professional. If you’re on the inside, you have the advantage of in-depth understanding of what you do. On the other hand, you may find it hard to get perspective on what’s essential and what’s not. And you might think in terms of the internal categories you use to structure your work rather than categories that a website visitor would find easy to navigate.
You need to achieve multiple goals.
Your information architecture has to to accomplish multiple goals, all at the same time. It has to create a positive user experience, meet the needs of different audiences, support your SEO strategy, direct people to take action, and more. In so many ways, your architecture is essential to the success of your website—so it’s worth the effort to get it right!
But, too often, people sink countless hours into frustrating, cyclical conversations that don’t lead to the best result. As we work with our clients at JB Media, we’ve developed these three approaches that you can use to avoid that waste of time and opportunity.
Questions to Ask As You Plan Your Website Structure
As you plan your site architecture, you need to answer a lot of questions, including:
- What are your website visitors looking for and how can you make it easy to find?
- What are the most intuitive, helpful categories you can use to organize your information?
- How can your site architecture support your SEO goals? (Hint: if you want to bring in organic search traffic for a certain topic, you probably want to make that topic prominent in your navigation structure.)
- What are you going to do with those awkward misfit pages that don’t fit into the categories you had in mind—but you can’t leave out?
- How will you integrate ongoing content, like a blog or resource center, with your main website pages?
- What do you want people to do on your website and how can you direct them to take that action?
If you’re not running into any brain twisters, you might have skipped a few of these questions (or you’re a genius). We have yet to encounter a site architecture project that’s entirely straightforward. So we’ve developed these three methods for solving each website’s riddle. See what works best for you—the whiteboard method, the sticky note method, the mindmapping method, or some variation.
How to Start Organizing Your Website: Make a List
All three methods start the same way. You make a big list of all pages that you might want to include. Start by listing (or mindmapping) all the core pages that are on your site now. Then, list pages for topics or resources you’ve identified as potential additions. Finally, highlight any topics that you’ve identified as SEO priorities, whether those are new pages to write or existing pages to optimize.
Who are your audiences and what do they need?
As you brainstorm site content, make sure to consider your audiences. Who comes to your site and what are they hoping to find? Is your site currently meeting the needs of all of your main audiences? If so, what pages are most important? (Google Analytics can help you answer that.) Do you need to add new resources for some website users? (Again, check the data. Google Analytics can show where you’re losing people.)
What if you don’t have an SEO strategy?
Then, you’re getting ahead of yourself! Go back and do your keyword research. Then use your SEO strategy to inform your site architecture. (To learn about all that good stuff, check out the JB Media Institute.)
How big a list are we talking about?
It should be comprehensive but it doesn’t need to be all-inclusive. If you have a big site with a lot of pages, think of it like a tree. You want to list all of the branches, but you don’t need to list all of the twigs. For example, if you have an online store, you might list your product categories but not each individual product. If you have a blog, you might list blog categories but not every single blog post.
Will everything on the list go on the new site?
Not necessarily. You might decide to drop some pages or consolidate redundant pages. If so, working from this list can help you identify pages to cut and plan for 301 redirects.
Use Color Coding to Make Your Plan More Visual
There are actually multiple lists within your list. You’ve got one list of existing pages and another list of new pages to create. Plus, you have a list of SEO priority pages that may include both existing and new pages. In all of our approaches to website mapping, we use different colors for these different kinds of pages—whether that means multi-colored markers, multi-colored sticky notes, or multi-colored nodes in a mindmapping program. This color coding helps to visualize what it will take to realize the plan we’re creating.
Now that you’ve got your list of all the pieces that can make up your website, it’s time to start deciding where they go.
Option #1: A Big Whiteboard
What You Need: a large whiteboard, colored markers, someone to mediate discussion
One interactive, visual way to work on your information architecture is to get your team together in a room with a big whiteboard. Write your big list of potential pages on one side of the board. Start with some suggested categories and start moving pages into those categories. As you add pages to your category lists, erase or cross them out from your big list. As you go, you’ll probably discover problems that you need to solve. You may need to revise your categories, or the way you sort pages among them, or both.
Pros:
- Multiple people can contribute to the process at once.
- Everyone can see the board.
Cons:
- The revision process can get messy as you erase items and rewrite them in different places.
Tip: Make sure to take a photo of your work, so you can reference it after you whiteboard gets erased!
Example of Website Architecture Plan on a Whiteboard
Here’s an example of a website architecture plan on a big whiteboard. It’s color coded, so we can identify existing pages, edits and changes, new pages, and SEO pages.
Option #2: Sticky Notes on a Table
What You Need: A big, empty table; several different colors of sticky notes; a thick-tipped pen or marker; someone to facilitate
Start by writing out all your potential pages on sticky notes. Use one color paper for existing webpages and another color for new webpages. Write your draft website categories on notes, too, and place those category notes on the table, with room to form columns beneath them. Each category on your website will be represented by a column of notes on the table. Now, start arranging the notes for your pages below the category headers. If you need to redefine your categories, write out some new ones and see how they work for you. If several pages need to be consolidated, you can stack those sticky notes on top of each other. If a page will branch out to several more pages, you can arrange your notes in a horizontal line, extending to the right or left (as long as it doesn’t bump into the next vertical column).
Pros:
- This is another good way to work collaboratively.
- Some people may find the process of moving pieces around more engaging than writing on a board.
- It’s easy to revise as you go, with no messy erasures.
Cons:
- You’re limited in the complexity you can map out with this method.
- Only so many people can get a good vantage of the whole table, so this works better for a few collaborators than a large team.
Tip: Take a photo! You can’t leave that table covered in squares of paper forever.
Example of Website Architecture Plan with Sticky Notes
Here’s an example of the same website architecture plan, using the sticky note method. We used the same color coding as in the whiteboard example.
Option #3: Mindmapping
What You Need: A mindmapping program of your choice. We use the free version of Mindmup.
We often diagram website structure with a mindmapping program. These programs allow you to create a node for each page of your website, and show how it connects to other pages. The node for your homepage branches out to your main navigation pages and so on. You can color the nodes, using your color coding system. You can also add lines showing how pages interlink. A huge advantage of mindmapping is that you can show much more complexity that you can with a white board or sticky notes—and your diagram is still neat and easy to read.
However, mindmapping isn’t as great for collaboration. This is a technique we tend to use when one person is drafting a site architecture plan to present to a larger group. It can also be a great way to record a plan that you made as a group.
Want to make mindmapping more collaborative?
You could try projecting your computer screen so a roomful of people can see it and offer their input as you go. While mindmapping can be more sophisticated than colored markers or squares of paper, you might find that you lose some of the energy of more tactile approaches. See what works for you!
Pros:
- You can map more complex plans.
- It’s easy to make revisions.
- The document is neat and easy to read.
- It doesn’t take up physical space in your office.
- You can save it and refer to it whenever you want.
- You can easily share it with various collaborators.
- You can hyperlink from mindmap nodes to corresponding web pages.
Cons:
- This method lends itself less to collaboration.
Example of Website Architecture Plan as a Mindmap
Here’s the same website architecture example as a mindmap. One cool thing about mindmapping is that its easy to show how pages link together (those red dashed lines.)
Left Brain Time: The Site Architecture Spreadsheet
We love these visual formats for brainstorming site architecture and converting problems into solutions. As we move on to the next stage—implementing our plan—we transfer the ideas that we’ve sketched or diagrammed or laid out on a table into a site architecture spreadsheet.
Spreadsheets. They’re not always a thrill, but they’re orderly. And that’s what we want as we coordinate with clients, writers, designers, and developers. (We’re not exactly going to send them a photo of our whiteboard scrawl to work from!) Plus, in a spreadsheet, you can add notes about all the finer details. And that linear format makes a great to-do list you can use to track progress. After we let our right brains out to play with the visual brainstorming, our left brains get a field day with the spreadsheet!
How Do YOU Plan Websites?
Here at JB Media, we’re always experimenting and learning as we go. These are three productive (and fun) ways that we’ve found to solve site architecture puzzles. Of course, there are lots of ways to go about it. Bottom line: we get the best results from a process that’s visual, collaborative, and easy to revise as you go.
What have you discovered? We’d love to hear your tips, breakthroughs, and stories. If you have any questions, please feel free to contact us.
