Death to Visio Site Maps! How Clear Ink uses Drupal for Information Architecture, Prototyping, and Project Management

| |
Developing great content and information architecture are arguably the most important steps toward creating a world class web site. Here's how this process normally goes down:
  1. IA expert designs a beautiful, well thought out site map in Microsoft Visio leveraging industry best practices and the web site sponsor's business objectives.

  2. Site map goes to the sponsor, there might be a few rounds of revisions but basically they love it, and say "Great start building it out. We'll write the content."

  3. Large amounts of work by the graphic design and technical staff building toward the site map.

  4. 10,000 years elapse, business objectives change, best practices are revised, great civilizations rise and fall.

  5. Content finally shows up and it consists of 475 faxes, 280 Word documents and around 400 GB of photos and low resolution logos in weird file formats that only open on old Commodore 64s. All of which have no relation to the original beautiful, well thought out site map.

  6. Hilarity ensues, everything is slammed together as quickly as possible to meet a deadline and nobody is amused with the final product.
So we started thinking about how to streamline the information architecture and content gathering process. We needed to put the content available at the start of the project into a form that would allow the sponsor to start clicking around and understanding what they had and how it worked in a web environment. We wanted the ability to reorganize the pages quickly, notify the client about what was needed and organize any feedback. There are a million ways to handle each phase using prototyping and bug tracking tools, but few that did everything we needed. Then the light bulb went on to tackle the problem with Drupal (the same the wildly popular, open source, content management system that we've used to develop blogs and other content heavy sites in the past). So I downloaded a copy, installed it on a web server in about five minutes and got started. Here's a new set of steps to manage the same process using some of Drupal's built in features:

  1. Dump all of the copy, images, and other files into Drupal as pages and attachments.

  2. The IA Expert can start developing a realistic information architecture using Drupal's menuing system. For sections that don't have content yet, they can build empty pages that just say things like "JOE IS WRITING THIS PAGE" in bold, red text. After this step you have something resembling a web site.

  3. Let the nit-picking begin! Create user accounts for everyone in the sponsor's organization who could possibly help. Let them use Drupal's commenting features to say things like "HEY, THIS PAGE HAS THE WRONG PHONE NUMBER!" or let them make edits to the pages directly. Be sure to remove all of those "development comments" before the site goes live (unless you want the public to know what happens in the kitchen) and also don't forget to use Drupal's revision tracking feature, so you can roll back any edits that the chief sponsor doesn't agree with.

  4. Wow, the content is starting to looking good, but with the deadline approaching it's time for you and the sponsor to do a content freeze, evaluate what's there and make a realistic triage plan for the work that is left. This is also a great time to get the graphic designers and developers involved, so they can start creating templates and working on the technical underpinnings. Like I said before, there is a huge community of module developers and template designers that can help with customization.

  5. Launch the web site and turn over the keys to the sponsor. You won't need to spend hours training them on the administrative tools, because they have been involved making edits from day one. Now when the CEO decides that they don't like their photo, you won't get a panicked phone call, because they will know how to log in and change it themselves.
Of course this scenario reflects life in an alternate reality where everything goes smoothly and Clear Ink still gets plenty of panicked calls about changing the CEO's photo, but at least now they know not to send it in Commodore 64 format.

Good luck and let us know if you are doing something similar and how it works out.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

What a great idea!!! I've

What a great idea!!! I've tried to use wikis in this way, but it hadn't occurred to me to use Drupal. Almost fell over laughing at this: "Content finally shows up and it consists of 475 faxes, 280 Word documents and around 400 GB of photos and low resolution logos in weird file formats that only open on old Commodore 64s. All of which have no relation to the original beautiful, well thought out site map." So damn true. Thanks for sharing this. Excellent idea

Doma

Oh, Commodore 64

Which image format? And this is a rather interesting article, yes. In my practice a website begins with a design, then gets coded and it's not the content that drives it -- which in hindsight is rather silly. Thanks for the enlightement.

PMG, maybe?

I think the last one we got came in looking like that unicorn. ;)

Thanks for the comment,
-- Mark

Like Dries said: it's funny

Like Dries said: it's funny 'cause it's true. Interesting approach to prototyping and a great way to involve the stakeholders early on. Thanks!

Post new comment

The content of this field is kept private and will not be shown publicly.

Captcha Image: you will need to recognize the text in it.
Please type in the letters/numbers that are shown in the image above.