Working from content diagrams

This week I have been working with Rich and Paul at Clearleft on a quite different project to what I would normally be involved with – designing an intranet.

With Rich leading the project we met with the client to talk about the main objectives for the project and were pleasantly surprised with the amount of background, research and thought they have already put into what is going to be the primary resource for everyone within the organisation.

The biggest thing that has been highlighted is that they want to avoid one common pitfalls of many intranets, becoming a dumping ground for documents which quickly become out or date or have infrequent use. Instead, the intranet will centre around the people within the organisation and the work that they do. It is intended to facilitate collaboration and communication between individuals. By making people the heart of the service they hope to get more mingling going on between groups and new ideas coming out of that mingling.

We kicked off by writing a list of all the things we want to see on each of the page types and spent about a day checking that we hadn’t missed anything as well as throwing in some ideas which were a little different to what you would normally see.

By the end of it we had a pretty comprehensive list. We’d merged items which were too similar, refined some that were too broad and had a complete map of the system using nothing more than some pen and paper and an itemised list.

The next step was for me to take this list and put each item on it into a hierarchy. As I had been doing this as we were going along already, this afforded us some extra time which I used to take each of the page content diagrams and throw them into html pages. At first, I just put everything from the list in as h1 tags; basically showing where each section would start. By going about it this way you’ve suddenly got the beginnings of a simplified mobile-first page layout.

Over the last few days I have extended these page diagrams by sourcing similar or exact content to populate these diagrams, again keeping away from marking it up with anything that could be considered layout related, it is still purely text content and a few images semantically ordered.

I wanted to get the markup to be as rich as possible and provide the ability to interact with other systems if it needs to in the future. I’ve done this by applying microformats to certain patterns within the system. For example, being centred around people, it is was more than obvious to add vcard/hcard formatting to the people pages. But I’ve gone a step further than that, events are covered, as are references to peoples publications whether print or online using bibliography microformatting.

Hopefully in a few weeks I will be able to write more insight into approach on taking a UX project quickly through discovery and into a prototype state without the need for faffing with wireframes and design mockups – something which I am very much enjoying on this project. That’s not to say there is no place for these tools and methods, of course there are, but with the nature of this project and the way we’re working through it, these would only be relevant for a few hours if not minutes.

Published by

Andy Parker

User Experience Designer, headbanger, biker, skater, gamer from Brighton UK.