Last month we refreshed the information architecture (IA) on our own website. This blog shares the steps we took.
Look at what you’ve got
Draw up a current sitemap to see what content you’ve got. You see the breadth and depth of content this way. I used an Open source tool called ‘xmind’ to create a quick sitemap.
Start scanning for things that can be weeded, or rearranged. Are there any redundant pages? Does each section make sense? Are the titles the simplest and most direct way to communicate what’s underneath? Are there items that could be placed elsewhere, like in a footer?
Involve users (if you can)
If time permits, conduct an open card sort of your content with users. I found this article by UX professional Donna Spence helpful:
http://boxesandarrows.com/card-sorting-a-definitive-guide/
Again, if time is on your side, conduct a content audit. This is where you spreadsheet all your content and decided what goes and what stays. I found this article helpfu, also by Donna Spence:
http://uxmastery.com/how-to-conduct-a-content-audit/
Draw a proposed sitemap (and get feedback)
Based on our analysis, we drew a new site map. To user test this, you can conduct a closed card sort (works best for a content-centred website not a task-centred website).
We reduced the number of headings from seven to four. This was because some content was in it’s own section when it didn’t need to be. I had read that the term “jobs” created better click through than other terms. We moved ‘Jobs’ and ‘Contact us’ out of the main navigation to the very top of the header. This was so users could find this more easily, especially on mobile when you may be looking for a quick phone number.
Design a new header (you don’t have to but it can refresh the look)
To showcase the new IA, we also designed a new header and our front-end developer implemented it in our staging environment.
Do a practice run in ‘staging’
Turns out a fair bit can break when you try to rearrange your IA. It’s good to have a trusty lead developer on your side. Our site is built in Drupal so I worked with a Drupal dev. Fixing up those glitchy things you may not have realised about the site when you change the structure. “Get it perfect in staging” said our dev. Then if you need to restore things to how they were meant to be, you have something to refer to. This was great advice. Another benefit of using a staging environment is that you can show stakeholders the staging version and get feedback. Then when it comes to production, you have one to refer to. Any new content you can just CTRL-C, CTRL-V.
Get the testers on it
For our new header, we used our in-house accessibility tester and general tester. We wanted to make sure keyboard users and mobile users found it easy to use. Turned out our tester had pretty wide fingers, and his fingers couldn’t easily navigate our menus on mobile. So we increased the line spacing and chevron size. Our accessibility tester also found one aspect of the menu couldn’t be navigated with his keyboard. So we fixed that too.
Go live
We have officially given our website “a haircut.” Lopping off hairy, extraneous content so users can find more quickly and easily what they need.
It’s a real team effort getting an IA ready, and then implementing it. We worked with a Catalyst sys-ad (system administrator) to do a code release and then time our content changes in Production. We worked with developers to move pages that had any hard-coded items.
Keep an eye on the analytics
Our next thing is to keep a continual cycle of improvement on our site. We will test how the changes may have improved our Google organic search rankings and our page views in Piwik web analytics (an open source alternative to Google analytics). We will be watching how we rank on our main product and services lines, and early indications show our Google rankings have been lifted already.
Blog author: Megan Williams, BA/UX Designer, Catalyst
